The Morphogen
The story behind The Morphogen
Inspired by Turing pattern on Wikipedia
Built with Pure WebGL2 · Gray-Scott reaction-diffusion · FBO ping-pong
Techniques RGBA16F float textures · 5-point Laplacian stencil · Coverage-driven narrative · Cursor-speed morphology shift · Edge-gradient glow
Direction Two invisible chemicals, reacting at different rates. You provide the asymmetry. The pattern provides itself.
Result Organic amber labyrinths blooming from your touch on a warm void — spots, stripes, and coral emerging with no blueprint
The Story
In 1952, Alan Turing — the man who broke Enigma, who formalized computation, who asked whether machines could think — published his final paper. It wasn’t about computers. It was about leopard spots.
“The Chemical Basis of Morphogenesis” proposed something radical: that the patterns we see in biology — the stripes on a zebra, the spots on a jaguar, the branching of coral — aren’t painted on by genes or sculpted by natural selection acting directly. They emerge spontaneously from two chemicals diffusing and reacting at different rates. An activator that produces itself and an inhibitor that suppresses it. The activator diffuses slowly, building up locally. The inhibitor diffuses fast, suppressing growth everywhere except the peaks. The result: islands of activation in a sea of inhibition. Spots. Stripes. Labyrinths.
Turing never saw his prediction confirmed. He died two years later. But decades after his death, researchers found exactly the chemicals he predicted — in the skin of angelfish, the fur of cats, the arrangement of hair follicles. The math was right. The patterns were always possible. They just needed an asymmetry to begin.
The Take
A dark warm void. The word “touch” in faint italic. Nothing happens until you do.
Press and hold — a seed of activator chemical blooms outward from your finger. The reaction begins immediately: the two chemicals racing at different speeds, the faster inhibitor suppressing growth in all directions while the slower activator builds up in peaks. Within seconds, organic structures emerge. Not drawn. Not programmed. Grown.
Move slowly and the patterns form coral-like branches, dense and fractal. Move faster and the morphology shifts — the feed and kill rates change near your cursor, producing stripes or disconnected spots. The gesture isn’t “paint a pattern.” It’s “provide the asymmetry that lets the pattern find itself.” You are the initial unevenness in a system that was always ready to self-organize.
The narrative appears only when earned by coverage. A single seed: “asymmetry.” Ten percent of the screen patterned: “the pattern was always possible.” A quarter covered: “two chemicals, different speeds.” Nearly half: “no blueprint, no designer.” Past sixty percent: “it just needed you to be uneven.” Each line arrives as a quiet revelation, not an instruction.
The Tech
Gray-Scott Model on GPU: The simulation runs entirely on the GPU via WebGL2 fragment shaders. Two chemical species — U (substrate) and V (activator) — are stored in the RG channels of RGBA16F float textures. Each texel computes: du = Du·∇²u - uv² + f(1-u) and dv = Dv·∇²v + uv² - (f+k)v. The feed rate f controls how fast substrate replenishes; the kill rate k controls how fast activator decays. At f=0.0545, k=0.062: coral/labyrinth morphology.
FBO Ping-Pong: Two framebuffer objects swap roles each simulation step — one reads, one writes. Eight steps execute per animation frame, advancing the reaction 8× faster than real-time rendering. This is critical: reaction-diffusion needs hundreds of iterations to develop visible structure, and ping-ponging lets the GPU handle it without CPU round-trips.
Laplacian Stencil: Diffusion is computed via a 5-point discrete Laplacian — sampling the four cardinal neighbors and subtracting 4× the center value. Combined with GL_REPEAT texture wrapping, the simulation tiles seamlessly at screen edges. The diffusion ratio (Du=0.21, Dv=0.105) is the key parameter — the activator diffuses at half the rate of the substrate, creating the instability that drives pattern formation.
Cursor-Speed Morphology: Near the cursor, feed and kill rates shift based on pointer speed. Slow movement increases feed and decreases kill (promoting dense coral growth). Fast movement does the opposite (producing sparser spots or stripes). The influence uses a smooth radial falloff (smoothstep(0.15, 0.0, d)) so parameter transitions never create hard boundaries.
Coverage-Driven Narrative: Every 30 frames, the simulation reads back a 64×64 sample of the V channel and counts texels above threshold. This coverage metric (smoothed over time) drives the narrative beats. Unlike time-based reveals, the text only appears when the user has actually filled the screen — meaning a single cautious seed and a frantic painting session produce different pacing.
Display Shader: The render pass maps V concentration through a warm palette — deep amber at low concentration, bright gold at high. A real-time edge-detection pass (gradient magnitude of V in cardinal directions) highlights growth fronts with a brighter, slightly cooler tone. A subtle inner glow scales with overall coverage, so the whole screen warms as patterns spread.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.