A Shader, Explained

Reaction-Diffusion

Two imaginary chemicals, feeding and starving each other into Turing patterns.

Nothing here is drawn. Two imaginary chemicals — call them A and B — sit on a grid, one number each per pixel. Every frame they follow a three-line rule, and out of that rule alone come spots, stripes, and branching coral. These are Turing patterns. Drag across the panel on the left to squirt more B into the soup and watch it bloom.

The whole simulation lives in one feedback buffer that reads its own previous frame — the grid’s memory. Each cell looks at itself and its eight neighbours and works out what it becomes next.

Pass · Buffer A — the chemistry

Three things happen to every cell, every frame: the chemicals diffuse (smear into their neighbours), they react (B eats A to make more B), and the world is topped up — A is fed in, B is killed off. Two dials decide which world you live in: the feed rate feed 0.055 and the kill rate kill 0.062. Tiny nudges flip the pattern between dots, worms, and mitosis-like splitting.

▶ How a cell smears into its neighbours → technical explainer

Diffusion needs to know how a cell compares to those around it. The Laplacian is a weighted sum of the 3×3 block of neighbours: the centre cell counts as −1, its edge neighbours +0.2 each, the diagonals +0.05. Where a cell sits in a dip the total is positive (chemical flows in); on a bump it’s negative (flows out).

if (i==0||j==0) factor = 0.2;   // edge neighbours
if (i==0&&j==0) factor = -1.;   // the cell itself
sum += texture(iChannel0, xy+offset).ab * factor;

A spreads fast (A spread 1.00); B spreads slowly (B spread 0.25). That difference in pace is the engine of the whole pattern.

▶ The reaction: A + 2B → 3B

The reaction itself is the term a*b*b — wherever A and B meet, a little A is converted into B. A is then replenished toward 1, and B decays away. Balance the two and the front neither floods nor dies, but settles into a standing pattern.

a + dA*lapAB.x - a*b*b + feed*(1.0 - a),   // A
b + dB*lapAB.y + a*b*b - (k + feed)*b      // B

▶ The slow swirl → technical explainer

Before reading itself back, the buffer rotates its sampling coordinates by a thousandth of a radian. Over many frames that imperceptible turn drags the whole pattern into a lazy spiral — a free flourish that costs one mat2 multiply.

Pass · Image — the developer

The buffer’s chemical A is a soft 0 → 1 gradient. The display pass does one thing: a single smoothstep snaps that haze into crisp black and white, like developing a photograph.

▶ Reading just the A channel

vec3 col = vec3(smoothstep(0.4, 0.6, texture(iChannel0, uv).a));

Everything below 0.4 goes black, everything above 0.6 white, with a thin antialiased seam between. Try wiring the .b channel here instead and you’d see B’s mirror image.