🎨 2D Reaction-Diffusion (Gray-Scott, plain canvas)

About this simulation

This is the same Gray-Scott reaction-diffusion system as the 3D version, but solved directly on a plain 2D canvas: every animation frame runs real numerical steps of the coupled PDE over a grid of cells on the CPU, with no WebGL shader involved. Two virtual chemicals, U and V, diffuse and react, and from that simple local rule spots, stripes, mazes and self-replicating blobs emerge on their own.

How it works

• The canvas is backed by a 128×128 numerical grid, each cell holding a concentration of chemical U and chemical V.
• Every step, a real discrete 9-point weighted Laplacian diffuses both chemicals to their neighbours, with U spreading twice as fast as V.
• The reaction U + 2V → 3V converts U into more V wherever V is already present; the feed rate replenishes U and the kill rate removes V.
• The grid wraps at its edges (periodic boundary), so patterns can grow continuously across them.

Key equations

∂U/∂t = Du·∇²U − U·V² + f·(1 − U) and ∂V/∂t = Dv·∇²V + U·V² − (f + k)·V — U and V are the chemical concentrations, ∇² is the discrete Laplacian, Du = 1.0 and Dv = 0.5 are the diffusion rates, f is the feed rate and k is the kill rate.

Controls

• Feed rate (f) — how fast chemical U is replenished; shifts which family of patterns forms.
• Kill rate (k) — how fast chemical V is removed; tunes spots versus stripes versus mazes.
• Speed — how many PDE steps run per animation frame.
• Presets — one-click f/k combinations: Spots, Stripes, Mitosis, Maze and Coral.
• Reset grid reseeds from the centre, Add seed drops a fresh blob, and clicking or dragging on the canvas seeds chemical V by hand.

Did you know?

Because this version steps the real PDE in plain JavaScript instead of a GPU shader, you can watch each generation's math directly in the source — the exact same nine-point stencil used by the 3D shader version, just run one cell at a time.