p5js

Write a single HTML file loading p5.js from a CDN, define a seeded setup() with randomSeed() and noiseSeed(), and render procedural visuals in draw() using noise fields, particles, and HSB color palettes. Export stills with saveCanvas() or animations with saveGif().

Capture frames headlessly with Puppeteer using noLoop() and redraw() for deterministic frame control, then encode the PNG sequence with ffmpeg using libx264. The render.sh script automates this full pipeline from HTML to MP4.

Use p5.js 1.11.3 by default for stability and broad library compatibility including p5.js-svg. Choose 2.x only when you need async setup(), OKLCH color modes, splineVertex(), shader .modify(), 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 particle rendering 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, filters, and WebGL are unavailable.

Call randomSeed(seed) and noiseSeed(seed) in setup() so every random() and noise() call becomes deterministic. Never use Math.random() for visual elements, and for platforms like fxhash replace p5's PRNG with the platform's deterministic random function.