Algorithmic and generative art with Canvas 2D - particles, flow fields, noise, fractals, L-systems.

Version sensitive. Every API name, SDK gate and browser support claim below was verified on 2026 09 08 against primary sources. What against, and when, is in jutsu/VERSIONS.md . If that date is old, re verify before acting on a version number. Canvas Generative Algorithmic and generative art with Canvas 2D. Concise rules here. Deep dive and reference implementations in references/ . Canvas 2D Setup DPR Aware Sizing Every canvas must be sharp on Retina/HiDPI displays. Set the buffer size to the physical pixel size, scale down with CSS. Resize Handler Animation Loop (RAF) Noise Type Characteristics Best For Perlin Smooth, grid aligned bias, cheaper Terrain, clouds, gentle organic textures Simplex No grid artifacts, better gradients, slightly costlier Flow fields, organic motion, seamless tiling Worley (Cellular) Distance to nearest point, cell like Voronoi patterns, caustics, cracks, cell textures Usage rules: Always scale input coordinates (divide by a noiseScale factor) raw pixel coords produce visual noise Use octaves (fractal Brownian motion) for detail: sum multiple noise calls at increasing frequency and decreasing amplitude Seed your noise for reproducibility Particle Systems Pool Pattern (No GC Pressure) Pre allocate a fixed array. Never new or splice at runtime. Flow Fields Grid of angle vectors that steer particles. The classic generative recipe. 1. Build grid: Divide canvas into cells, compute an angle per cell (from noise) 2. Lookup: Particle position maps to grid cell, retrieve angle 3. Steer: Apply angle as velocity, accumulate over frames Fractals & L Systems An L system encodes recursive structure as string rewriting + turtle graphics. Component Role Axiom Starting string (e.g. "F" ) Rules Production rules (e.g. "F" "F[+F]F[ F]F" ) Angle Turtle turn angle per + / Iterations How many times to apply rules Double Buffer Pattern Render to an offscreen canvas, then blit to the visible one. Eliminates flicker and enables trail effects. Do Not 1. Never clearRect every frame for trail effects Clearing destroys the trail. Use a semi transparent fill instead. 2. Never getImageData in the animation loop getImageData reads back from GPU extremely slow. Avoid unless absolutely required (e.g. one time color sampling). 3. Always respect DPR for sharpness A canvas without DPR scaling looks blurry on Retina displays. See setup section above. 4. Never allocate in the hot loop No new , no object spread, no array creation inside update() or render() . Pre allocate everything. Quick Reference: Loading Sub skills Need Load Noise implementations, particle pool, flow field, L system, attractors references/algorithms.md Timing and easing for animated transitions ../motion principles/SKILL.md 3D generative (shaders, GPU particles) ../threejs r3f/SKILL.md

canvas-generative