p5js

Define a creative concept first, then write a single HTML file with p5.js from CDN, using randomSeed() and noiseSeed() for reproducibility. Structure code with setup() and draw() functions, use HSB color mode, and layer offscreen buffers with createGraphics() for depth.

Capture frames headlessly with Puppeteer using noLoop() and window._p5Ready for deterministic frame control, then encode with ffmpeg using libx264. The render.sh script automates the full HTML-to-MP4 pipeline.

Use p5.js 1.11.3 by default for stability and broad library compatibility. Choose 2.x only when you need async setup(), OKLCH color modes, splineVertex(), shader .modify() API, or the p5.brush natural media library.

The Friendly Error System adds up to 10x overhead, so set p5.disableFriendlyErrors = true before setup(). Also call pixelDensity(1), use Math.* functions instead of p5 wrappers in hot loops, and batch particles with beginShape(POINTS) or pixel buffers.

Yes, using the p5.js-svg library with createCanvas(w, h, SVG) and save('output.svg'). It requires p5.js 1.x and only supports vector operations, so pixel manipulation, blend modes, and filters are unavailable.

Call randomSeed(seed) and noiseSeed(seed) in setup() so all random() and noise() calls become deterministic. Never use Math.random() for visual elements, and expose the seed as a configurable parameter for variation exploration.