A WebGPU Drawing Garden Where Agents Rewrite Your Strokes

Nine numbers in {-1, 0, 1} arranged in a 3×3 matrix decide an entire vibe’s personality. That constraint is what kept me up: proving simplicity can be expressive, that you don’t need a behaviour function per preset. A WebGPU drawing toy where you stroke a colour, agents spawn along it, and the garden slowly overwrites the patch you laid down. One static HTML file, six compute stages, none of them skippable.

Why physarum needed a knob

Physarum-style agent sims are everywhere and most of them stop being interesting after thirty seconds, because they converge to the same family of branching shapes no matter what you feed them. Seeding the initial condition isn’t enough; the input has to keep being a force inside the loop, otherwise you’re just watching the attractor settle.

My second self-imposed constraint was that one engine had to produce six visibly different presets without forking. The first prototype had a switch (preset) with one behaviour function per vibe and it was already painful at vibe two. I needed the personality to live in data, not code.

The reaction matrix

Each vibe is a 3×3 table of colour-to-colour affinities. When an agent of colour i looks at the trail in front of it, it weights the three channels of that sample by row i of the matrix, then uses the sign to pick left, right, or straight. That’s it. The whole behaviour rule.

Three examples of what nine numbers can do:

• Aurora Mycelium: cyclic, each colour chases the next. Agents wind into ribbons.
• Velvet Observatory: every off-diagonal entry negative. Colours repel into separate islands.
• Paper Lantern Fog: matrix filled with ones. Colours collapse into one cooperative blob.

Adding a tenth number to the matrix would tax every existing vibe. Tuning the nine I have is a text edit. Six presets in, I haven’t extended it.

The compute work, broken into small jobs

Six stages, ten WGSL files, each one short enough that I can hold it in my head when something breaks:

1. Agent step: sample the trail at a sensor offset, pick a turn, move, deposit colour. ~300 lines, the longest one.
2. Diffusion: blur and decay so old marks soften. The boring one, and the one you can’t skip: without it, strokes stay forever and the garden collapses into noise.
3. Brush: write user strokes into both the trail texture and a separate “source” texture the agents can read.
4. Eraser: two variants: one clears a region of the trail, the other kills agents in a radius.
5. Agent generation: spawn along strokes, resize the buffer when the cap changes, compact after erasure so dead slots don’t waste GPU time.
6. Render: read the trail, apply palette and grain.

The bind-group setup overhead from running more pipelines was lost in the noise next to the simulation cost. The win was that when the eraser shader started killing the wrong agents, I opened one file and reasoned about it without touching anything else.

Smaller calls

• Adaptive cap, circular buffer. If FPS drops, the cap shrinks; if there’s headroom, it grows. When the cap is hit, new agents overwrite older ones. The decay you see, a stroke vanishing thirty seconds after you drew it, isn’t an explicit eraser, it’s the buffer wrapping around.
• URL is the share format. The chosen vibe is in the query string. The “send your friend this preset” link is just a URL with ?vibe=tidepool-lantern on it. The parser is tolerant about accents and casing because people retype these.
• One HTML file. All CSS and JS inline. The piano samples sit beside it. Self-contained enough to email or drop on a USB stick.

What I’d change

• The intro animation (agents fly in to spell the title, then transition to steady state) couples three shaders through a single progress: 0 → 1 value. It’s the bit I’d least want to refactor today. Next time I’d model the intro as its own dispatch with its own buffer and hand off cleanly.
• Mobile works, but the toolbar fights the canvas for screen and the agent cap has to shrink hard to keep frame time down. A proper fix means rethinking the toolbar and exposing the cap-vs-resolution tradeoff to the user.
• The simulation has invariants that proptest would falsify in minutes: agent count under the cap, every stroke produces a positive-coloured deposit on the next frame, and the eraser doesn’t leak agents past its radius. Snapshot tests aren’t the right tool here.