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 as setup, draw loop, helper classes, and event handlers, then export with saveCanvas or saveGif.

Capture frames headlessly with Puppeteer using the export-frames.js script, then encode with ffmpeg into H.264 MP4. The sketch must call noLoop() in setup and set window._p5Ready so each redraw corresponds to exactly one captured frame.

p5.js 1.11.3 is the default with the broadest library compatibility and stable documentation. Use p5.js 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) renders vector output saved via save(). It requires p5.js 1.x and does not support pixel operations, blend modes, filters, or WebGL, making it suited for line art and geometric patterns.

Call randomSeed(seed) and noiseSeed(seed) in setup so all random() and noise() calls become deterministic. Never use Math.random() for visual content. For platforms like fxhash, replace p5's PRNG with the platform's deterministic random function.