Reaction-Diffusion

Gray-Scott model — two chemicals diffuse and react, producing organic patterns

From just two chemicals diffusing at different rates and reacting with each other, nature produces coral formations, leopard spots, and sand dollar patterns. This simulation lets you explore that space — click to seed growth, adjust feed and kill rates to shift between mitosis, spirals, waves, and more.

The Gray-Scott Equations

Reaction-diffusion simulates two chemicals interacting across space. This implementation uses the Gray-Scott model, where chemical U feeds chemical V, and V is slowly killed off:

float uvv = u * v * v;
float du = u_du * laplacianU - uvv + u_feed * (1.0 - u);
float dv = u_dv * laplacianV + uvv - (u_feed + u_kill) * v;

Chemical U is the substrate — it exists everywhere at concentration ~1.0. When it encounters V, it converts: U + 2V → 3V. This is why the equation has u * v * v — the reaction rate depends on the product of all concentrations. The first term spreads U through space, the -uvv term removes U to create V, and feed * (1.0 - u) replenishes U toward full concentration.

Chemical V is the catalyst — without V, nothing happens. V spreads through diffusion, converts U into more of itself, and is gradually killed off by the (feed + kill) * v term. The balance between feed and kill determines whether V grows, stabilizes, or dies.

The Laplacian Stencil

Diffusion spreads concentrations across the grid. The Laplacian measures how different a cell's value is from its neighbors:

float laplacianU = 0.0;
laplacianU += texture2D(u_state, v_texCoord + vec2(-pixel.x, -pixel.y)).r * 0.05;
laplacianU += texture2D(u_state, v_texCoord + vec2(0.0, -pixel.y)).r * 0.2;
laplacianU += texture2D(u_state, v_texCoord + vec2(pixel.x, -pixel.y)).r * 0.05;
laplacianU += texture2D(u_state, v_texCoord + vec2(-pixel.x, 0.0)).r * 0.2;
laplacianU += texture2D(u_state, v_texCoord + vec2(pixel.x, 0.0)).r * 0.2;
laplacianU += texture2D(u_state, v_texCoord + vec2(-pixel.x, pixel.y)).r * 0.05;
laplacianU += texture2D(u_state, v_texCoord + vec2(0.0, pixel.y)).r * 0.2;
laplacianU += texture2D(u_state, v_texCoord + vec2(pixel.x, pixel.y)).r * 0.05;
laplacianU -= u;

This implements a 3x3 convolution kernel with corner weights (0.05), edge weights (0.2), and subtracts the center. The weights sum to zero — diffusion moves concentration from high to low. Corners contribute less because diagonal neighbors are further away. The result tells each cell whether its neighbors have more or less chemical than it does, driving flow toward equilibrium.

Feed and Kill Parameters

The two sliders control the behavior space:

let feedRate = 0.037;
let killRate = 0.06;

Feed adds U back into the system. High feed rates keep U concentrated, supporting sustained growth. Kill removes V. High kill rates suppress V, causing patterns to shrink or fragment.

The presets demonstrate distinct regions of behavior space:

• Mitosis (feed=0.037, kill=0.06) — cells divide and multiply, like bacteria
• Coral (feed=0.03, kill=0.057) — branching growth like coral reefs
• Spirals (feed=0.025, kill=0.06) — rotating wave patterns
• Spots (feed=0.039, kill=0.058) — regular arrays of dots
• Waves (feed=0.026, kill=0.055) — traveling wavefronts

Small parameter changes produce qualitatively different patterns. The space between mitosis and spirals is narrow — tiny adjustments flip the system from one regime to another.

Diffusion Rates

U and V diffuse at different speeds:

const du = 0.2097;  // U diffusion rate
const dv = 0.105;   // V diffusion rate

U diffuses twice as fast as V. This asymmetry is essential — if both chemicals spread at the same rate, patterns wouldn't form. The slower V creates stable chemical "islands" that the faster U can flow into, sustaining the reaction. The specific values (0.2097 and 0.105) are tuned for visual stability and interesting pattern diversity.

WebGL Ping-Pong

Each simulation step reads the current state and writes a new state. WebGL can't read and write the same texture simultaneously, so the implementation uses two framebuffers:

const buffers = [createFBO(), createFBO()];
let currentBuffer = 0;

// In simulation:
const read = buffers[currentBuffer];
const write = buffers[1 - currentBuffer];
// ... draw to write, then swap
currentBuffer = 1 - currentBuffer;

Frame 0 reads from buffer A and writes to buffer B. Frame 1 reads from B and writes to A. The buffers trade roles each frame — one acts as source, one acts as destination. This ping-pong pattern is standard in GPU simulation.

Seeding

Patterns start from initial concentrations. The init shader places several small circles of V in a field of U:

const seeds = [
  [0.5, 0.5],  // center
  [0.3, 0.6],
  [0.7, 0.4],
  [0.2, 0.3]
];
const radii = [0.08, 0.05, 0.05, 0.04];

for (int i = 0; i < 4; i++) {
  float dist = distance(v_texCoord, u_seeds[i]);
  if (dist < u_radii[i]) {
    u = 0.5;
    v = 1.0;
  }
}

Clicking the canvas adds new seeds — the same technique, but in a shader pass that reads the existing state and writes V in a circle around the click location. Multiple seeds create interference patterns as they grow toward each other.

What This Reveals

Reaction-diffusion shows how complex patterns emerge from local rules. There's no global plan telling the coral where to branch or the spirals where to rotate. Each cell only knows its immediate neighbors. The U and V concentrations create a self-sustaining feedback loop: V converts U into more V, U feeds the system, local diffusion spreads both. The pattern is the shape of that feedback over time.

The parameter space is continuous but clusters into distinct pattern families. Nearby (feed, kill) pairs produce similar morphologies; cross certain thresholds and fundamentally different structures appear. This is emergent diversity from fixed physics — the same equations, different constants, wildly different results.