p5js: Creative for Claude Code | AI Skill Market | AI Skill Market

\n \n \n \n \n \n\n\n\n\n\n```\n\nKey implementation patterns:\n- **Seeded randomness**: Always `randomSeed()` + `noiseSeed()` for reproducibility\n- **Color mode**: Use `colorMode(HSB, 360, 100, 100, 100)` for intuitive color control\n- **State separation**: CONFIG for parameters, PALETTE for colors, globals for mutable state\n- **Class-based entities**: Particles, agents, shapes as classes with `update()` + `display()` methods\n- **Offscreen buffers**: `createGraphics()` for layered composition, trails, masks\n\n### Step 4: Preview & Iterate\n\n- Open HTML file directly in browser — no server needed for basic sketches\n- For `loadImage()`/`loadFont()` from local files: use `scripts/serve.sh` or `python3 -m http.server`\n- Chrome DevTools Performance tab to verify 60fps\n- Test at target export resolution, not just the window size\n- Adjust parameters until the visual matches the concept from Step 1\n\n### Step 5: Export\n\n| Format | Method | Command |\n|--------|--------|---------|\n| **PNG** | `saveCanvas('output', 'png')` in `keyPressed()` | Press 's' to save |\n| **High-res PNG** | Puppeteer headless capture | `node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1` |\n| **GIF** | `saveGif('output', 5)` — captures N seconds | Press 'g' to save |\n| **Frame sequence** | `saveFrames('frame', 'png', 10, 30)` — 10s at 30fps | Then `ffmpeg -i frame-%04d.png -c:v libx264 output.mp4` |\n| **MP4** | Puppeteer frame capture + ffmpeg | `bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30` |\n| **SVG** | `createCanvas(w, h, SVG)` with p5.js-svg | `save('output.svg')` |\n\n### Step 6: Quality Verification\n\n- **Does it match the vision?** Compare output to the creative concept. If it looks generic, go back to Step 1\n- **Resolution check**: Is it sharp at the target display size? No aliasing artifacts?\n- **Performance check**: Does it hold 60fps in browser? (30fps minimum for animations)\n- **Color check**: Do the colors work together? Test on both light and dark monitors\n- **Edge cases**: What happens at canvas edges? On resize? After running for 10 minutes?\n\n## Critical Implementation Notes\n\n### Performance — Disable FES First\n\nThe Friendly Error System (FES) adds up to 10x overhead. Disable it in every production sketch:\n\n```javascript\np5.disableFriendlyErrors = true; // BEFORE setup()\n\nfunction setup() {\n pixelDensity(1); // prevent 2x-4x overdraw on retina\n createCanvas(1920, 1080);\n}\n```\n\nIn hot loops (particles, pixel ops), use `Math.*` instead of p5 wrappers — measurably faster:\n\n```javascript\n// In draw() or update() hot paths:\nlet a = Math.sin(t); // not sin(t)\nlet r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq\nlet v = Math.random(); // not random() — when seed not needed\nlet m = Math.min(a, b); // not min(a, b)\n```\n\nNever `console.log()` inside `draw()`. Never manipulate DOM in `draw()`. See `references/troubleshooting.md` § Performance.\n\n### Seeded Randomness — Always\n\nEvery generative sketch must be reproducible. Same seed, same output.\n\n```javascript\nfunction setup() {\n randomSeed(CONFIG.seed);\n noiseSeed(CONFIG.seed);\n // All random() and noise() calls now deterministic\n}\n```\n\nNever use `Math.random()` for generative content — only for performance-critical non-visual code. Always `random()` for visual elements. If you need a random seed: `CONFIG.seed = floor(random(99999))`.\n\n### Generative Art Platform Support (fxhash / Art Blocks)\n\nFor generative art platforms, replace p5's PRNG with the platform's deterministic random:\n\n```javascript\n// fxhash convention\nconst SEED = $fx.hash; // unique per mint\nconst rng = $fx.rand; // deterministic PRNG\n$fx.features({ palette: 'warm', complexity: 'high' });\n\n// In setup():\nrandomSeed(SEED); // for p5's noise()\nnoiseSeed(SEED);\n\n// Replace random() with rng() for platform determinism\nlet x = rng() * width; // instead of random(width)\n```\n\nSee `references/export-pipeline.md` § Platform Export.\n\n### Color Mode — Use HSB\n\nHSB (Hue, Saturation, Brightness) is dramatically easier to work with than RGB for generative art:\n\n```javascript\ncolorMode(HSB, 360, 100, 100, 100);\n// Now: fill(hue, sat, bri, alpha)\n// Rotate hue: fill((baseHue + offset) % 360, 80, 90)\n// Desaturate: fill(hue, sat * 0.3, bri)\n// Darken: fill(hue, sat, bri * 0.5)\n```\n\nNever hardcode raw RGB values. Define a palette object, derive variations procedurally. See `references/color-systems.md`.\n\n### Noise — Multi-Octave, Not Raw\n\nRaw `noise(x, y)` looks like smooth blobs. Layer octaves for natural texture:\n\n```javascript\nfunction fbm(x, y, octaves = 4) {\n let val = 0, amp = 1, freq = 1, sum = 0;\n for (let i = 0; i < octaves; i++) {\n val += noise(x * freq, y * freq) * amp;\n sum += amp;\n amp *= 0.5;\n freq *= 2;\n }\n return val / sum;\n}\n```\n\nFor flowing organic forms, use **domain warping**: feed noise output back as noise input coordinates. See `references/visual-effects.md`.\n\n### createGraphics() for Layers — Not Optional\n\nFlat single-pass rendering looks flat. Use offscreen buffers for composition:\n\n```javascript\nlet bgLayer, fgLayer, trailLayer;\nfunction setup() {\n createCanvas(1920, 1080);\n bgLayer = createGraphics(width, height);\n fgLayer = createGraphics(width, height);\n trailLayer = createGraphics(width, height);\n}\nfunction draw() {\n renderBackground(bgLayer);\n renderTrails(trailLayer); // persistent, fading\n renderForeground(fgLayer); // cleared each frame\n image(bgLayer, 0, 0);\n image(trailLayer, 0, 0);\n image(fgLayer, 0, 0);\n}\n```\n\n### Performance — Vectorize Where Possible\n\np5.js draw calls are expensive. For thousands of particles:\n\n```javascript\n// SLOW: individual shapes\nfor (let p of particles) {\n ellipse(p.x, p.y, p.size);\n}\n\n// FAST: single shape with beginShape()\nbeginShape(POINTS);\nfor (let p of particles) {\n vertex(p.x, p.y);\n}\nendShape();\n\n// FASTEST: pixel buffer for massive counts\nloadPixels();\nfor (let p of particles) {\n let idx = 4 * (floor(p.y) * width + floor(p.x));\n pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;\n}\nupdatePixels();\n```\n\nSee `references/troubleshooting.md` § Performance.\n\n### Instance Mode for Multiple Sketches\n\nGlobal mode pollutes `window`. For production, use instance mode:\n\n```javascript\nconst sketch = (p) => {\n p.setup = function() {\n p.createCanvas(800, 800);\n };\n p.draw = function() {\n p.background(0);\n p.ellipse(p.mouseX, p.mouseY, 50);\n };\n};\nnew p5(sketch, 'canvas-container');\n```\n\nRequired when embedding multiple sketches on one page or integrating with frameworks.\n\n### WebGL Mode Gotchas\n\n- `createCanvas(w, h, WEBGL)` — origin is center, not top-left\n- Y-axis is inverted (positive Y goes up in WEBGL, down in P2D)\n- `translate(-width/2, -height/2)` to get P2D-like coordinates\n- `push()`/`pop()` around every transform — matrix stack overflows silently\n- `texture()` before `rect()`/`plane()` — not after\n- Custom shaders: `createShader(vert, frag)` — test on multiple browsers\n\n### Export — Key Bindings Convention\n\nEvery sketch should include these in `keyPressed()`:\n\n```javascript\nfunction keyPressed() {\n if (key === 's' || key === 'S') saveCanvas('output', 'png');\n if (key === 'g' || key === 'G') saveGif('output', 5);\n if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }\n if (key === ' ') CONFIG.paused = !CONFIG.paused;\n}\n```\n\n### Headless Video Export — Use noLoop()\n\nFor headless rendering via Puppeteer, the sketch **must** use `noLoop()` in setup. Without it, p5's draw loop runs freely while screenshots are slow — the sketch races ahead and you get skipped/duplicate frames.\n\n```javascript\nfunction setup() {\n createCanvas(1920, 1080);\n pixelDensity(1);\n noLoop(); // capture script controls frame advance\n window._p5Ready = true; // signal readiness to capture script\n}\n```\n\nThe bundled `scripts/export-frames.js` detects `_p5Ready` and calls `redraw()` once per capture for exact 1:1 frame correspondence. See `references/export-pipeline.md` § Deterministic Capture.\n\nFor multi-scene videos, use the per-clip architecture: one HTML per scene, render independently, stitch with `ffmpeg -f concat`. See `references/export-pipeline.md` § Per-Clip Architecture.\n\n### Agent Workflow\n\nWhen building p5.js sketches:\n\n1. **Write the HTML file** — single self-contained file, all code inline\n2. **Open in browser** — `open sketch.html` (macOS) or `xdg-open sketch.html` (Linux)\n3. **Local assets** (fonts, images) require a server: `python3 -m http.server 8080` in the project directory, then open `http://localhost:8080/sketch.html`\n4. **Export PNG/GIF** — add `keyPressed()` shortcuts as shown above, tell the user which key to press\n5. **Headless export** — `node scripts/export-frames.js sketch.html --frames 300` for automated frame capture (sketch must use `noLoop()` + `_p5Ready`)\n6. **MP4 rendering** — `bash scripts/render.sh sketch.html output.mp4 --duration 30`\n7. **Iterative refinement** — edit the HTML file, user refreshes browser to see changes\n8. **Load references on demand** — use `skill_view(name=\"p5js\", file_path=\"references/...\")` to load specific reference files as needed during implementation\n\n## Performance Targets\n\n| Metric | Target |\n|--------|--------|\n| Frame rate (interactive) | 60fps sustained |\n| Frame rate (animated export) | 30fps minimum |\n| Particle count (P2D shapes) | 5,000-10,000 at 60fps |\n| Particle count (pixel buffer) | 50,000-100,000 at 60fps |\n| Canvas resolution | Up to 3840x2160 (export), 1920x1080 (interactive) |\n| File size (HTML) | < 100KB (excluding CDN libraries) |\n| Load time | < 2s to first frame |\n\n## References\n\n| File | Contents |\n|------|----------|\n| `references/core-api.md` | Canvas setup, coordinate system, draw loop, `push()`/`pop()`, offscreen buffers, composition patterns, `pixelDensity()`, responsive design |\n| `references/shapes-and-geometry.md` | 2D primitives, `beginShape()`/`endShape()`, Bezier/Catmull-Rom curves, `vertex()` systems, custom shapes, `p5.Vector`, signed distance fields, SVG path conversion |\n| `references/visual-effects.md` | Noise (Perlin, fractal, domain warp, curl), flow fields, particle systems (physics, flocking, trails), pixel manipulation, texture generation (stipple, hatch, halftone), feedback loops, reaction-diffusion |\n| `references/animation.md` | Frame-based animation, easing functions, `lerp()`/`map()`, spring physics, state machines, timeline sequencing, `millis()`-based timing, transition patterns |\n| `references/typography.md` | `text()`, `loadFont()`, `textToPoints()`, kinetic typography, text masks, font metrics, responsive text sizing |\n| `references/color-systems.md` | `colorMode()`, HSB/HSL/RGB, `lerpColor()`, `paletteLerp()`, procedural palettes, color harmony, `blendMode()`, gradient rendering, curated palette library |\n| `references/webgl-and-3d.md` | WEBGL renderer, 3D primitives, camera, lighting, materials, custom geometry, GLSL shaders (`createShader()`, `createFilterShader()`), framebuffers, post-processing |\n| `references/interaction.md` | Mouse events, keyboard state, touch input, DOM elements, `createSlider()`/`createButton()`, audio input (p5.sound FFT/amplitude), scroll-driven animation, responsive events |\n| `references/export-pipeline.md` | `saveCanvas()`, `saveGif()`, `saveFrames()`, deterministic headless capture, ffmpeg frame-to-video, CCapture.js, SVG export, per-clip architecture, platform export (fxhash), video gotchas |\n| `references/troubleshooting.md` | Performance profiling, per-pixel budgets, common mistakes, browser compatibility, WebGL debugging, font loading issues, pixel density traps, memory leaks, CORS |\n| `templates/viewer.html` | Interactive viewer template: seed navigation (prev/next/random/jump), parameter sliders, download PNG, responsive canvas. Start from this for explorable generative art |\n\n---\n\n## Creative Divergence (use only when user requests experimental/creative/unique output)\n\nIf the user asks for creative, experimental, surprising, or unconventional output, select the strategy that best fits and reason through its steps BEFORE generating code.\n\n- **Conceptual Blending** — when the user names two things to combine or wants hybrid aesthetics\n- **SCAMPER** — when the user wants a twist on a known generative art pattern\n- **Distance Association** — when the user gives a single concept and wants exploration (\"make something about time\")\n\n### Conceptual Blending\n1. Name two distinct visual systems (e.g., particle physics + handwriting)\n2. Map correspondences (particles = ink drops, forces = pen pressure, fields = letterforms)\n3. Blend selectively — keep mappings that produce interesting emergent visuals\n4. Code the blend as a unified system, not two systems side-by-side\n\n### SCAMPER Transformation\nTake a known generative pattern (flow field, particle system, L-system, cellular automata) and systematically transform it:\n- **Substitute**: replace circles with text characters, lines with gradients\n- **Combine**: merge two patterns (flow field + voronoi)\n- **Adapt**: apply a 2D pattern to a 3D projection\n- **Modify**: exaggerate scale, warp the coordinate space\n- **Purpose**: use a physics sim for typography, a sorting algorithm for color\n- **Eliminate**: remove the grid, remove color, remove symmetry\n- **Reverse**: run the simulation backward, invert the parameter space\n\n### Distance Association\n1. Anchor on the user's concept (e.g., \"loneliness\")\n2. Generate associations at three distances:\n - Close (obvious): empty room, single figure, silence\n - Medium (interesting): one fish in a school swimming the wrong way, a phone with no notifications, the gap between subway cars\n - Far (abstract): prime numbers, asymptotic curves, the color of 3am\n3. Develop the medium-distance associations — they're specific enough to visualize but unexpected enough to be interesting","url":"https://aiskill.market/skills/p5js","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform (macOS, Linux, Windows)","offers":{"@type":"Offer","price":"0","priceCurrency":"USD","availability":"https://schema.org/InStock"},"datePublished":"2026-04-23T16:32:04.436766+00:00","dateModified":"2026-04-23T16:32:04.436766+00:00","softwareVersion":"1.0.0","aggregateRating":{"@type":"AggregateRating","ratingValue":4,"bestRating":5,"worstRating":1,"ratingCount":1},"downloadUrl":"https://github.com/NousResearch/hermes-agent/blob/main/skills/creative/p5js/SKILL.md","installUrl":"https://github.com/NousResearch/hermes-agent/blob/main/skills/creative/p5js/SKILL.md","keywords":"hermes, nous-research, creative, creative-coding, generative-art, p5js, canvas, interactive, visualization, webgl, shaders, animation","author":{"@type":"Organization","name":"NousResearch","url":"https://github.com/NousResearch"}}

p5js

Production pipeline for interactive and generative visual art using p5.js. Creates browser-based sketches, generative art, data visualizations, interactive experiences, 3D scenes, audio-reactive visua

High Quality

New

AI Skill Market Insights

Real data. Real impact.

Popularity

Rising

Emerging

Active Users

Developers

Time Saved

2+ hrs

Per week

Quality

4/5

Excellent

Be Part of the 0+ Developer Community

Skills give you superpowers. Install in 30 seconds.

p5.js Production Pipeline

Creative Standard

This is visual art rendered in the browser. The canvas is the medium; the algorithm is the brush.

Before writing a single line of code, articulate the creative concept. What does this piece communicate? What makes the viewer stop scrolling? What separates this from a code tutorial example? The user's prompt is a starting point — interpret it with creative ambition.

First-render excellence is non-negotiable. The output must be visually striking on first load. If it looks like a p5.js tutorial exercise, a default configuration, or "AI-generated creative coding," it is wrong. Rethink before shipping.

Go beyond the reference vocabulary. The noise functions, particle systems, color palettes, and shader effects in the references are a starting vocabulary. For every project, combine, layer, and invent. The catalog is a palette of paints — you write the painting.

Be proactively creative. If the user asks for "a particle system," deliver a particle system with emergent flocking behavior, trailing ghost echoes, palette-shifted depth fog, and a background noise field that breathes. Include at least one visual detail the user didn't ask for but will appreciate.

Dense, layered, considered. Every frame should reward viewing. Never flat white backgrounds. Always compositional hierarchy. Always intentional color. Always micro-detail that only appears on close inspection.

Cohesive aesthetic over feature count. All elements must serve a unified visual language — shared color temperature, consistent stroke weight vocabulary, harmonious motion speeds. A sketch with ten unrelated effects is worse than one with three that belong together.

Modes

Mode	Input	Output	Reference
Generative art	Seed / parameters	Procedural visual composition (still or animated)	`references/visual-effects.md`
Data visualization	Dataset / API	Interactive charts, graphs, custom data displays	`references/interaction.md`
Interactive experience	None (user drives)	Mouse/keyboard/touch-driven sketch	`references/interaction.md`
Animation / motion graphics	Timeline / storyboard	Timed sequences, kinetic typography, transitions	`references/animation.md`
3D scene	Concept description	WebGL geometry, lighting, camera, materials	`references/webgl-and-3d.md`
Image processing	Image file(s)	Pixel manipulation, filters, mosaic, pointillism	`references/visual-effects.md` § Pixel Manipulation
Audio-reactive	Audio file / mic	Sound-driven generative visuals	`references/interaction.md` § Audio Input

Stack

Single self-contained HTML file per project. No build step required.

Layer	Tool	Purpose
Core	p5.js 1.11.3 (CDN)	Canvas rendering, math, transforms, event handling
3D	p5.js WebGL mode	3D geometry, camera, lighting, GLSL shaders
Audio	p5.sound.js (CDN)	FFT analysis, amplitude, mic input, oscillators
Export	Built-in `saveCanvas()` / `saveGif()` / `saveFrames()`	PNG, GIF, frame sequence output
Capture	CCapture.js (optional)	Deterministic framerate video capture (WebM, GIF)
Headless	Puppeteer + Node.js (optional)	Automated high-res rendering, MP4 via ffmpeg
SVG	p5.js-svg 1.6.0 (optional)	Vector output for print — requires p5.js 1.x
Natural media	p5.brush (optional)	Watercolor, charcoal, pen — requires p5.js 2.x + WEBGL
Texture	p5.grain (optional)	Film grain, texture overlays
Fonts	Google Fonts / `loadFont()`	Custom typography via OTF/TTF/WOFF2

Version Note

p5.js 1.x (1.11.3) is the default — stable, well-documented, broadest library compatibility. Use this unless a project requires 2.x features.

p5.js 2.x (2.2+) adds:

async setup()

replacing

preload()

, OKLCH/OKLAB color modes,

splineVertex()

, shader

.modify()

API, variable fonts,

textToContours()

, pointer events. Required for p5.brush. See

references/core-api.md

§ p5.js 2.0.

Pipeline

Every project follows the same 6-stage path:

CONCEPT → DESIGN → CODE → PREVIEW → EXPORT → VERIFY

CONCEPT — Articulate the creative vision: mood, color world, motion vocabulary, what makes this unique
DESIGN — Choose mode, canvas size, interaction model, color system, export format. Map concept to technical decisions
CODE — Write single HTML file with inline p5.js. Structure: globals →
```
preload()
```
→
```
setup()
```
→
```
draw()
```
→ helpers → classes → event handlers
PREVIEW — Open in browser, verify visual quality. Test at target resolution. Check performance
EXPORT — Capture output:
```
saveCanvas()
```
for PNG,
```
saveGif()
```
for GIF,
```
saveFrames()
```
+ ffmpeg for MP4, Puppeteer for headless batch
VERIFY — Does the output match the concept? Is it visually striking at the intended display size? Would you frame it?

Creative Direction

Aesthetic Dimensions

Dimension	Options	Reference
Color system	HSB/HSL, RGB, named palettes, procedural harmony, gradient interpolation	`references/color-systems.md`
Noise vocabulary	Perlin noise, simplex, fractal (octaved), domain warping, curl noise	`references/visual-effects.md` § Noise
Particle systems	Physics-based, flocking, trail-drawing, attractor-driven, flow-field following	`references/visual-effects.md` § Particles
Shape language	Geometric primitives, custom vertices, bezier curves, SVG paths	`references/shapes-and-geometry.md`
Motion style	Eased, spring-based, noise-driven, physics sim, lerped, stepped	`references/animation.md`
Typography	System fonts, loaded OTF, `textToPoints()` particle text, kinetic	`references/typography.md`
Shader effects	GLSL fragment/vertex, filter shaders, post-processing, feedback loops	`references/webgl-and-3d.md` § Shaders
Composition	Grid, radial, golden ratio, rule of thirds, organic scatter, tiled	`references/core-api.md` § Composition
Interaction model	Mouse follow, click spawn, drag, keyboard state, scroll-driven, mic input	`references/interaction.md`
Blend modes	`BLEND` , `ADD` , `MULTIPLY` , `SCREEN` , `DIFFERENCE` , `EXCLUSION` , `OVERLAY`	`references/color-systems.md` § Blend Modes
Layering	`createGraphics()` offscreen buffers, alpha compositing, masking	`references/core-api.md` § Offscreen Buffers
Texture	Perlin surface, stippling, hatching, halftone, pixel sorting	`references/visual-effects.md` § Texture Generation

Per-Project Variation Rules

Never use default configurations. For every project:

Custom color palette — never raw
```
fill(255, 0, 0)
```
. Always a designed palette with 3-7 colors
Custom stroke weight vocabulary — thin accents (0.5), medium structure (1-2), bold emphasis (3-5)
Background treatment — never plain
```
background(0)
```
or
```
background(255)
```
. Always textured, gradient, or layered
Motion variety — different speeds for different elements. Primary at 1x, secondary at 0.3x, ambient at 0.1x
At least one invented element — a custom particle behavior, a novel noise application, a unique interaction response

Project-Specific Invention

For every project, invent at least one of:

A custom color palette matching the mood (not a preset)
A novel noise field combination (e.g., curl noise + domain warp + feedback)
A unique particle behavior (custom forces, custom trails, custom spawning)
An interaction mechanic the user didn't request but that elevates the piece
A compositional technique that creates visual hierarchy

Parameter Design Philosophy

Parameters should emerge from the algorithm, not from a generic menu. Ask: "What properties of this system should be tunable?"

Good parameters expose the algorithm's character:

Quantities — how many particles, branches, cells (controls density)
Scales — noise frequency, element size, spacing (controls texture)
Rates — speed, growth rate, decay (controls energy)
Thresholds — when does behavior change? (controls drama)
Ratios — proportions, balance between forces (controls harmony)

Bad parameters are generic controls unrelated to the algorithm:

"color1", "color2", "size" — meaningless without context
Toggle switches for unrelated effects
Parameters that only change cosmetics, not behavior

Every parameter should change how the algorithm thinks, not just how it looks. A "turbulence" parameter that changes noise octaves is good. A "particle size" slider that only changes

ellipse()

radius is shallow.

Workflow

Step 1: Creative Vision

Before any code, articulate:

Mood / atmosphere: What should the viewer feel? Contemplative? Energized? Unsettled? Playful?
Visual story: What happens over time (or on interaction)? Build? Decay? Transform? Oscillate?
Color world: Warm/cool? Monochrome? Complementary? What's the dominant hue? The accent?
Shape language: Organic curves? Sharp geometry? Dots? Lines? Mixed?
Motion vocabulary: Slow drift? Explosive burst? Breathing pulse? Mechanical precision?
What makes THIS different: What is the one thing that makes this sketch unique?

Map the user's prompt to aesthetic choices. "Relaxing generative background" demands different everything from "glitch data visualization."

Step 2: Technical Design

Mode — which of the 7 modes from the table above
Canvas size — landscape 1920x1080, portrait 1080x1920, square 1080x1080, or responsive
```
windowWidth/windowHeight
```
Renderer —
```
P2D
```
(default) or
```
WEBGL
```
(for 3D, shaders, advanced blend modes)
Frame rate — 60fps (interactive), 30fps (ambient animation), or
```
noLoop()
```
(static generative)
Export target — browser display, PNG still, GIF loop, MP4 video, SVG vector
Interaction model — passive (no input), mouse-driven, keyboard-driven, audio-reactive, scroll-driven
Viewer UI — for interactive generative art, start from
```
templates/viewer.html
```
which provides seed navigation, parameter sliders, and download. For simple sketches or video export, use bare HTML

Step 3: Code the Sketch

For interactive generative art (seed exploration, parameter tuning): start from

templates/viewer.html

. Read the template first, keep the fixed sections (seed nav, actions), replace the algorithm and parameter controls. This gives the user seed prev/next/random/jump, parameter sliders with live update, and PNG download — all wired up.

For animations, video export, or simple sketches: use bare HTML:

Single HTML file. Structure:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Project Name</title>
  <script>p5.disableFriendlyErrors = true;</script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/p5.min.js"></script>
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.11.3/addons/p5.sound.min.js"></script> -->
  <!-- <script src="https://unpkg.com/p5.js-svg@1.6.0"></script> -->  <!-- SVG export -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/ccapture.js-npmfixed/build/CCapture.all.min.js"></script> -->  <!-- video capture -->
  <style>
    html, body { margin: 0; padding: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
<script>
// === Configuration ===
const CONFIG = {
  seed: 42,
  // ... project-specific params
};

// === Color Palette ===
const PALETTE = {
  bg: '#0a0a0f',
  primary: '#e8d5b7',
  // ...
};

// === Global State ===
let particles = [];

// === Preload (fonts, images, data) ===
function preload() {
  // font = loadFont('...');
}

// === Setup ===
function setup() {
  createCanvas(1920, 1080);
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  colorMode(HSB, 360, 100, 100, 100);
  // Initialize state...
}

// === Draw Loop ===
function draw() {
  // Render frame...
}

// === Helper Functions ===
// ...

// === Classes ===
class Particle {
  // ...
}

// === Event Handlers ===
function mousePressed() { /* ... */ }
function keyPressed() { /* ... */ }
function windowResized() { resizeCanvas(windowWidth, windowHeight); }
</script>
</body>
</html>

Key implementation patterns:

Seeded randomness: Always
```
randomSeed()
```
+
```
noiseSeed()
```
for reproducibility
Color mode: Use
```
colorMode(HSB, 360, 100, 100, 100)
```
for intuitive color control
State separation: CONFIG for parameters, PALETTE for colors, globals for mutable state
Class-based entities: Particles, agents, shapes as classes with
```
update()
```
+
```
display()
```
methods
Offscreen buffers:
```
createGraphics()
```
for layered composition, trails, masks

Step 4: Preview & Iterate

Open HTML file directly in browser — no server needed for basic sketches

For

loadImage()

loadFont()

from local files: use

scripts/serve.sh

python3 -m http.server

Chrome DevTools Performance tab to verify 60fps
Test at target export resolution, not just the window size
Adjust parameters until the visual matches the concept from Step 1

Step 5: Export

Format	Method	Command
PNG	`saveCanvas('output', 'png')` in `keyPressed()`	Press 's' to save
High-res PNG	Puppeteer headless capture	`node scripts/export-frames.js sketch.html --width 3840 --height 2160 --frames 1`
GIF	`saveGif('output', 5)` — captures N seconds	Press 'g' to save
Frame sequence	`saveFrames('frame', 'png', 10, 30)` — 10s at 30fps	Then `ffmpeg -i frame-%04d.png -c:v libx264 output.mp4`
MP4	Puppeteer frame capture + ffmpeg	`bash scripts/render.sh sketch.html output.mp4 --duration 30 --fps 30`
SVG	`createCanvas(w, h, SVG)` with p5.js-svg	`save('output.svg')`

Step 6: Quality Verification

Does it match the vision? Compare output to the creative concept. If it looks generic, go back to Step 1
Resolution check: Is it sharp at the target display size? No aliasing artifacts?
Performance check: Does it hold 60fps in browser? (30fps minimum for animations)
Color check: Do the colors work together? Test on both light and dark monitors
Edge cases: What happens at canvas edges? On resize? After running for 10 minutes?

Critical Implementation Notes

Performance — Disable FES First

The Friendly Error System (FES) adds up to 10x overhead. Disable it in every production sketch:

p5.disableFriendlyErrors = true;  // BEFORE setup()

function setup() {
  pixelDensity(1);  // prevent 2x-4x overdraw on retina
  createCanvas(1920, 1080);
}

In hot loops (particles, pixel ops), use

Math.*

instead of p5 wrappers — measurably faster:

// In draw() or update() hot paths:
let a = Math.sin(t);          // not sin(t)
let r = Math.sqrt(dx*dx+dy*dy); // not dist() — or better: skip sqrt, compare magSq
let v = Math.random();        // not random() — when seed not needed
let m = Math.min(a, b);       // not min(a, b)

Never

console.log()

inside

draw()

. Never manipulate DOM in

draw()

. See

references/troubleshooting.md

§ Performance.

Seeded Randomness — Always

Every generative sketch must be reproducible. Same seed, same output.

function setup() {
  randomSeed(CONFIG.seed);
  noiseSeed(CONFIG.seed);
  // All random() and noise() calls now deterministic
}

Never use

Math.random()

for generative content — only for performance-critical non-visual code. Always

random()

for visual elements. If you need a random seed:

CONFIG.seed = floor(random(99999))

Generative Art Platform Support (fxhash / Art Blocks)

For generative art platforms, replace p5's PRNG with the platform's deterministic random:

// fxhash convention
const SEED = $fx.hash;              // unique per mint
const rng = $fx.rand;               // deterministic PRNG
$fx.features({ palette: 'warm', complexity: 'high' });

// In setup():
randomSeed(SEED);   // for p5's noise()
noiseSeed(SEED);

// Replace random() with rng() for platform determinism
let x = rng() * width;  // instead of random(width)

See

references/export-pipeline.md

§ Platform Export.

Color Mode — Use HSB

HSB (Hue, Saturation, Brightness) is dramatically easier to work with than RGB for generative art:

colorMode(HSB, 360, 100, 100, 100);
// Now: fill(hue, sat, bri, alpha)
// Rotate hue: fill((baseHue + offset) % 360, 80, 90)
// Desaturate: fill(hue, sat * 0.3, bri)
// Darken: fill(hue, sat, bri * 0.5)

Never hardcode raw RGB values. Define a palette object, derive variations procedurally. See

references/color-systems.md

Noise — Multi-Octave, Not Raw

Raw

noise(x, y)

looks like smooth blobs. Layer octaves for natural texture:

function fbm(x, y, octaves = 4) {
  let val = 0, amp = 1, freq = 1, sum = 0;
  for (let i = 0; i < octaves; i++) {
    val += noise(x * freq, y * freq) * amp;
    sum += amp;
    amp *= 0.5;
    freq *= 2;
  }
  return val / sum;
}

For flowing organic forms, use domain warping: feed noise output back as noise input coordinates. See

references/visual-effects.md

createGraphics() for Layers — Not Optional

Flat single-pass rendering looks flat. Use offscreen buffers for composition:

let bgLayer, fgLayer, trailLayer;
function setup() {
  createCanvas(1920, 1080);
  bgLayer = createGraphics(width, height);
  fgLayer = createGraphics(width, height);
  trailLayer = createGraphics(width, height);
}
function draw() {
  renderBackground(bgLayer);
  renderTrails(trailLayer);   // persistent, fading
  renderForeground(fgLayer);  // cleared each frame
  image(bgLayer, 0, 0);
  image(trailLayer, 0, 0);
  image(fgLayer, 0, 0);
}

Performance — Vectorize Where Possible

p5.js draw calls are expensive. For thousands of particles:

// SLOW: individual shapes
for (let p of particles) {
  ellipse(p.x, p.y, p.size);
}

// FAST: single shape with beginShape()
beginShape(POINTS);
for (let p of particles) {
  vertex(p.x, p.y);
}
endShape();

// FASTEST: pixel buffer for massive counts
loadPixels();
for (let p of particles) {
  let idx = 4 * (floor(p.y) * width + floor(p.x));
  pixels[idx] = r; pixels[idx+1] = g; pixels[idx+2] = b; pixels[idx+3] = 255;
}
updatePixels();

See

references/troubleshooting.md

§ Performance.

Instance Mode for Multiple Sketches

Global mode pollutes

window

. For production, use instance mode:

const sketch = (p) => {
  p.setup = function() {
    p.createCanvas(800, 800);
  };
  p.draw = function() {
    p.background(0);
    p.ellipse(p.mouseX, p.mouseY, 50);
  };
};
new p5(sketch, 'canvas-container');

Required when embedding multiple sketches on one page or integrating with frameworks.

WebGL Mode Gotchas

```
createCanvas(w, h, WEBGL)
```
— origin is center, not top-left
Y-axis is inverted (positive Y goes up in WEBGL, down in P2D)
```
translate(-width/2, -height/2)
```
to get P2D-like coordinates
```
push()
```
/
```
pop()
```
around every transform — matrix stack overflows silently
```
texture()
```
before
```
rect()
```
/
```
plane()
```
— not after
Custom shaders:
```
createShader(vert, frag)
```
— test on multiple browsers

Export — Key Bindings Convention

Every sketch should include these in

keyPressed()

function keyPressed() {
  if (key === 's' || key === 'S') saveCanvas('output', 'png');
  if (key === 'g' || key === 'G') saveGif('output', 5);
  if (key === 'r' || key === 'R') { randomSeed(millis()); noiseSeed(millis()); }
  if (key === ' ') CONFIG.paused = !CONFIG.paused;
}

Headless Video Export — Use noLoop()

For headless rendering via Puppeteer, the sketch must use

noLoop()

in setup. Without it, p5's draw loop runs freely while screenshots are slow — the sketch races ahead and you get skipped/duplicate frames.

function setup() {
  createCanvas(1920, 1080);
  pixelDensity(1);
  noLoop();                    // capture script controls frame advance
  window._p5Ready = true;      // signal readiness to capture script
}

The bundled

scripts/export-frames.js

detects

_p5Ready

and calls

redraw()

once per capture for exact 1:1 frame correspondence. See

references/export-pipeline.md

§ Deterministic Capture.

For multi-scene videos, use the per-clip architecture: one HTML per scene, render independently, stitch with

ffmpeg -f concat

. See

references/export-pipeline.md

§ Per-Clip Architecture.

Agent Workflow

When building p5.js sketches:

Write the HTML file — single self-contained file, all code inline
Open in browser —
```
open sketch.html
```
(macOS) or
```
xdg-open sketch.html
```
(Linux)
Local assets (fonts, images) require a server:
```
python3 -m http.server 8080
```
in the project directory, then open
```
http://localhost:8080/sketch.html
```
Export PNG/GIF — add
```
keyPressed()
```
shortcuts as shown above, tell the user which key to press

Headless export —

node scripts/export-frames.js sketch.html --frames 300

for automated frame capture (sketch must use

noLoop()

_p5Ready

)

MP4 rendering —

bash scripts/render.sh sketch.html output.mp4 --duration 30

Iterative refinement — edit the HTML file, user refreshes browser to see changes
Load references on demand — use
```
skill_view(name="p5js", file_path="references/...")
```
to load specific reference files as needed during implementation

Performance Targets

Metric	Target
Frame rate (interactive)	60fps sustained
Frame rate (animated export)	30fps minimum
Particle count (P2D shapes)	5,000-10,000 at 60fps
Particle count (pixel buffer)	50,000-100,000 at 60fps
Canvas resolution	Up to 3840x2160 (export), 1920x1080 (interactive)
File size (HTML)	< 100KB (excluding CDN libraries)
Load time	< 2s to first frame

References

File	Contents
`references/core-api.md`	Canvas setup, coordinate system, draw loop, `push()` / `pop()` , offscreen buffers, composition patterns, `pixelDensity()` , responsive design
`references/shapes-and-geometry.md`	2D primitives, `beginShape()` / `endShape()` , Bezier/Catmull-Rom curves, `vertex()` systems, custom shapes, `p5.Vector` , signed distance fields, SVG path conversion
`references/visual-effects.md`	Noise (Perlin, fractal, domain warp, curl), flow fields, particle systems (physics, flocking, trails), pixel manipulation, texture generation (stipple, hatch, halftone), feedback loops, reaction-diffusion
`references/animation.md`	Frame-based animation, easing functions, `lerp()` / `map()` , spring physics, state machines, timeline sequencing, `millis()` -based timing, transition patterns
`references/typography.md`	`text()` , `loadFont()` , `textToPoints()` , kinetic typography, text masks, font metrics, responsive text sizing
`references/color-systems.md`	`colorMode()` , HSB/HSL/RGB, `lerpColor()` , `paletteLerp()` , procedural palettes, color harmony, `blendMode()` , gradient rendering, curated palette library
`references/webgl-and-3d.md`	WEBGL renderer, 3D primitives, camera, lighting, materials, custom geometry, GLSL shaders ( `createShader()` , `createFilterShader()` ), framebuffers, post-processing
`references/interaction.md`	Mouse events, keyboard state, touch input, DOM elements, `createSlider()` / `createButton()` , audio input (p5.sound FFT/amplitude), scroll-driven animation, responsive events
`references/export-pipeline.md`	`saveCanvas()` , `saveGif()` , `saveFrames()` , deterministic headless capture, ffmpeg frame-to-video, CCapture.js, SVG export, per-clip architecture, platform export (fxhash), video gotchas
`references/troubleshooting.md`	Performance profiling, per-pixel budgets, common mistakes, browser compatibility, WebGL debugging, font loading issues, pixel density traps, memory leaks, CORS
`templates/viewer.html`	Interactive viewer template: seed navigation (prev/next/random/jump), parameter sliders, download PNG, responsive canvas. Start from this for explorable generative art

Creative Divergence (use only when user requests experimental/creative/unique output)

If the user asks for creative, experimental, surprising, or unconventional output, select the strategy that best fits and reason through its steps BEFORE generating code.

Conceptual Blending — when the user names two things to combine or wants hybrid aesthetics
SCAMPER — when the user wants a twist on a known generative art pattern
Distance Association — when the user gives a single concept and wants exploration ("make something about time")

Conceptual Blending

Name two distinct visual systems (e.g., particle physics + handwriting)
Map correspondences (particles = ink drops, forces = pen pressure, fields = letterforms)
Blend selectively — keep mappings that produce interesting emergent visuals
Code the blend as a unified system, not two systems side-by-side

SCAMPER Transformation

Take a known generative pattern (flow field, particle system, L-system, cellular automata) and systematically transform it:

Substitute: replace circles with text characters, lines with gradients
Combine: merge two patterns (flow field + voronoi)
Adapt: apply a 2D pattern to a 3D projection
Modify: exaggerate scale, warp the coordinate space
Purpose: use a physics sim for typography, a sorting algorithm for color
Eliminate: remove the grid, remove color, remove symmetry
Reverse: run the simulation backward, invert the parameter space

Distance Association

Anchor on the user's concept (e.g., "loneliness")
Generate associations at three distances:
- Close (obvious): empty room, single figure, silence
- Medium (interesting): one fish in a school swimming the wrong way, a phone with no notifications, the gap between subway cars
- Far (abstract): prime numbers, asymptotic curves, the color of 3am
Develop the medium-distance associations — they're specific enough to visualize but unexpected enough to be interesting

License

MIT

Quick Start

Install Command

mkdir -p ~/.hermes/skills/creative/p5js && curl -o ~/.hermes/skills/creative/p5js/SKILL.md https://raw.githubusercontent.com/NousResearch/hermes-agent/main/skills/creative/p5js/SKILL.md