Reaction-Diffusion Art With WebGPU
Turn a two-field Gray–Scott simulation into seeded, fixed-step, art-directed browser texture with a parameter atlas and static fallback.
Reaction-diffusion art becomes a controllable medium when feed, kill, diffusion, timestep, seed, and display mapping are treated as a recipe instead of a mysterious texture generator. This guide builds a deterministic Gray–Scott study in WebGPU and keeps a readable static composition underneath it.
The artistic position centers on the moment equations become art direction: spots become coral, stripes become vascular fields, and instability becomes a deliberate edge rather than a browser crash. The proposed receipt is a parameter atlas, fixed-step loop, seeded initial state, frame budget, export hash, and accessible fallback.
The creative vocabulary connects Gray-Scott model, WebGPU compute shader, generative texture, and simulation art once each while the article stays focused on reproducible control. That vocabulary supports the article's reaction-diffusion art decision without creating a second intent.
- Feed
- React
- Diffuse
- Render
Reaction-diffusion art starts with two fields
The visual behavior comes from concentrations changing through local reaction and spatial diffusion, not from a post-processing filter. The Gray–Scott reaction study documents reaction behavior that became a foundation for the two-species pattern model used in this visual study. The two concentration fields are the artwork's material source; treating the result as a filter hides the mechanism that gives the pattern character. A proposed review of “Reaction-diffusion art starts with two fields” has four inspectable moves.
- Store U and V in explicit texture channels
- Define feed and removal terms
- Use separate diffusion rates
- Clamp or diagnose invalid concentrations
The proposed evidence for reaction-diffusion art starts with two fields is mass ranges and min-max values over a short deterministic run. The reaction-diffusion art starts with two fields receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is copying an image effect without knowing which state creates it. If copying an image effect without knowing which state creates it occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the numeric field must remain finite and inside the recipe's declared range. Promotion under “the numeric field must remain finite and inside the recipe's declared range” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Use fixed simulation time
Animation frames are a display clock; simulation steps need their own bounded clock to reproduce the same recipe on fast and slow screens. The WebGPU specification defines the compute, buffer, texture, and synchronization primitives used by the browser implementation. Fixed simulation time lets the same recipe reach the same state even when display refresh and device speed differ. A proposed review of “Use fixed simulation time” has four inspectable moves.
- Choose a fixed timestep
- Cap catch-up work per frame
- Pause when the page is hidden
- Record total steps independently from elapsed time
The proposed evidence for use fixed simulation time is matching field hashes after the same seed and step count. The use fixed simulation time receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is advancing once per display frame and making hardware part of the artwork. If advancing once per display frame and making hardware part of the artwork occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is identical recipes and step counts must produce matching state within tolerance. Promotion under “identical recipes and step counts must produce matching state within tolerance” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Author a parameter atlas
Feed and removal neighborhoods have recognizable visual character, but useful presets need names, scales, and stable specimens. The SVG specification provides the semantic vector fallback and export surface used alongside the live simulation. A parameter atlas turns feed and removal neighborhoods into a small visual vocabulary of coral, veins, mist, and failure. A proposed review of “Author a parameter atlas” has four inspectable moves.
- Sweep a small rectangular grid
- Keep seed, dimensions, and steps fixed
- Name morphology rather than parameter value
- Mark unstable or empty regions
The proposed evidence for author a parameter atlas is contact-sheet diversity and repeated recipe hashes. The author a parameter atlas receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is choosing one lucky frame from an undocumented slider session. If choosing one lucky frame from an undocumented slider session occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is a preset is publishable only when its recipe reproduces the named morphology. Promotion under “a preset is publishable only when its recipe reproduces the named morphology” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
| Signal | Decision | Evidence |
|---|---|---|
| F .035 · K .060 | Coral | open spots |
| F .050 · K .065 | Veins | branching lanes |
| F .022 · K .051 | Mist | soft turbulence |
Make the Gray–Scott update inspectable
A compact CPU fixture can validate the arithmetic before the parallel implementation turns one sign error into a full-screen mystery. A scalar one-cell update provides a calm place to verify signs and boundaries before thousands of shader invocations repeat them. A proposed review of “Make the Gray–Scott update inspectable” has four inspectable moves.
- Test one cell with known neighbors
- Separate Laplacian and reaction terms
- Assert finite bounded outputs
- Keep the fixture beside shader constants
The proposed evidence for make the gray–scott update inspectable is matching one-step CPU and GPU sample values within float tolerance. The make the gray–scott update inspectable receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is debugging shader visuals without a scalar reference. If debugging shader visuals without a scalar reference occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the kernel ships only after the scalar update and boundary control pass. Promotion under “the kernel ships only after the scalar update and boundary control pass” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Runnable artifact. Save this bounded specimen as reaction-diffusion-webgpu-art.test.mjs and run node --test reaction-diffusion-webgpu-art.test.mjs. Expected result: PASS: chemistry step stays bounded.
import assert from "node:assert/strict";
import test from "node:test";
const step = (u, v, lapU, lapV, f, k, dt) => { const uvv = u*v*v; return [u + (lapU-uvv+f*(1-u))*dt, v + (.5*lapV+uvv-(f+k)*v)*dt]; };
test("keeps a reference cell finite", () => {
const next = step(.8, .2, -.03, .04, .035, .06, .5);
assert.ok(next.every(Number.isFinite));
console.log("PASS: chemistry step stays bounded");
});
Map chemistry into an authored palette
Concentration is source material; luminance, color, edge emphasis, and contrast determine whether it becomes fog, coral, or etched ink. Separating chemistry from palette keeps a color decision from masquerading as a change to the physical recipe. A proposed review of “Map chemistry into an authored palette” has four inspectable moves.
- Separate state from display mapping
- Use perceptual color stops
- Preserve a clear focal hierarchy
- Check text contrast over the composition
The proposed evidence for map chemistry into an authored palette is a palette sheet over identical saved field states. The map chemistry into an authored palette receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is changing physics to fix a color problem. If changing physics to fix a color problem occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is choose the mapping that carries the thesis while the underlying recipe stays fixed. Promotion under “choose the mapping that carries the thesis while the underlying recipe stays fixed” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Budget WebGPU work
A beautiful field that consumes every interaction frame is not a finished browser artwork. Resolution and update rate should yield before page interaction, because a generative field is one participant in the reading experience. A proposed review of “Budget WebGPU work” has four inspectable moves.
- Measure dispatch and presentation separately
- Scale simulation resolution independently
- Coalesce parameter changes
- Provide a still mode
The proposed evidence for budget webgpu work is p95 frame time and input delay across supported devices. The budget webgpu work receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is using average frames per second to hide interaction stalls. If using average frames per second to hide interaction stalls occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is degrade resolution or update rate before the page loses responsive input. Promotion under “degrade resolution or update rate before the page loses responsive input” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
- SeedSeed
Create a deterministic concentration field and boundary rule.
- StepStep
Dispatch fixed-size compute updates through ping-pong textures.
- MapMap
Translate concentration and gradient into an authored palette.
- ExportExport
Freeze recipe, dimensions, step count, and image hash.
Design the non-GPU fallback
The article's meaning should survive unavailable hardware, blocked adapters, reduced motion, printing, and sharing. A static recipe-derived specimen preserves the visual thesis when GPU access, motion, printing, or scripting is unavailable. A proposed review of “Design the non-GPU fallback” has four inspectable moves.
- Render a recipe-derived SVG specimen
- Keep complete explanatory text
- Respect motion preference
- Expose a retry without blocking content
The proposed evidence for design the non-gpu fallback is the same visual lesson at no motion and no GPU. The design the non-gpu fallback receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is replacing the art with an error box or blank canvas. If replacing the art with an error box or blank canvas occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is fallback readers receive the pattern, parameter meaning, and caption without executing compute. Promotion under “fallback readers receive the pattern, parameter meaning, and caption without executing compute” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Publish a portable recipe
The durable creative artifact is a compact state description that can be regenerated at another size. The portable artwork is the seed, coefficients, steps, boundary, palette, and hashes together—not an orphaned screenshot. A proposed review of “Publish a portable recipe” has four inspectable moves.
- Save seed and initial-condition method
- Save coefficients and boundary mode
- Save dimensions, steps, and palette
- Hash state and exported image
The proposed evidence for publish a portable recipe is regenerating the same specimen in a clean browser session. The publish a portable recipe receipt should bind the relevant input and configuration to the observed output, then retain a deliberately rejected control so the check can prove it distinguishes a bad result.
The falsification target for this reaction-diffusion art decision is treating a screenshot as sufficient provenance. If treating a screenshot as sufficient provenance occurs, a favorable aggregate can still conceal the exact cohort, queue state, position, geometry, or frame that invalidates the conclusion.
The article's proposed boundary is the recipe reproduces both field character and authored display mapping. Promotion under “the recipe reproduces both field character and authored display mapping” should wait until another reviewer can evaluate the boundary from named evidence without relying on the author's authority.
Keep the boundary visible
Treat the simulation as a recipe with a separate display layer. Fixed time, seeded state, parameter neighborhoods, scalar kernel checks, and export hashes turn emergent patterns into a repeatable material practice.
The artistic decision lives in the boundary: which instability to keep, which palette reveals its structure, and when resolution yields so the surrounding page remains calm and responsive.
Continue through four related field notes: WebGPU generative art, seeded randomness, OffscreenCanvas posters, canvas blend modes. Each extends the reaction-diffusion art method without changing this article's single search intent.