Reaction Diffusion Plate
A live Gray-Scott solver as a background plate — coral, mitosis and maze are the same two equations at different feed and kill rates.
Canvas 2D0 deps1 file · 10 KB TSXreduced-motion aware
Props
"use client";
import { useEffect, useRef } from "react";
const PRESETS: Record<string, { f: number; k: number }> = {
coral: { f: 0.0545, k: 0.062 },
mitosis: { f: 0.0367, k: 0.0649 },
maze: { f: 0.029, k: 0.057 },
};
function hexToRgb(hex: string): [number, number, number] {
const h = hex.replace("#", "");
const n = parseInt(
h.length === 3 ? h.split("").map((c) => c + c).join("") : h,
16
);
return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
}
// ---------------------------------------------------------------
// Full source available with a viberdy Pro subscription.
// https://viberdy.dev/pricing
// ---------------------------------------------------------------
}Details
About this background
Most organic-looking backgrounds are noise dressed up as biology. This one is the biology: a Gray-Scott reaction-diffusion system integrated on every frame, where two chemicals diffuse at different rates and react as A plus two B becomes three B, with a feed term adding the first everywhere and a kill term removing the second. Coral, mitosis and maze are not three effects — they are the same two lines of arithmetic at different feed and kill rates, which is the whole appeal of the model. Three details decide whether it works. The buffers must ping-pong, and not for speed: writing each new value back into the array still being read means a cell's neighbours have already advanced by the time the loop arrives, so the update becomes order-dependent and the pattern shears diagonally in the direction of iteration — it reads as a smear bug and is actually a mathematical one. The timestep is a ceiling rather than a dial, because one is the largest step this kernel is stable at and raising it to speed things up sends the values to NaN within a second, leaving the plate permanently black; more steps per frame is the correct lever. And the Laplacian needs its two-tenths orthogonal and one-twentieth diagonal weights, since a flat kernel is not isotropic at this resolution and the patterns come out visibly square. The seeding is hashed rather than random so the plate is the same picture on every mount, and the solver runs on a low-resolution buffer that CSS stretches, which is both cheaper and softer than solving at device resolution.
Curator’s note
Write the new value back into the array you are reading and the pattern shears diagonally — it looks like a rendering smear, but it is the update order leaking into the mathematics.
