Procedural Canvas Animation

Procedural Canvas animation

Use this skill when a 2D bitmap canvas is the appropriate drawing surface for procedural motion. It covers authored particles, vector/noise fields, trails, weather, textures, generative geometry, and lightweight simulations for rendered media.

It does not cover Three.js scene graphs, WebGL/WebGPU shaders, D3 data semantics, game-engine architecture, or a generic frontend Canvas tutorial.

Evidence stance

• Documented fact: behavior from WHATWG, ECMAScript, p5.js, W3C, or cited API documentation.
• Production heuristic: a practical design or optimization choice to test in the target runtime.
• Empirical observation: a measured result from the actual animation, browser, frame output, or encoded delivery.

Facts were verified 2026-07-12. Canvas, browser, p5.js, OffscreenCanvas, and encoding behavior can change; pin versions and record the render environment.

Lock the canvas contract

Define:

• backing width/height, CSS/display size, aspect variants, fps, frame range, and alpha requirement;
• coordinate system and projection from normalized simulation space;
• seed, algorithm, initialization, parameters, and state-update order;
• stateless, replay, or checkpoint strategy;
• color space, compositing modes, background, and premultiplication assumptions;
• source images/fonts and CORS/offline policy;
• target runtime/browser, pixel density, output format, and encoder;
• reduced-motion/static variant and flash policy;
• performance budget and representative stress frames;
• provenance and rights for all source ingredients.

Understand the bitmap

Documented facts: Canvas has an intrinsic resolution separate from CSS sizing. Its default bitmap is 300 by 150. Setting its width or height clears the bitmap and resets context state. Canvas 2D begins with source-over and globalAlpha = 1 and uses premultiplied alpha. A context requested with {alpha:false} is opaque and unsuitable for transparent delivery.

Set backing dimensions explicitly. Do not stretch a low-resolution backing bitmap with CSS and call it high resolution. For fixed video output, choose exact pixel dimensions and an explicit density; p5.js pixelDensity(1) is often appropriate for predictable output.

Changing size is a reconstruction event: rebuild transforms, state, buffers, and layout rather than assuming pixels or context settings survive.

Use an absolute-frame interface

Design around:

renderFrame(frameIndex, variant, accessibilityMode)

with composition time:

$$ t = \frac{frameIndex}{fps} $$

Keep requestAnimationFrame() outside production state. Documented fact: rAF is one-shot, follows browser display scheduling, may pause in hidden contexts, and does not guarantee 60 fps. p5.js frameRate() requests a target but does not define offline media time.

Do not use Date.now(), performance.now(), millis(), deltaTime, or mutable frameCount as final-render truth.

Choose a determinism strategy

Stateless

Calculate every object directly from (seed, objectId, frameIndex, channel). Best for periodic fields, analytic particles, procedural lines, and arbitrary-frame access.

Fixed-step replay

Reset to deterministic initial state and advance exactly $\Delta t = 1/fps$ in a documented order until the requested frame. Suitable for stateful snow, flocking, or cellular systems when duration is manageable.

Checkpoints

Persist deterministic state at fixed frames and replay from the nearest earlier checkpoint. Useful for long stateful simulations. Version checkpoint schema and reject it when parameters/runtime change.

History-dependent persistent-buffer trails are not random-access. Replay history, store checkpoints, or draw the previous $K$ analytic positions into each frame.

Seed randomness explicitly

Documented fact: ECMAScript Math.random() has an implementation-defined algorithm and no seed control. p5.js randomSeed() and noiseSeed() can repeat their respective sequences, but that does not guarantee pixel identity across p5/browser versions.

Record seed and generator implementation. Prefer keyed random values where arbitrary access matters, so rendering frame 200 does not depend on how many random values earlier frames consumed.

Never reseed every frame unless the intended algorithm is explicitly frame-keyed; that often freezes or correlates motion.

Particles, fields, weather, and trails

For each system define:

• spawn domain and lifetime;
• initial position/velocity/shape/color distributions;
• force/field equations and units;
• boundary behavior: wrap, reflect, kill, respawn, or clamp;
• update ordering and collision policy;
• mapping from normalized simulation to each canvas;
• trail/history policy;
• outlier and NaN handling.

Keep simulation state independent of pixels. Aspect variants should share the event while changing framing, count, density, line width, or field bias intentionally.

For weather, distinguish visual plausibility from physical simulation. Do not claim meteorological accuracy unless the model and inputs support it.

Compositing and alpha

Set globalCompositeOperation deliberately and restore context state. Test source-over, additive/lighten effects, masks, and erasure over black, white, and checkerboard backgrounds.

Transparent delivery requirements:

• context alpha enabled;
• no accidental background fill;
• output format/codec preserves alpha;
• corner and edge pixels inspected;
• premultiplied/straight-alpha conversion and halos checked in the receiving compositor.

JPEG cannot preserve alpha. WebCodecs encoder alpha behavior is configuration- and codec-dependent; verify capability and output instead of assuming support.

External assets and origin cleanliness

Documented fact: drawing cross-origin media without valid CORS can make a canvas non-origin-clean, causing pixel reads and serialization to throw SecurityError.

Freeze production assets locally where possible. Record URLs, licenses, hashes, CORS policy, and failure behavior. Do not discover a tainted canvas after a long render.

p5.js production pattern

For deterministic offline work:

function setup() {
  pixelDensity(1);
  createCanvas(outputWidth, outputHeight, P2D);
  noLoop();
  initialize(seed);
}

function renderFrame(frame) {
  resetOrRestore(frame);
  advanceTo(frame, 1 / fps);
  drawCurrentState();
}

This is an architectural example. advanceTo() must not advance once too many; define whether frame zero represents initial state before any step.

Avoid allowing window size, input events, or live device density to alter final state. resizeCanvas() clears output and typically triggers redraw, so rebuild the declared variant explicitly.