Task 3 of 4

Feed It Back: 100 Steps

One step is chemistry; a hundred steps is morphogenesis. The kernels stay on the GPU — the loop lives in JavaScript: call both step kernels, take their outputs, feed them back in as next step's inputs. This is the same feedback move as the cellular automata in 3.3, just with two grids in flight instead of one.

The trap: both kernels must read the same snapshot. If you overwrite u before calling stepV, chemical V reacts with food from the future — the simulation drifts and the tests will know. Hold both new grids, then swap. Graphics folk call this ping-pong buffering.

Goal: run 100 Gray–Scott steps from the seeded grids seedU / seedV, feeding each step's outputs into the next — both kernels always reading the same snapshot.

Requirements

Loop exactly STEPS (100) times in plain JavaScript
Call await stepU(u, v) and await stepV(u, v) with the same u and v
Only after both calls, replace u and v with the new grids

Hint 1 — why the starter is wrong

The starter does

u = await stepU(u, v);
v = await stepV(u, v);

— by the second call, u is already next step's grid. Stash both results in temporaries before assigning either.

Hint 2 — the loop body

const nextU = await stepU(u, v);
const nextV = await stepV(u, v);
u = nextU;
v = nextV;

Four lines, inside for (let i = 0; i < STEPS; i++).

Same idea elsewhere

This snapshot discipline is double buffering, and GPUs institutionalize it: a WebGPU or Metal simulation binds texture A for reading and texture B for writing, then swaps the bindings each frame — you never write the buffer you're reading. CUDA codes do the same by swapping two device pointers between kernel launches.

All tasks in Reaction–Diffusion

This page is an interactive exercise — the editor, the GPU runner and your saved progress need JavaScript. The text above is the full brief.