REACTION // DIFFUSION

An organic pattern synthesizer in a single dependency-free HTML file, in the same dark instrument-panel style as the lissajous app. The reaction-diffusion model is inspired by Jason Webb's playground, and its pattern map, vary-pattern shapes, flow, orientation and scale controls by Karl Sims' RD Tool (reimplemented from how the tool behaves; no code or images are taken from it). Four more generative models sit alongside it.

Models

Every model produces a scalar field, so the shading, contour export, and MIDI mapping are shared across all of them. The other models are kept out of the panel: press / and type models to list them and switch.

• Reaction–diffusion — the dynamic Gray–Scott solver (drawing, bias, presets, SVG import; all described below).
• Voronoi cells — organic cellular partition with cell count, gap, corner smoothing, wall thickness, frame, jitter, and animated drift. Cells are rounded the way a rounded box is: shrunk by the radius, then measured back out, so straight walls stay straight, the gap between two cells is exactly the gap, and only the corners turn into arcs. Edges are antialiased to about a texel. Wall thickness hollows each cell into a ring (rounded inside as well as out; 0 is solid), and frame closes the pattern inside a border the cells round against like any other wall.
• Marble veins — domain-warped noise for flowing marble / vein structures.
• Metaballs 3D — raymarched blobs merged with a smooth minimum. The field is the surface depth seen from the camera, so relief shading and the contour export follow the real geometry. Drag to orbit the cluster, wheel to zoom.
• Flow lines — warped wavefronts for fingerprint / topographic contours.

Generative models have a Generate button that reshuffles the random seed, and a ← reaction–diffusion button back.

Panel

The same conventions as the lissa and modal cymatics panels:

• Folding sections — click a section title to fold it; alt-click opens that one and folds the rest. What is folded is remembered per browser.
• Search — / or ctrl-k opens a palette over every control. A slider comes up live in the result, so it can be moved without leaving the search; enter shows the control in the panel. The palette also runs commands: models lists the pattern models, examples the example patterns.
• Pins — the ☆ on a slider pins a copy of it to a dock on the canvas (up to eight, remembered per browser).
• Typed values — click a slider's readout to type a value.
• Centred sliders — flow, orientation and the scale variations have zero in the middle; the thumb catches on zero as it passes, hold ctrl to slide through.

Phones and tablets

Under 720px wide the panel becomes a sheet over the bottom of the screen (☰ opens and closes it; it starts closed so the field is what opens). The pattern map is kept to a size the sheet can hold, the pin dock sits above the sheet, and the MIDI learn buttons are dropped. On a touch-first device sliders, buttons and the map rings are finger-sized, text fields are 16px so iOS does not zoom into them, the field starts at half resolution, and two fingers on a 3D view pinch the camera in and out (a second finger while drawing ends the stroke).

Open index.html in a browser (Chrome or Edge for Web MIDI). No build step, no server needed — though MIDI and some export features prefer https:// or localhost, so python3 -m http.server works well.

3D projection

Any model's field can be mapped, live, onto an orbiting object: sphere, cube, icosahedron, torus, hyperboloid, cylinder, cone, torus knot. Drag the canvas to turn it, wheel to zoom, o to toggle. The simulation keeps running underneath, so a reaction-diffusion pattern grows across the surface in real time.

This is the beginning of the README. Read the rest at the original. Read the full README ↗