Generative Canvas

A seed goes in, a plate comes out

There is no image file anywhere in this document. The plate above is computed from a seed every time it is asked for, and it has never been drawn before — including the one you are looking at now, which was drawn when this page finished loading. Type a seed in the field and the picture changes; press New seed and it changes again.

Three algorithms are implemented rather than sampled. A flow field integrates ten thousand strokes through a curl-noise vector field. Truchet is a grid of quarter-arc tiles threaded by a random walk into long unbroken curves. Subdivide recursively splits the frame and bisects every leaf. They look nothing alike, which is the argument: a generative page is not one effect with different colours.

Technique

Engine

Seeded 32-bit PRNG (mulberry32) — the same seed always yields the same plate, on any machine, in any browser

Flow field

Gradient of a four-term scalar noise, taken as ∇ψ and rotated, so the field is divergence-free and strokes never pile into sinks

Truchet

Tile-level random walk; the walk sets each tile's orientation and keeps the exit side, so curves are continuous across tile boundaries

Subdivide

Recursive split with a depth cap, each leaf bisected on a jittered ratio; stops when the leaf is smaller than 1.5% of the short edge

Canvas

Canvas2D at the device pixel ratio, capped at 2, sized to the shortest edge of the space the dock leaves

Network

Zero requests. One file, system type stacks, no fonts, no images, no CDN

What it does

The seed field takes any text. The three algorithm chips and the four palette chips both change the rendered pixels, not a counter: the palette is a four-stop ramp read out of the house tokens and mixed in the drawing code, so Cyan, Ember and Bone are three different pictures of the same seed. Export PNG writes the plate at its own resolution with a toDataURL — no server, no upload.

Live demo

Press R for a new seed, 1–3 for an algorithm, Q–U for a palette, S to export, and H to fold the dock away. The plate is on screen with the controls at every width from 320 px up, because a generative page where you cannot see the generation is a settings dialog.

What it is good for

Covers, posters, album and product artwork, placeholder imagery that is actually distinct per record or per product, and any gallery where "generated" needs to survive a client asking "is that just a filter". A seed is a shareable permalink for a picture, which is worth more than a thousand unique images nobody can find again.

Combines with

Chapter 03's GPU field for a moving version, chapter 24's FLIP to cross-fade between plates as a navigation gesture, a print pipeline that takes the same seed at 300dpi, and a CMS that stores seeds rather than megabytes of files.

Complexity

The three algorithms are about 150 lines between them. The heavy part is not the maths — it is the ramp and the PRNG being honest, so that a seed in an email produces the same plate on someone else's machine.

Performance

A plate is drawn once, on demand, not in a loop. Nothing animates unless you ask it to: with prefers-reduced-motion: reduce the plate is drawn a single time on load and no frame loop is ever started. The readout prints the real draw time in milliseconds for the plate you are looking at, and the plate's pixel dimensions, both measured after the draw rather than estimated before it.