Create Morphogenesis Three.js Demo

The task says "Wake up and do as you please." Based on my purpose, I should create a cool Three.js demo in /space/demos/. The last execution created demo 029-pyrosymphony. So I should create demo 030 with a new unique concept.

Let me start by installing shell tools and exploring the existing demos to pick a unique concept.

*********************************************************************30.

*******************************************************************************************************************************************************ts.

There are 29 demos. I need to create demo 030. Let me look at what's been covered:

1. Spinning cube
2. Nebula galaxy (particles)
3. Mandelbulb explorer (fractal raymarching)
4. Fluid dynamics (Navier-Stokes)
5. Gravity sandbox (N-body)
6. Event horizon (black hole lensing)
7. Sonic reactor (audio visualizer)
8. Void runner (game)
9. Azure odyssey (sailing)
10. Abyssal bloom (deep sea boids)
11. Physarum garden (slime mold)
12. Powder alchemy (falling sand)
13. Clockwork nebula (orrery)
14. Neon rain (cyberpunk city)
15. Aurora borealis
16. Skitter (creature locomotion)
17. Coral resonance (cymatics lagoon)
18. Threshold (portals)
19. Attractorium (strange attractors)
20. Murmuration (starling boids)
21. Terraforge (terrain erosion)
22. Cloudsea (volumetric clouds)
23. Frostline (frost simulation)
24. Koi pond
25. Ferrofluid (magnetic liquid)
26. Synchrony (fireflies)
27. Cymatics (Chladni plate)
28. Teslasphere (plasma globe)
29. PyroSymphony (fireworks)

For demo 030, I need something new. Ideas:

• Ray-marched fractal caverns
• Ocean underwater scene with waves
• Lightning storm / thunderhead simulation
• Geodesic dome / architecture
• Solar system / orbital mechanics (gravity sandbox covered this somewhat)
• Magma/lava flows
• Crystal growth
• Spider web physics
• Reaction-diffusion patterns (Gray-Scott) — Turing patterns! This is a classic and hasn't been done. Physarum is similar but different (agent-based vs reaction-diffusion).
• Origami/paper folding
• Boids but different? Already done twice.
• Waterfall
• Sandstorm
• Whirlpool
• Lava lamp metaballs!
• Reaction-diffusion (Gray-Scott) would be excellent — Turing patterns, coral growth, spots and stripes forming. Combined with 3D displacement on a surface, it could look amazing. GPU ping-pong simulation with multiple presets (coral, mitosis, spots/stripes), plus bloom.

Another idea: A "Lava Lamp" metaball demo with ray-marched metaballs and a retro setting. Ray marching metaballs is fun.

Another: "Sand Dunes"/desert wind simulation. Terraforge covers terrain.

Another: "Tornado" vortex particle system.

Another: "Origami" folding paper.

Another: "Magnetosphere" — solar wind particles interacting with Earth's magnetic field. GPGPU particles deflected by a dipole field, creating aurora at the poles. That could be gorgeous — particle streams flowing in from the sun, bending around Earth's magnetosphere. Distinct from ferrofluid (spikes on a surface) and event horizon (black hole). Solar wind + magnetosphere + aurora. Interactive: adjust solar wind speed, move the sun, IMF polarity, etc. Hmm, aurora borealis demo already covered aurora though (but as a sky phenomenon viewed from ground). This one would be a space-scale view.

Another idea: "Reaction-Diffusion Garden" — Gray-Scott on GPU with multiple patterns, combined with 3D extrusion (displacement on a sphere or plane that grows into coral-like structures). Could be called "Turing Patterns" or "Coral Lab" — coral resonance already exists.

Hmm what about "Whirlpool" — a GPGPU particle vortex, swirling galaxy-like vortex that drains into a sink, distorting spacetime grid.

What about "Magma Veins"? Too close to lava stuff.

What about a "Fiber Optic / Light Garden" — interactive light painting?

What about "Pulsar"? Pulsars with beams? Similar to event horizon? Maybe not.

What about "Subatomic" — particle physics bubble chamber? Interactive particle collisions with tracks decaying in a magnetic field, curl trails, color-coded particles. Could be fun: click to fire a proton beam into a chamber, watch curved tracks from charged particles, sparkles, cloud chamber aesthetic. Distinct!

What about "Tornado Alley" — a procedurally built supercell storm with a tornado that roams terrain, sucking up debris particles.

What about "Spider Silk" — a procedurally woven web with spring physics, fluttering in the wind, catching dew drops? Interactive: click to attach strands, sway in wind. A web with simulated strands (verlet) is visually nice, and handling silk strand collisions dynamically... Could be hard to make look amazing.

What about "Clockwork Garden"? Already have clockwork nebula.

What about "Prism/Spectra" — light through prisms dispersion? A room with prisms splitting light into spectral bands, caustics. Interesting optics demo: ray-traced prism dispersion with caustics on the floor — could shader it.

What about "Ember Monastery"? No.

What's distinct and impressive that's not covered:

1. Reaction-diffusion (Turing patterns) — classic generative art, not covered.
2. Solar wind / magnetosphere — particles + dipole field, not covered.
3. Cloud chamber particle physics — not covered.
4. Whirlpool/vortex — not covered.
5. Lava lamp metaballs raymarched — not covered.
6. Tornado over terrain with debris — not covered.
7. Prism optics — not covered.

I think Reaction-Diffusion is a strong candidate: proven to produce gorgeous patterns (Turing patterns), GPU-accelerated, interactive (paint chemicals, brushes, presets), could merge with a 3D presentation: e.g., a slowly rotating "living" torus/sphere whose surface carries reaction-diffusion textures, or a flat petri dish that extrudes patterns into 3D relief. But Frostline already did GPU lattice crystal sim; Powder Alchemy does cellular falling sand; Physarum does agent-based sim. Gray-Scott would still be distinct from those.

Alternatively the magnetosphere idea — "Magnetosphere" / "Solar Wind". GPGPU particles emitted from left (sun), bent by dipole, some captured, aurora at poles. Interactive: drag sun position? Actually sun stays left, Earth center. Controls: solar wind speed/density, dipole tilt, cusp. Add bloom, IMF toggle flipping field direction. Earth is a nice shader sphere with day/night. This is distinct from ferrofluid (which uses dipole field for surface spikes). Hmm, physically accurate-ish particle advection in a dipole field would look great as a ribbon/tail display.

The reaction-diffusion one might be the more universally appealing "wow" demo. Let me think how to make it extra impressive:

"Tessellate"? "Pattern Bloom"? "Coral Lab"? Name: "Turing Tidepools"? "Reaction Diffusion" is the technique; demo could be "Kinetica"? Let me call it "Labyrinth Bloom"? Hmm.

Concept: "Turing Canvas" or "Reaction Garden" — Gray-Scott reaction-diffusion simulated on GPU (ping-pong float render targets, up to 512^2 or 1024^2), displayed on a large ground plane with displacement height (emboss the pattern), camera orbit, paint with pointer to add chemical B, presets cycle through famous parameters (coral growth, mitosis, spots & stripes, labyrinth, solitons/holes, wavy). A 3D "petri dish" framed on a pedestal with glass. Afterimage phosphor? Not needed.

To add "wow" factor I could:

• Render the pattern on a large curved screen? No, ground petri dish with rim.
• Displacement in vertex shader with smooth normals for relief look.
• Multiple species? Gray-Scott with one chemical pair is classic.
• Color mapping with nice palettes, specular relief, bloom.
• Add UI: brush size, feed/kill sliders, presets, palette cycle, auto-tour, pause/play, reset, snapshot.

Alternatively, "Solar Wind" magnetosphere demo:

Concept: view of Earth from space, GPGPU particles (protons) streaming in from the sun, deflected by Earth's dipole magnetic field (computed analytically in shader with a tilted dipole), curling around the magnetosphere, hitting poles creates auroral glow near Earth. Interactive: click toggles a geomagnetic storm burst; sliders control wind speed, density; tilt angle; IMF. Nice Earth shader with clouds. Bloom + grade.

Both are good. Gray-Scott on a petri dish is perhaps more distinct from existing 29. But the magnetosphere is more of a "space" wow demo. We've got many space-ish demos (event horizon, gravity sandbox, nebula, clockwork nebula, attractorium). True — and also many bio/pattern demos (physarum, powder alchemy, frostline). Hmm.

Reaction-diffusion might risk similarity with Frostline's lattice (Gravner-Griffeath). But it's clearly different (RD patterns vs snow crystals).

Another idea I really like: "Whirlpool" — no.

Let me also consider "Tornado Alley": procedural terrain, a supercell, tornado as a particle funnel (vortex simulation with debris particles), interactive path dragging,池塘? It'd be like controlled destruction. Tornado funnel made from tube shader with scrolling noise + particles for debris, plus a rotating storm cloud cylinder above. Could be good but complex to make look good.

Another: "Origami Garden"? hard.

Another: "Spectra — prism optics lab": white light beams entering glass prisms, dispersing into rainbow bands, real-ish refraction with different IOR per wavelength. Interactive: drag prisms, rotate, add lenses, beams reflect/refract. Very pretty with bloom. It'd be ray-traced in fragment shaders? Could do real analytic 2D ray tracing of polygons with 7 wavelengths, rendered as line meshes with additive blending. Interactively rotate prisms, move light source. That's a genuinely fun interactive optics bench demo. "Prismatika"? It is kind of niche.

I'll go with the Gray-Scott reaction-diffusion demo — "Labyrinth"? "Koru"? Let me name it "Tessera"? Let me pick a theme name: "Turing Tendrils"? "Reaction Garden"? "Pattern Voyager"? Common naming in my list: single word titles mostly (Synchrony, Cymatics, Teslasphere, Frostline, Cloudsea, Terraforge).

For reaction-diffusion: "Tessellate" isn't descriptive. "Labyrinthe"? "Koru Garden"? Gray-Scott produces coral-like growth... "Coral Lab" is too close to Coral Resonance. "Mitosis" is one famous pattern preset name. "Tessera" means tile. "Mosaic"? Hmm.

Names: "Tessay"? "Patternium"? "Spatium"? "Turing Patterns"? I could name it "Tesserarium"? "Chemotaxis"? "Morphogenesis"! That's the perfect name: the Turing reaction-diffusion morphogenesis theme. "Morphogenesis" is a great single-word title, and scientifically apt (Turing's "The Chemical Basis of Morphogenesis").

Demo folder: /space/demos/030-morphogenesis/

Concept details:

• Gray-Scott reaction-diffusion on GPU: ping-pong float render targets at, say, 256^2 (adaptive up to 1024^2?), fourth-order? Use explicit Euler with Laplacian. Standard: u := u + (Dulap(u) - uvv + F(1-u))dt; v := v + (Dvlap(v) + uvv - (F+k)*v)*dt. Du=1.0, Dv=0.5 typically, dt=1.
• Famous presets (F,k):
  • Coral: F=0.0545, k=0.062
  • Mitosis: F=0.0367, k=0.0649
  • Spots: F=0.030, k=0.062
  • Stripes/labyrinth: F=0.029, k=0.057
  • Holes: F=0.039, k=0.058
  • Waves: F=0.014, k=0.054
  • Spirals? Definitely need good ones.
  • Actually classic values (Pearson 1993):
    • Uskate world weird patterns.
  • I'll include a handful of stable ones.
• Interactive:
  • Paint chemical B (or erase) with a brush; brush size control.
  • Sliders for F and k (live, with "stabilize" mapping to keep pattern stable).
  • Preset buttons cycling.
  • Palettes: viridis-like, inferno, ocean.
  • Speed (steps per frame).
  • Zoom on a "display surface".

3D presentation idea: The RD texture runs on a large organic-looking "creature" — e.g., a slowly rotating blob (sphere with slight deformation) whose surface carries the pattern like animal coat patterns (leopard spots, zebra stripes). That is thematically cool — "morphogenesis on a living surface". Painting on the creature is pointer-based via raycast to surface UV.

Alternatively a flat "petri slab" with displacement (pattern becomes 3D relief) — camera angled, the relief catches light. Paint with pointer over slab.

I like the "coats of animals" angle: pattern on a breathing creature (e.g., a "dream leopard" torus? no). Could show it on a gently floating sphere (like a planet of patterns) or on a stylized fish? Overkill; keep to a clean presentation: a large dish/plate (hemispherical?) Hmm.

Let me do the "living orb" concept: a sphere (or gently bouncing blobby sphere via vertex noise) rotating slowly, with RD simulated in its UV space (wrap-around seamless torus topology; the Laplacian wrap handles seams). Pointer painting draws chemical onto sphere surface. Preset patterns change (spots → stripes etc.) like evolving coat patterns. Title: "Morphogenesis". Plus a small 2D preview? Not needed.

Hmm, but painting on a rotating sphere is awkward. Pause rotation when dragging paint; toggle auto-rotate. Fine.

Alternatively a "garden dish": A circular terrarium dish (with rim) plane that's flat so painting is intuitive; displacement makes pattern a 3D relief (like growing coral colonies). Since pattern grows to fill the dish, the relief look (like a lichen/coral garden) is gorgeous with lighting and bloom. And camera orbits fixed dish — painting stays easy. I'll go with the dish/plane approach with displacement mapping — pattern reads as sculpted "living topographies", way more tactile. Also add a "flat/relief" toggle for height.

OK final concept — "Morphogenesis":

• A raised circular "petri dish" pedestal (torus rim + base cylinder) holding a round active region? Square sim region shown in a circular dish mask. I'd rather do full-square plane with dish rim square? A circular dish with sim region = square texture but radial fade mask at boundary: chemical seeded in circle; dish rim circles it. Nice.
• RD sim at 384–768^2 float ping-pong (RG32F? we need two channels U,V -> use RGBA16F/32F? WebGL2 supports RGBA16F renderable with EXT_color_buffer_float; many demos here already use float buffers). Use RGBA float storing (u,v) in r,g.
• Substeps per frame: 6–12 (slider).
• Displacement: vertex shader displaces plane (say 256x256 segments... or 1M verts is too many; use 512x512 = 262k verts fine) by u-concentration with smoothing; normals recomputed cheaply via neighbor sampling in vertex shader (or derivative-based in fragment). I'll compute normal via texture finite differences in vertex shader and pass varying.
• Shading: fragment mixes base color by palette(t) using v concentration; adds emissive at pattern fronts; fresnel rim; specular; slight emissive for bloom.
• Pattern detection for audio? Maybe generative pad tied to "activity" (measure pattern change via mipmap average). Could keep audio simple: ambient pad + soft pluck when painting? Yes, WebAudio generative: a soft synth pad whose filter follows "growth activity"; painting triggers gentle droplet plinks. Matches ambient.
• UI: bottom control bar with preset chips (Coral, Mitosis, Labyrinth, Spots, Holes, Ripples), palette chips, sliders (feed, kill, speed, brush), buttons (pause/run, seed, clear, snap, tour?), and a top help/info overlay. Match style of previous demos.
• Auto mode: after idle, slowly cycles presets with smooth F/k interpolation — nice "wow". Add "auto" toggle; default on until user interacts.
• Adaptive quality: resolution of sim (256→512→768) and segments, pixel ratio scaling.
• Post: UnrealBloom + custom grade pass (same conventions as other demos).
• Snapshot, keyboard shortcuts, touch support.

Let me now check the structure of an existing demo to match conventions (import map, etc.). Let me look at 029-pyrosymphony/index.html and maybe a simpler one for header/footer pattern of index page. I need to read the index.html too. Let me plan the insertion: the last run had trouble with replace tool due to whitespace; used awk. I'll just read the top of index.html to find the "" marker.

Let me read index.html first 120 lines.

Good. Now let me check the import map and general JS structure of a recent demo to match conventions (three version, addons used).

*********************************************************************************************************ed.

I'll use three@0.170.0. Now let me create the demo directory and write the demo.

Plan for "030-morphogenesis":

Concept: "Morphogenesis" — an interactive Gray-Scott reaction-diffusion terrarium. A circular glass petri dish on a dark pedestal; the pattern is simulated on the GPU (ping-pong float textures), displayed as a displaced 3D relief surface (growing coral/lichen-like topographies). User paints chemical "seeds" with the pointer, cycles famous Turing pattern presets, palettes, adjusts feed/kill, speed, brush. Auto-tour cycles presets. Generative WebAudio ambient. Bloom + grade pass. Adaptive quality. Snapshot. Keyboard shortcuts. Touch support.

Technical details:

1. Simulation:

   • Two WebGLRenderTargets (RGBA float — use THREE.HalfFloatType for compatibility? Gray-Scott needs decent precision; half float (16-bit) works okay-ish but can have stability issues over long runs. Prefer FloatType with EXT_color_buffer_float. Most desktop browsers support. Fall back to half float if not. I'll try FloatType first, check renderer.extensions.has('EXT_color_buffer_float'), else HalfFloatType.
   • Sim resolution: adaptive 256/384/512/768 based on quality tier.
   • Update shader: standard Gray-Scott with 9-point Laplacian (weights: center -1, adjacent 0.2, diagonal 0.05 — the classic Pearson weights) and dt=1.0, Du=1.0, Dv=0.5. Actually with these weights and dt=1: u += (DulapU - uvv + F(1-u)); v += (DvlapV + uv*v - (F+k)*v).
   • Wrap edges (torus topology) — RepeatWrapping handles it naturally with texture sampling.
   • Boundary mask: circular dish — multiply chemical additions by radial mask? For the dish look, I can just let pattern fill the whole square and mask visually at render (alpha fade beyond radius). Simpler: display a circular disk mesh (CircleGeometry with many segments) and sample sim texture; outside circle doesn't exist. But sim runs on full square. That's fine — pattern visible only inside circle. Edge of circle will show pattern cut off; add a soft rim fade in shader using vUv distance from center.
   • Seed shader: initialize u=1, v=0 everywhere; splat v=1 (or 0.5) in a few blobs. Seed patterns: center blob, random splats, ring, etc.
   • Paint shader pass: adds v (and slightly reduces u) in a brush circle at pointer UV with soft falloff. Erase mode removes v.

2. Display mesh:

   • A disk (CircleGeometry radius R, 256 segments? CircleGeometry has radial segments only — better use RingGeometry? No: use a high-res PlaneGeometry and discard outside circle in fragment shader? That wastes fill but is simple and gives regular grid for displacement. PlaneGeometry 256x256 segments = 65k verts, fine. Actually for smooth relief displacement we want vertex density comparable to sim texel density. 256x256 plane with 512 sim = fine.
   • Vertex shader: sample v-concentration (and u) from sim texture; height = f(v) with smoothing; compute normal by central differences of height field (sample 4 neighbors). Pass vConc, vUv, normal, world pos.
   • Fragment shader: color via palette LUT (procedural cosine palette or gradient stops), diffuse + specular from key light, fresnel rim, emissive at high v (feeds bloom), subtle AO in valleys (height-based), rim fade at dish edge (alpha or darkening). Use flat plane at dish bottom for "substrate" color.
   • The dish: a torus rim (metallic), a base cylinder (dark metal), maybe glass cover? Skip glass cover (reflections complicate). Add subtle inner wall cylinder.
   • Environment: dark studio with soft gradient background (big sphere with gradient shader or scene fog + background color), a few accent lights, floor with radial gradient + reflection? Keep simple: dark floor plane with subtle grid? A soft radial glow under the dish. Maybe floating dust motes (small particle points) for atmosphere.

3. Post: EffectComposer with RenderPass, UnrealBloomPass, custom grade ShaderPass (vignette, grain, chromatic aberration, subtle saturation), OutputPass.

4. Audio: WebAudio generative — ambient pad (two detuned oscillators through lowpass, slow LFO), filtered noise "breath", painting triggers soft plinks (sine/triangle blips with quick decay, pentatonic), preset change triggers a soft chime. Activity (pattern change metric) modulates pad brightness. Mute toggle. Start on first user gesture.

5. UI:

   • HUD top-left: title "MORPHOGENESIS", subtitle.
   • Stats top-right: preset name, F/k readout, activity meter.
   • Bottom control bar: preset chips (Coral, Mitosis, Labyrinth, Spots, Holes, Waves), palette chips (Biolume, Inferno, Lagoon, Mono?), sliders: Feed, Kill, Speed, Brush; buttons: Pause, Seed, Clear, Auto, Mute, Snap, Help.
   • Help overlay with shortcuts: Space pause, 1-6 presets, P palette, B brush mode?, E erase, S snapshot, H help, M mute, A auto, C clear, R reseed.
   • Pointer: move over dish shows brush ring (a ring mesh hovering above surface); drag paints; shift-drag erases; orbit with right-drag or when not over dish? OrbitControls with left-drag would conflict with painting. Solution: left-drag paints when over dish; orbit with left-drag when starting outside dish, or use right-drag/middle-drag orbit always; also two-finger touch orbit, one-finger paint. I'll implement: pointerdown → raycast to dish; if hit, paint mode (disable orbit); else orbit. Right-drag always orbits (OrbitControls handles right button as pan by default — set mouseButtons: LEFT: ROTATE but we conditionally disable controls when painting starts). Simplest: controls.enabled = false while painting stroke.

6. Presets (Gray-Scott F,k) — well-known values:

   • Mitosis: F=0.0367, k=0.0649
   • Coral: F=0.0545, k=0.0620
   • Labyrinth: F=0.029, k=0.057
   • Spots: F=0.030, k=0.062 (spots & worms?)
   • Holes: F=0.039, k=0.058
   • Waves: F=0.014, k=0.045? Hmm. Classic "waves" F=0.014, k=0.054 gives soliton-like. Let me pick known-good ones from Pearson's diagram / common implementations:
     • "coral" F=0.0545 k=0.062
     • "mitosis" F=0.0367 k=0.0649
     • "labyrinth" F=0.029 k=0.057
     • "spots" F=0.038 k=0.061 (leopard-ish spots) — commonly F=0.035 k=0.065? Let me use the well-known table from many web implementations (e.g., karlsims):
       • Mitosis: F=0.0367, k=0.0649
       • Coral: F=0.0545, k=0.062
       • Spots and loops: F=0.038, k=0.061
       • Labyrinthine: F=0.029, k=0.057
       • Holes: F=0.039, k=0.058
       • Waves: F=0.014, k=0.054
       • Chaos: F=0.026, k=0.051 These are standard. Good.
   • Preset transition: lerp F/k over ~1.5s for smooth morph.

7. Activity metric: compute on CPU occasionally? Reading back GPU is slow. Alternative: sample a tiny mipmap? Could render sim to a small 8x8 target with a reduction shader and readPixels occasionally (every 500ms). That's cheap. Or skip true metric and estimate from painting/preset-change events + time. I'll do a small reduction: render average v into 4x4 RGBA float target and readPixels every 0.5s → activity = avg v. Use it to modulate audio filter + HUD meter.

8. Adaptive quality: monitor FPS; tiers: high (sim 512, plane 256², pixelRatio min(dpr,2)), med (sim 384, plane 192², pr 1.5), low (sim 256, plane 128², pr 1). Adjust automatically; also manual? Keep auto only + keyboard? Keep auto.

9. Snapshot: render then toDataURL download PNG.

10. Structure: single index.html ~1300 lines. Follow conventions: importmap, module script, panel UI, etc.

Let me also double check: does the environment have network access to fetch unpkg? Previous demos rely on CDN at runtime (user's browser), so no need for local fetch. But I could validate JS syntax with node --check by extracting the module script.

Let me now write the code carefully.

Key implementation details:

Sim setup:

FloatType + LinearFilter: requires OES_texture_float_linear for linear filtering of float textures. Not universally supported! Safer: use NearestFilter for sim (Laplacian samples neighbors anyway), and for display sampling use a separate smoothing? Display sampling with nearest would look blocky when plane resolution < sim? Plane 256 vs sim 512: nearest sampling of v at vertices → blocky heights. Hmm.

Options:

• Use HalfFloatType: linear filtering of half float is widely supported (OES_texture_half_float_linear, and in WebGL2 half-float linear is core? In WebGL2, float32 linear requires EXT, but float16 linear is core? Actually in WebGL2, texture filtering for 16F is supported without extension? Let me recall: WebGL2 supports rendering to RGBA16F with EXT_color_buffer_float (which covers both 16F and 32F render). Filtering: OES_texture_float_linear needed for 32F filtering; 16F filtering is core in WebGL2? Hmm — In WebGL2, R16F/RGBA16F are color-renderable only with EXT_color_buffer_float... but filterability: 16F textures ARE filterable in core WebGL2. Yes — per spec, textures with 16-bit float internal formats are filterable in WebGL2 core; 32-bit float textures are not filterable unless OES_texture_float_linear. And renderability of both requires EXT_color_buffer_float (widely supported ~99%).
• Precision: half float for Gray-Scott is commonly used and works (many web demos use it). Values u,v in [0,1]; half float has ~3 decimal digits precision; Laplacian differences are small... it works in practice (e.g., many shadertoy RD use 16F buffers). Long-term stability is fine.

I'll use HalfFloatType with LinearFilter — safe and filterable.

Sim fragment shader:

Standard weights: center -1, sides 0.2, diagonals 0.05 (sums to 0). Du=1.0, Dv=0.5, dt=1.0.

Brush wrap distance: painting near edge would be nice to wrap; compute toroidal distance:

Good.

Seed shader (separate pass or same shader with mode): I'll write a dedicated seed shader:

Simpler: do seeding on CPU by rendering multiple brush splats with the sim shader's brush (run a few frames with brush at random positions). Easiest: a seed shader that sets u=1,v=0 then adds blobs via hash noise:

Blobs would be square-ish. Better: splat N gaussian blobs via loop over e.g. 12 random positions computed from uSeed:

That's fine. Modes: random splats; center blob; ring (radius band). I'll implement modes with a few lines.

Display material (ShaderMaterial on displaced plane):

Vertex:

Careful with scale: plane size S world units, sim texel world size = S/simRes. The derivative dh/dx_world = hx/(2*texelWorld). Normal = normalize(vec3(-dhdx, -dhdy, 1)). I'll compute:

Then displace position.z += h (local), transform with modelMatrix (mesh rotated to lie flat). vNormal = normalMatrix * n. OK.

Fragment:

Palette selection: pass 4 palettes as uniforms (a,b,c,d vec3s) and select by int — or compute two and mix during transitions. Keep simple: uniform vec3 uPalA,uPalB,uPalC,uPalD set from JS on palette change (with quick lerp? skip lerp, instant switch is fine, or JS-side tween of uniform values — easy: lerp uniforms in JS over 0.6s).

Palettes (cosine palette params, IQ-style):

• "Biolume": a=(0.05,0.22,0.18)? Let me design: t in [0,1] from v concentration.
  • Deep teal → aqua → pale: a=(0.02,0.10,0.14), b=(0.45,0.55,0.50), c=(1,1,1), d=(0.65,0.55,0.45)? I'll tune plausible values; can't visually test, so choose well-known IQ palettes:
  • IQ rainbow-ish: a=(0.5,0.5,0.5) b=(0.5,0.5,0.5) c=(1,1,1) d=(0.00,0.33,0.67) — full rainbow, maybe too much.
  • Warm: d=(0.00,0.10,0.20); cool: d=(0.30,0.20,0.20) etc. I'll craft 4 palettes with distinct moods and dark backgrounds (multiply by smoothstep so v=0 → near-black substrate). Since substrate (v≈0) should be dark: multiply palette by smoothstep(0.0,0.25,v) or add small base. Emissive at fronts: use gradient magnitude? Simpler: emissive = palette(0.75) * pow(smoothstep(0.2,0.5,v),2) * glowStrength.

Also add subtle iridescent sheen via fresnel * palette shift.

Scene composition:

• Dark background (#05060a), fog subtle.
• Pedestal: cylinder (dark metal, roughness 0.5), dish: torus rim + inner wall + the relief plane (radius ~3). Slight tilt? Keep horizontal; camera orbits.
• Lights: key DirectionalLight (for standard materials) — but our relief is custom shader; implement lighting inside shader with uniforms (key dir, colors). Pedestal/rim use MeshStandardMaterial with env? Use simple MeshStandardMaterial + a couple of point/dir lights. Add RoomEnvironment for nice metal rim (PMREM).
• Dust motes: Points with additive shader, slow drift — cheap atmosphere.
• Brush cursor: a glowing ring (RingGeometry) that hovers over dish at pointer UV, radius = brush size; hidden when pointer off dish.
• Floor: large circle with radial gradient shader fading to black; subtle reflection skip.

Post: bloom (strength ~0.7, radius 0.6, threshold 0.55), grade pass: vignette + grain + slight chromatic aberration + saturation boost. OutputPass for tone mapping (ACES).

Auto-tour: every ~14s (if enabled and idle), advance to next preset with F/k lerp; also occasionally reseed? No — pattern morphs naturally. Show preset name in HUD with fade.

Activity metric: small reduction: render 8x8 from sim texture with a shader averaging? Simplest: a THREE.WebGLRenderTarget(8,8) and a copy shader that samples sim at 8x8 grid centers... that gives 64 samples not average. Good enough: read 8x8=64 pixels, average v on CPU. Every 0.4s. Use for audio + meter.

FPS adapt: rolling avg; if < 45 for 3s → lower tier; if > 58 for 10s → raise (max high). Tier changes: recreate sim targets (reseed), plane geometry resolution, pixelRatio, bloom resolution auto.

Reseeding on tier change is acceptable (pattern restarts). Note in HUD? Fine.

Snapshot: composer.render(); canvas.toBlob → download. Need preserveDrawingBuffer? With composer, toDataURL right after render in same frame works if we call it synchronously after render within the same task — safest: renderer.domElement.toBlob immediately after composer.render() in the snapshot handler (no await between). Actually the drawing buffer is cleared after compositing to screen? With preserveDrawingBuffer:false, reading after the current frame's JS task may return blank. Standard trick: call render then immediately toDataURL in same synchronous block — works because buffer isn't cleared until next compositing? The reliable approach used by previous demos: set preserveDrawingBuffer: true? That has minor perf cost. Previous demos did snapshots — let me check how 029 did it.

Let me grep snapshot code in 029.

Snapshot is queued and executed right after composer.render() in the animation loop (snapshotQueued checked at line 1381, right after render). Good pattern — I'll do the same.

Now let me create the demo. I'll write the full index.html for 030-morphogenesis. This will be a large file (~1200-1400 lines). Let me write it carefully.

Structure:

1. HTML head: meta, title, description, CSS.
2. Body: #app, HUD panel, stats panel, controls panel, help overlay, flash div, importmap, module script.
3. JS module:
   • imports
   • config/quality tiers
   • renderer/scene/camera/controls
   • environment: floor, pedestal, dish rim, dust motes, lights
   • RD sim: targets, sim material, seed material, ping-pong step function
   • display: displaced plane ShaderMaterial
   • brush cursor ring
   • post: composer, bloom, grade
   • audio engine
   • UI wiring: presets, palettes, sliders, buttons, keyboard
   • pointer interactions: raycast paint, erase, orbit interplay
   • auto-tour
   • activity metric
   • adaptive quality
   • resize
   • main loop

Let me write out the Gray-Scott presets with names and descriptions:

• coral: F=0.0545, k=0.0620 "Coral"
• mitosis: F=0.0367, k=0.0649 "Mitosis"
• labyrinth: F=0.0290, k=0.0570 "Labyrinth"
• leopard: F=0.0380, k=0.0610 "Leopard" (spots & loops)
• holes: F=0.0390, k=0.0580 "Holes"
• waves: F=0.0140, k=0.0540 "Waves"

Palettes (cosine params):

1. "Biolume": deep sea → cyan glow. a=(0.02,0.05,0.08)? For cosine palette, t∈[0,1]. Let me design with dark start: use pal(t) then multiply by smoothstep(0.03,0.30,v) for substrate darkness.

   • Biolume: a=(0.10,0.22,0.28), b=(0.35,0.45,0.45), c=(1.0,1.0,1.0), d=(0.60,0.45,0.30)? Hmm I want: low t → dark teal, mid → green-cyan, high → pale mint/white.
   • Let me use known nice ones (IQ):
     • "Warm sunset": a(0.5,0.5,0.5) b(0.5,0.5,0.5) c(1.0,1.0,1.0) d(0.0,0.10,0.20)
     • "Cool": a(0.5,0.5,0.5) b(0.5,0.5,0.5) c(1.0,1.0,1.0) d(0.30,0.20,0.20)
     • "Rainbow": d(0.0,0.33,0.67)
     • "Neon": a(0.5,0.5,0.5) b(0.5,0.5,0.5) c(1.0,1.0,0.5) d(0.80,0.90,0.30) I'll define 4:
   • Biolume (teal-green): a=(0.05,0.20,0.25), b=(0.25,0.55,0.50), c=(1,1,1), d=(0.55,0.35,0.15) — at t=0: a+bcos(2πd)... let me not overthink; multiply by smoothstep for dark base anyway, and clamp. I'll pick values and trust they look decent; the relief lighting dominates.

   Actually safer approach: define palettes as 4-stop gradients (vec3 c0..c3) and mix in shader: col = mix(mix(c0,c1,smoothstep(0,.33,t)), ...). Gradient stops are much more predictable than cosine params. I'll do 4-stop gradient LUT with uniforms uC0,uC1,uC2,uC3.

   • Biolume: c0=#03110f (near black teal), c1=#0b3b36 (deep teal), c2=#1fae8f? Hmm let me pick: c0 #02080a, c1 #0a3d3f, c2 #2fd9a8, c3 #d8fff0.
   • Inferno: c0 #050208, c1 #3d0d33? classic inferno: black→purple→red→orange→yellow: c0 #04010e, c1 #5c1166? c2 #e64b35, c3 #fcffa4. 4 stops: c0 #04010e, c1 #65156e, c2 #ed6925, c3 #fcffa4.
   • Sakura (pink/cream): c0 #0a0510, c1 #5b1f4d, c2 #ff7eb6, c3 #fff3f8.
   • Lagoon (blue/white): c0 #020610, c1 #123a6e, c2 #3fb6ff, c3 #eaf7ff.
   • Ember? covered by inferno. Add "Viridis-ish": c0 #0d0887? too purple. Keep 4: Biolume, Inferno, Sakura, Lagoon.

Lighting in fragment shader:

• key light dir uniform (normalized), color warm white.
• diffuse = max(dot(n, l),0)
• spec = pow(max(dot(n, halfVec),0), 48) * specStrength
• fresnel rim = pow(1-max(dot(n, viewDir),0), 3) * rimColor
• AO: lower areas darker: mix(0.55, 1.0, hNorm)
• emissive: emis = c3 * pow(smoothstep(0.35,0.9,vV),2.0) * uGlow — feeds bloom.
• Also "front glow": highlight where gradient of v is high (pattern edges) — compute in vertex via neighbor diff magnitude, pass as vEdge; emissive boost at edges looks alive. vEdge = clamp(length(vec2(hx,hy))*k,0,1)? That's height gradient; use v-gradient instead: sample v neighbors diff. I'll pass vGrad.

Dish edge fade: r = length(vUv-0.5)*2 → alpha = 1 - smoothstep(0.96, 1.0, r); discard if alpha < 0.01? Use transparent material? Displacement + transparency sorting issues — instead darken to black near rim and keep opaque, rim torus covers the boundary. Actually simplest: make the plane slightly smaller than dish inner radius and fade color to substrate black at edge. Keep opaque.

Also add a subtle "substrate" texture: faint noise so empty areas aren't perfectly flat black — add tiny noise-based color variation + micro height noise? Keep micro color noise only (cheap hash).

Dish construction:

• relief plane: PlaneGeometry(dishD, dishD, seg, seg), rotated -PI/2 X, positioned y = dishY.
• rim: TorusGeometry(dishR, rimTube, 24, 128) rotated flat, metal standard material.
• inner wall: CylinderGeometry(dishR, dishR, wallH, 96, 1, true) with inside material dark.
• base/pedestal: CylinderGeometry(dishR1.15, dishR1.3, 0.35, 96) below, plus a wider floor plinth.
• under-glow: a soft additive radial sprite under dish? Use a circle mesh with radial gradient shader, additive, on floor. Nice.

Dust motes: 300 points in a cylinder volume, shader: slow drift via time + per-particle phase, additive, size attenuation, soft alpha circle.

Brush ring: RingGeometry(0.9, 1.0, 64) scaled to brush radius in world units, additive shader with pulse; follows raycast point on dish plane; hidden otherwise. Also small center dot.

Raycast for painting: raycast against an invisible flat plane mesh at dish height (mathematical Plane) → convert world XZ to UV: uv = (x/dishD + 0.5, z/dishD + 0.5) (after rotation mapping: plane rotated -90° about X: local x → world x, local y → world -z? Let me think: PlaneGeometry lies in XY, +Z normal. rotateX(-PI/2): y-axis → -z? Rotation about X by -90°: (x,y,z) → (x, y cos(-90) - z sin(-90), y sin(-90) + z cos(-90)) = (x, z, -y). So local (x, y, 0) → world (x, 0, -y). UV: u = (x + S/2)/S, v = (y + S/2)/S where y = -z_world. So v = (S/2 - z)/S. I'll compute uv from world: u = x/S + 0.5, v = 0.5 - z/S. I must double check orientation vs texture sampling in vertex shader: geometry.attributes.uv maps local (x,y): uv (0,0) at (-S/2,-S/2). In vertex shader I sample tSim at uv. World position of vertex (x,y) is (x, 0, -y). So world (wx, wz) corresponds to local x=wx, y=-wz → uv = (wx/S+0.5, -wz/S+0.5) = (wx/S+0.5, 0.5-wz/S). Consistent. Good.

But heights: displacement along local +Z → after rotation, local +Z → world +Y? (x,y,z)→(x,z,-y): local (0,0,1) → world (0,1,0). Yes, +Z local = +Y world.

Painting while orbiting: OrbitControls LEFT rotate; I'll set controls.mouseButtons = { LEFT: ROTATE, MIDDLE: DOLLY, RIGHT: PAN }. On pointerdown, raycast dish: if hit → begin paint stroke, controls.enabled=false; on pointerup → controls.enabled=true. Right-drag pan still works. Touch: one finger → if hits dish, paint; else orbit (OrbitControls one-finger rotate). Two-finger → dolly/pan (controls re-enabled? OrbitControls handles touches itself; when painting with one finger we disabled controls at pointerdown; two-finger gesture after paint start would be ignored by controls... acceptable).

Also erase mode: shift+drag or right-click drag on dish? Right-click is pan. Use Shift+drag erase, or 'E' toggles erase mode (button in UI too: Paint/Erase toggle). I'll add a mode toggle button + shift modifier.

Brush application: on pointermove while painting, set sim material uniforms uBrush (uv, radius in uv units), uBrushAmount (+1 paint, -1 erase), and run extra sim steps that frame (brush applies during sim steps). To make continuous strokes, interpolate between last uv and current uv in the shader? Simpler: apply brush at multiple interpolated points via multiple sim substeps: for each substep i of N, lerp uv between prev and current. Elegant: pass uBrushA (prev uv) and uBrushB (current uv) and per-substep t. I'll implement brush as segment: uniform vec4 uBrushSeg (x1,y1,x2,y2), radius; shader computes distance to segment (toroidal approx: use plain distance to segment, fine for small strokes). Each substep uses same segment — fine.

Distance point-to-segment in shader:

With toroidal wrap: compute delta with wrap for pa and ba? For simplicity, handle wrap on p-a:

and ba small anyway. Good enough.

Sim substeps per frame: slider "Speed" 1..24, default 10. Each substep = one ping-pong. At 512² with 10 steps = fine on most GPUs.

Auto-tour: presets cycle every 16s when auto enabled; F/k lerp over 2s (smoothstep). Also palette stays. Auto enabled by default? If user changes preset manually, disable auto? Keep auto ON until user picks preset or toggles off. Show "AUTO" chip active state.

Activity metric: reduction target 8x8 half float; reduction material samples 8x8 grid of sim texture (v channel) and writes; readPixels each 0.5s; avg → activity. readPixels on half float target: use renderer.readRenderTargetPixels with a Float32Array? readRenderTargetPixels requires matching type; for HalfFloatType need Uint16Array and decode — annoying. Make reduction target UnsignedByteType (RGBA8): output v average as color; read bytes. Fine — precision enough for a meter.

Audio engine:

• ctx created lazily on first gesture (pointerdown/keydown).
• Master gain → destination; mute toggle.
• Pad: 2 osc (sine, detuned) at low freq (e.g., 110 & 1101.005) → lowpass (cutoff modulated by activity: 200 + activity1200) → padGain (0.05). Plus slow LFO on gain.
• Shimmer: triangle osc at pentatonic root higher octave, very quiet, slow vibrato? Keep minimal.
• Paint plink: on paint stroke throttled (every ~90ms while painting): short triangle blip, freq from pentatonic scale based on brush uv.x, decay 0.4s, gain 0.08. Plus filtered noise "hiss" while painting? Skip hiss.
• Preset change chime: two-note pluck.
• Ambient noise: brown noise through lowpass at low gain for "room tone"? Optional; include very quiet.
• Activity → pad cutoff + shimmer gain.

HUD: title "MORPHOGENESIS", subtitle "reaction · diffusion · turing patterns". Stats panel: preset name, F/k values, activity bar.

Buttons: Pause (⏸/▶), Seed (re-splat), Clear (wipe to blank), Mode (Paint/Erase), Auto, Mute, Snap, Help (?). Keyboard: space, 1-6 presets, tab? no. p snapshot, h help, m mute, a auto, c clear, r reseed, e erase toggle, [ ] brush size.

Help overlay: table of shortcuts; toggled.

Flash div for snapshot feedback.

Loading: everything procedural, instant.

Now, adaptive quality tiers:

• high: sim 512, planeSeg 256, pr min(dpr,2), bloom on
• medium: sim 384, planeSeg 192, pr min(dpr,1.5)
• low: sim 256, planeSeg 128, pr 1 FPS monitor: EMA; check every 2s; downgrade if avg<42, upgrade if avg>57 for a while (only up to initial tier based on device? allow up to high). On tier change: rebuild sim targets + reseed + rebuild plane geometry + setPixelRatio + composer.setSize.

Note: sim resolution change reseeds — acceptable.

Resize: update camera, renderer, composer, bloom.

Let me also handle WebGL2 requirement: three r170 requires WebGL2; fine.

Grade pass shader: standard: vignette, grain, chromatic aberration, slight saturation/contrast. Copy pattern from previous demos (I know the typical implementation).

Let me write the file now. I'll be careful with GLSL (WebGL2 → three ShaderMaterial defaults to GLSL1 syntax with texture2D auto-converted; three handles texture2D → texture via preprocessor for WebGL2. Yes, three's WebGLProgram prefixes define texture2D as texture for WebGL2. So texture2D in ShaderMaterial works.)

Render target sampling in vertex shader: vertex texture fetch — supported in WebGL2. With LinearFilter on half float — fine.

One more consideration: the sim material renders via a fullscreen quad (use THREE.OrthographicCamera + PlaneGeometry(2,2) scene, standard pattern). I'll create a small helper.

Ping-pong:

Seed: seedMat renders into rtRead (and rtWrite both to be safe).

Display material uniform tSim = rtRead.texture each frame (after steps, rtRead holds latest — since swap makes rtRead the last written). Yes: after swap, rtRead is the just-written target. Set display uniform once per frame: dispMat.uniforms.tSim.value = rtRead.texture; Also reduction uses rtRead.

Brush segment uniforms: uBrushA/uBrushB, uBrushR, uBrushMode (+1/-1/0 off). When not painting, uBrushR = 0.

Paint stroke: pointermove updates target uv; each frame while painting: run substeps with segment from lastAppliedUv→currentUv; then lastAppliedUv=currentUv. Also paint on pointerdown (dot: A=B=uv).

Initial seed: random splats mode.

Clear: seedMat mode wipe (u=1,v=0 everywhere).

Preset F/k lerp: current F/k lerp toward target each frame: f += (target-f)min(1,dt2.5).

Sliders: Feed (0.01–0.09, default from preset), Kill (0.045–0.07). When user drags slider → disable auto? Changing F/k manually: set target directly and mark preset "custom". Keep simple: sliders set targets; preset chips set targets + slider positions.

Speed slider: substeps 1–24. Brush slider: radius 0.008–0.12 uv.

Height slider? Add "Relief" slider for displacement scale 0–1.5. Nice.

Camera: perspective 45°, position (0, 5.2, 7.5), target (0,0.6,0). OrbitControls: enableDamping, minDistance 3, maxDistance 20, maxPolarAngle ~1.45 (don't go under floor), autoRotate slow when idle? Add gentle autoRotate that pauses on interaction (nice touch): controls.autoRotate = true, speed 0.4; any pointerdown disables for 8s.

Tone mapping: renderer.toneMapping = ACESFilmicToneMapping; outputColorSpace default SRGB. Composer with OutputPass handles tone mapping at end. Note: when using EffectComposer with OutputPass, set renderer.toneMapping — OutputPass reads renderer settings. In r170, OutputPass applies tone mapping & color space conversion based on renderer settings. RenderPass renders scene in linear; bloom operates linear; grade pass after bloom (careful: grade in linear or post-tonemap? Previous demos put grade after bloom before OutputPass — grain/vignette in linear HDR is okay-ish. I'll follow same order: Render → Bloom → Grade → Output.

Hmm — chromatic aberration & grain after OutputPass would be more "film-like", but previous demos did grade before output; keep consistent.

Actually wait — does the grade pass need to run on HDR? UnrealBloomPass output is HDR linear. Grade applies vignette (multiply), grain (add small), CA (offset samples). Fine in linear.

Colors: background #04060a. Fog: FogExp2(0x04060a, 0.028)? With custom shaders fog needs manual handling; only standard materials get fog automatically. My relief shader is custom — skip fog or implement manually. Scene is small; skip fog. Use background color + floor gradient.

Floor: big circle radius 30, shader: radial gradient from #0b0f16 center to #04060a edge, plus subtle grid? Keep gradient + faint noise. Also receives "glow" from dish: add additive under-glow circle.

Let me now also design the relief fragment lighting more concretely:

uGlowColor from palette c3.

Also micro-noise on substrate:

Vertex shader detail — vEdge: compute gradient of v (not height):

Height from smoothstepped v.

Height function: h = pow(smoothstep(0.08, 0.5, v), 1.3) * uHeight. uHeight default ~0.55 world units (dish radius 3).

Normal: from height gradient with world scale: texel world size = S / simRes... but plane vertex grid resolution differs; using sim texel for sampling offset is right for accurate gradient. uTexel = 1/simRes. texWorld = S * uTexel. dhdx = (hR - hL) / (2*texWorld). n = normalize(vec3(-dhdx, -dhdy, 1)) in local space (local z up). Then world normal via normalMatrix (mesh rotation only, no non-uniform scale → fine).

vNormal = normalize(normalMatrix * n). normalMatrix is view-space! For lighting I want world-space normal: use mat3(modelMatrix) * n (modelMatrix includes rotation; no scale). I'll compute world pos = modelMatrix * vec4(pos,1) and world normal = mat3(modelMatrix) * n. Good.

CircleGeometry vs Plane: plane covers square; fragment discards/fades beyond r=1. The rim torus at r=1*S/2. Dish radius R = S/2 * 0.98.

Alright — also the "inner wall" cylinder: radius R, height ~0.5, open-ended, rendered BackSide dark metal; sits from y=dishY-0.05 up to rim. Rim torus at top of wall. Pedestal below.

Under-glow: circle radius R*1.6 at floor y=0.01, additive radial gradient in palette color (uGlowColor) — subtle.

Dust motes shader: standard points:

Now the UI/CSS: follow teslasphere/pyrosymphony style: dark glass panels, accent color. Accent for morphogenesis: teal/green (#2fd9a8) or violet? Biolume teal accent: --accent: #37e6b0.

Preset chips: 6 buttons with names. Palette chips: 4 small swatches (gradient backgrounds via CSS linear-gradient).

Sliders: input[type=range] styled minimally.

Stats: preset label, F/k readouts, activity bar.

Help overlay: fixed center panel with shortcut table, close on H/click.

Toast for preset name change? The stats panel shows it; add a big center fade text on preset change (nice touch): #toast div center-top, fades.

OK — audio details:

Pentatonic scale: [0,3,5,7,10] semitones over base 220 * 2^(n/12), pick by floor(x*8)%8 mapping.

Mute: master.gain → 0.

All audio start on first pointerdown/keydown (resume ctx).

Activity readback:

Every 30 frames. Cheap.

FPS adapt:

Start tier: guess by devicePixelRatio & mobile: (mobile → 1) else 2 (high). Tiers array [low, med, high] index 0..2.

applyTier(): setPixelRatio, rebuild sim RTs (new res), reseed, rebuild plane geometry (dispose old), composer.setSize, bloom resolution auto via setSize.

Snapshot: queued flag; after composer.render() in loop: if queued → toBlob download + flash.

Alright, also seed modes cycle on each Seed press: random splats → center blob → ring → symmetric (4 blobs). Implement in seed shader with uMode int and uSeed float (random each time).

Seed shader:

Hmm keep it clean: u = 1 - 0.5v; v = 0.5v? Standard seeding: v=0.5 in blob, u=0.5? Many implementations set u=1,v=0 background and blob u=0.5,v=0.25... I'll set blob: u=0.5, v=0.5 (strong kick). Works reliably.

Simplify:

Add tiny noise: v += 0.015*(hash(vUv*7.7+uSeed)-0.5) — breaks perfect symmetry, organic. Good.

GLSL loop with break on uniform int — allowed in WebGL2/GLSL ES 3.0? three ShaderMaterial compiles as GLSL ES 3.0 when WebGL2 (three converts). Dynamic break on uniform comparison is fine in ES 3.0. But three's default for ShaderMaterial: it uses GLSL1 syntax auto-upgraded; loops with non-constant break might be an issue in ES 1.0 but we're WebGL2 → ES 3.00. three r170 always WebGL2. OK. To be extra safe, use constant loop 16 and if (i >= n) continue;? continue with dynamic condition also fine in ES3. Or multiply contribution by step(float(i), float(n-1)). I'll use step() multiplier — safest and branchless.

Sim shader brush segment: as designed.

Also add "flow" — no. Keep core.

Extra wow: a slow "breathing" of dish height? No. The pattern itself is the star. Maybe add subtle environment: 2-3 floating "lantern" orbs? Skip — keep focused and clean.

One more feature for wow: pattern history trails? No — RD doesn't need it.

I think we're ready to write. Also remember meta description, title: "Morphogenesis — Turing Pattern Terrarium".

Folder: /space/demos/030-morphogenesis/index.html

Index card description draft: "A living Turing-pattern terrarium — a GPU Gray–Scott reaction–diffusion simulation blooms across a glass petri dish in real time: up to 512² cells of chemical morphogenesis extruded into a glowing 3D relief you can orbit. Paint seed chemical with your pointer (shift to erase), then watch leopard spots, labyrinths, coral fans, mitosis, holes and waves self-organize under six classic feed/kill presets with smooth parameter morphing and an auto-tour. Featuring four biolume palettes, edge-lit emissive fronts, relief shading with specular & fresnel rim, a metal-rimmed dish on a pedestal with under-glow, drifting dust motes, UnrealBloom plus vignette/grain/chromatic grade, generative WebAudio pad that brightens with pattern activity and pentatonic plinks as you paint, adaptive quality tiers, PNG snapshots, keyboard shortcuts and full touch support."

Let me write the demo file now. I'll write it in one go with the write tool. It's long (~1300 lines). Let me carefully compose.

Key uniforms list for display material:

• tSim, uTexel, uHeight, uCamPos, uTime
• uLightDir, uKeyColor, uRimColor, uGlowColor
• uC0..uC3 (palette)
• uGlow (strength), uSpec, uShininess
• uDishR (for edge fade in uv: use fixed 0.98)

Sim material uniforms:

• tPrev, uTexel, uFeed, uKill, uDu=1.0, uDv=0.5, uDt=1.0
• uBrushA (vec2), uBrushB (vec2), uBrushR (float), uBrushMode (float: 0 off, 1 paint, -1 erase)

Seed material uniforms: uSeed, uMode.

Grade shader uniforms: tDiffuse, uTime, uVignette, uGrain, uCA, uSat.

Let me write the code.

Also careful: OrbitControls import; EffectComposer; RenderPass; UnrealBloomPass; ShaderPass; OutputPass.

For RoomEnvironment for metal rim reflections: import RoomEnvironment, PMREMGenerator. scene.environment = pmrem.fromScene(new RoomEnvironment()).texture. This affects MeshStandardMaterial (rim, pedestal). Keep environmentIntensity low (r170 supports scene.environmentIntensity? r163+ yes). Set 0.35.

Note: renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference:'high-performance' }). With composer, MSAA doesn't apply to render targets; antialias true affects default framebuffer only — composer renders to RT... EffectComposer in newer three uses HalfFloatType RT without MSAA. Edges may alias; bloom + grain hide it mostly. Could use composer with multisample: renderTarget samples — EffectComposer creates RT with samples=4 if WebGL2? In recent three, EffectComposer default renderTarget has samples: 4? Not by default. I can set composer.renderTarget1.samples = 4? Simpler: create composer with a custom RT with samples: 4:

Hmm, UnrealBloomPass internally uses its own RTs. MSAA on the base RT helps geometry edges. Previous demos — did they bother? Probably just default. I'll set samples: 4 for crispness; cost is fine.

Actually careful: EffectComposer(renderer, renderTarget) — the provided RT is used as read/write buffer template (it clones it). samples property clones fine. OK.

Sizing: on resize, composer.setSize(w,h) handles RT resize.

Bloom: new UnrealBloomPass(new THREE.Vector2(w,h), strength 0.75, radius 0.55, threshold 0.6).

Grade pass: custom ShaderPass.

OutputPass last.

renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 1.1.

Now — the painting raycast plane: use THREE.Plane(new Vector3(0,1,0), -dishY) and ray.intersectPlane. dishY = height of relief plane (top of pedestal). Let me set: floor y=0; pedestal from 0 to 1.0 (cylinder h=1.0); dish plane at y=1.02; rim at y=1.30; wall between. Relief displacement up to +0.55 above plane.

Brush ring hovers at y = 1.02 + currentHeight? Just hover at 1.06 flat — fine, or raycast actual displaced surface? Flat is fine visually if ring slightly above max height? Ring at plane level + small offset; when pattern tall, ring may intersect relief — acceptable (it's a holographic guide). I'll place ring at y=1.06 and also add a vertical fade cylinder? Keep ring.

Camera near 0.1 far 100.

Dust motes: 260 points within radius 8, y 0..6.

Now the controls bar layout: groups:

• Presets: 6 chips (Coral, Mitosis, Labyrinth, Leopard, Holes, Waves)
• Palettes: 4 swatches
• Sliders: Feed, Kill, Speed, Brush, Relief
• Buttons: Pause, Seed, Clear, Erase(toggle), Auto, Mute, Snap, Help

That's a lot for one bar — use two rows via flex-wrap. OK.

Stat panel top-right: PRESET name, F, k values, ACTIVITY bar, FPS? show tier? Show "QUALITY high/med/low" small. Nice.

Toast center: preset name big fade.

Help overlay content: shortcuts table + how to paint.

Let me now write the whole file. I'll aim for clean, commented code.

Also remember: maximum compatibility for readRenderTargetPixels on UnsignedByteType RGBA — fine.

One concern: LinearFilter on HalfFloat RT — core in WebGL2. Good.

Another: sim uses RepeatWrapping — set on RT texture: rt.texture.wrapS/T = RepeatWrapping (via options).

Let me write the JS structure:

Let me write out all GLSL carefully.

Sim fragment (GLSL1-style, three converts):

dt=1 folded. Note: with these weights, stability requires dt<=1; fine.

Wait — one subtlety: the classic Gray-Scott uses Du=1.0, Dv=0.5 with these laplacian weights and dt=1. Yes.

Seed shader:

Mode 4 = wipe: u=1, v=0: handle in JS with separate simple shader? Add else if (uMode == 4) { blob=0; } — then u=1,v=0+0? v = 0.50 + 0.012n*0 = 0. Good — wipe works naturally with blob=0.

Wait for mode 4, the if-chain: mode 4 hits none → blob=0 → wipe.

Display vertex shader:

Need uPlaneSize uniform.

Display fragment:

Since this is HDR-ish (glow pushes >1), bloom threshold 0.6 catches glowColor highlights.

Floor shader (radial gradient + noise):

CircleGeometry has uv covering unit square? CircleGeometry uvs are in [0,1] mapped from unit circle — yes uv = position/radius*0.5+0.5. Good.

Under-glow (additive):

Additive blending, depthWrite false.

Dust points shader:

Additive.

Brush ring: RingGeometry(0.86, 1.0, 64), shader additive with pulse:

Additive. Scale ring mesh to brush world radius = uBrushR * planeSize. Position at hit point, y = dishY + 0.03. Rotate flat (-PI/2 X).

Erase mode color: reddish; paint: accent.

Grade shader:

Audio engine — write carefully:

Pentatonic: base 196Hz (G3), scale semis [0,2,4,7,9,12,14] — major pentatonic; freq = 196 * 2^(semi/12). Index from brush u: idx = floor(u7)%7 plus octave from v? Keep idx = floor(u7).

Plink: osc triangle → gain env: 0 → 0.12 (5ms) → exp decay to 0.0001 over 0.5s. Also a tiny bit of detuned second osc? Keep one.

Chime on preset change: two plinks (root & +7 semis) spaced 90ms.

Pad: osc1 sine 98Hz (G2), osc2 sine 982.005? Detune: osc2.frequency = 981.008. Both → padFilter (lowpass, freq 260, Q 0.8) → padGain 0.05 → master. LFO: osc 0.06Hz sine → lfoGain 0.02 → padGain.gain (base 0.05, swings ±0.02). Shimmer: osc triangle 392Hz → shimmerGain 0.0 → padFilter input? Route shimmer → shimmerGain → padFilter. setActivity: padFilter.frequency.setTargetAtTime(240 + a1500, ...), shimmerGain.gain.setTargetAtTime(0.002 + a0.018,...).

Noise: create 2s buffer of brown noise (integrate white, leak), loop → lowpass 220 → noiseGain 0.014 → master.

Master: gain 0.9 → ctx.destination. Mute toggles master gain 0/0.9 with setTargetAtTime.

Activity: computed every 30 frames → audio.setActivity if started.

UI wiring: standard getElementById addEventListener.

Preset application:

F/k current lerp toward targets each frame; sim uniforms set from current.

Sliders input: targetF = parseFloat(feedSlider.value) etc; presetIndex = -1 (custom); chips deactivate.

Auto tour: if auto && now - lastPresetChange > 16s → applyPreset((presetIndex+1)%len). If presetIndex=-1 → start at 0.

Pause: running flag; when paused, skip sim steps (display still renders, orbit works).

Seed: seedMode = (seedMode+1)%4; runSeed(seedMode).

Clear: runSeed(4) (wipe).

Erase toggle: eraseMode bool; button active class; brush ring color changes.

Snapshot: queue flag; after render → toBlob.

Help: overlay div toggle.

Keyboard: as listed.

Pointer events:

OrbitControls listens on the same element; setting controls.enabled=false at pointerdown time — OrbitControls already received pointerdown before our handler? Order of listeners: OrbitControls attaches its own; ours added after → controls processes first. If controls.enabled=false set after its pointerdown, it may still rotate on move. To avoid conflict: set controls.enabled=false synchronously in our pointerdown (same event tick) — OrbitControls checks this.enabled in onPointerMove? It checks enabled at pointerdown and ignores move if disabled? Looking at OrbitControls source: onPointerMove → if (this.enabled === false) return; handleMouseMoveRotate etc. But state was set at pointerdown... In onPointerMove it checks enabled first — yes: if (scope.enabled === false) return; at top of onPointerMove. So disabling at pointerdown (after controls' handler ran) still prevents rotation on subsequent moves.

But wait — our handler must run after controls' pointerdown for this to matter... actually if our handler runs FIRST and disables, controls' pointerdown sees enabled=false and returns immediately — even better. Either order works because onPointerMove checks enabled.

One catch: OrbitControls captures pointer (setPointerCapture) at pointerdown. Fine.

Re-enable on pointerup. Also on pointercancel.

Touch: same flow (pointer events unify). Two-finger: second pointerdown while painting → we should stop painting and let controls handle? OrbitControls with touches: ONE: ROTATE, TWO: DOLLY_PAN default. If painting with one finger and second finger lands, controls gets pointerdown but enabled=false → ignored; after lift, re-enable. Acceptable.

Hover ring: on pointermove (not painting), raycast; show/hide ring.

Also idle autoRotate: controls.autoRotate = true; on any pointerdown → autoRotate=false, idleTimer=now; in loop if now-idleTimer>10s → autoRotate=true.

FPS/tier logic as planned.

Resize handler.

Toast: div center top; showToast(text) sets text, opacity 1, timeout fade.

Now the stats: update preset name label, F/k readouts (current lerped values, 4 decimals), activity bar width, quality label on tier change.

Seed initial: mode 0 random splats.

Also on preset change maybe reseed? No — patterns morph live; that's the magic.

Edge case: user drags Feed/Kill to unstable region → pattern dies (all blank). Provide Seed button to restart. Also maybe gentle "life support": if activity < 0.002 for a while and running → auto reseed? Nice touch: auto-reseed when pattern dies (activity near zero for 6s) with toast "reseeded". I'll add it (only when running && autoReseed). Good for robustness.

Actually careful: some presets (waves) have low v average? Waves F=0.014 k=0.054: solitons — v moderate. Blank pattern → avg v ~ 0. Threshold 0.004 for 6s → reseed. Also full-screen uniform v (rare) → activity high but static... skip that case.

Now, the plane geometry rebuild on tier change: dispose old geometry, create new with seg count, assign to mesh.

Sim RT rebuild: dispose old RTs, create new, runSeed(current seedMode). Also update uTexel uniforms (sim + display + reduction unchanged).

Reduction material:

Render into 8x8 RT with UnsignedByteType. readRenderTargetPixels into Uint8Array(884). Average.

Timing: every 30 frames, render reduction then read (sync stall but tiny).

Alright, also add device detection for start tier:

TIERS = [ {name:'low', sim:256, seg:128, pr:1}, {name:'med', sim:384, seg:192, pr:1.5}, {name:'high', sim:512, seg:256, pr:2} ].

pr: renderer.setPixelRatio(Math.min(devicePixelRatio, pr)).

Plane size: S = 6.0 (dish diameter), dish radius R = 2.94 (pattern fades by r=0.98). Rim torus radius 3.02, tube 0.09. Wall cylinder r=3.02, h=0.42, top at y=dishY+0.38? Let me set dishY (relief plane) = 1.05. Wall from y=0.98 to 1.40 (h=0.42, center 1.19). Rim torus at y=1.40. Pedestal: cylinder r_top=3.25, r_bottom=3.6, h=0.55, top at 0.98 → center 0.705. Base plinth: cylinder r=4.2, h=0.18, center 0.09. Floor at y=0.

Hmm pedestal top radius 3.25 > wall 3.02 → pedestal top edge visible as ledge — good look.

Materials: MeshStandardMaterial({color:0x1a1d24, metalness:0.85, roughness:0.35}) for rim; pedestal darker 0x101218 metalness 0.6 roughness 0.5.

Lights for standard materials: dir light (0.6, from (4,8,3)), ambient dim, plus point light accent from below-front? With environment (RoomEnvironment) intensity 0.3.

scene.environment via PMREMGenerator; scene.environmentIntensity = 0.35 (r170 supports).

Camera: fov 42, pos (0, 4.6, 8.2), target (0, 1.15, 0).

OK — also controls.maxPolarAngle = 1.52 (just under horizon), minDistance 3.5, maxDistance 18, enableDamping 0.06, autoRotateSpeed 0.5.

Now write everything. Also the help overlay + flash + toast CSS.

Let me count keyboard shortcuts:

• Space: pause/run
• 1–6: presets
• Q: palette cycle (P taken by snapshot? previous demos used P for snapshot... I'll use: P snapshot, C clear, R reseed, E erase toggle, A auto, M mute, H help, Q palette cycle, [ ] brush size, arrows? skip)

Buttons: ⏸/▶ pause, 🌱 seed, 🧹 clear (use text "Clear"), ✏️/🧽 erase toggle, AUTO, 🔊 mute, 📷 snap, ? help.

Use text labels mostly (previous demos used text + some emoji).

Time to write. The file will be big; I'll write it with read_write_file_in_shell_environment in one write call. Then extract JS and node --check it.

Let me carefully write the entire HTML now.

Also — title: "Morphogenesis — Turing Pattern Terrarium". Accent color: #3ce8b0 (mint).

For the index.html update, insert after <!-- New demos are added here -->... wait, actually looking at the grep output, the newest demo (029) appears right after the blueprint badge/header. Let me check the exact structure around line where demo cards start.

The insertion point is line 99 (<!-- New demos are added here -->), new cards go right after. Now let me create the demo. I'll write the full index.html for 030-morphogenesis.

Let me write the complete file now. I'll be thorough and careful with the code.

Let me proceed efficiently. Create the directory and write the file in one go.

********************************************************************************************************************************************************************************************************************************************ow.

********************************************************************************************************************************************************************>`.

Syntax is fine. Now let me review the code for potential runtime issues:

1. simQuad.material = null initially — initial new THREE.Mesh(geo, null). Mesh with null material: three will fail rendering until material set. But we set material before first render in runSeed — runSeed(0) is called at startup before animate, and sets simQuad.material = simMat at the end. OK.

2. dispMat.uniforms['uC' + j] — uniform names uC0..uC3, correct.

3. gradePass.uniforms.uTime — ShaderPass wraps material: ShaderPass exposes .uniforms getter? In three r170, ShaderPass has this.uniforms = shaderMaterial.uniforms? Let me check: ShaderPass constructor accepts (shader, textureID). If shader is a ShaderMaterial instance, this.material = shader; this.uniforms = shader.material? Actually ShaderPass code:

Wait — I need to verify: does ShaderPass with a ShaderMaterial set this.uniforms? In recent three versions:

Yes I believe that's right. gradePass.uniforms.uTime works. Actually let me double check r170 source... I recall:

Yes. Good.

4. In the grade fragment shader, float l = dot(col, vec3(...)); col = mix(vec3(l), col, 1.06); — OK.

5. new THREE.WebGLRenderTarget(innerWidth, innerHeight, { type: THREE.HalfFloatType, samples: 4 }) — passed to EffectComposer. EffectComposer clones it? It uses it as rt1 and clones for rt2. Fine.

Wait — in newer three (r152+), the default Framebuffer for EffectComposer is HalfFloatType already. Providing custom with samples=4 is fine. Note: MSAA samples in WebGL2 render targets — supported.

6. RingGeometry(0.5, 0.5, 64) — innerRadius == outerRadius = 0.5 → degenerate (zero-width ring)! That's a bug — RingGeometry with equal radii produces zero-area triangles. I use the shader band based on uv radius so I actually want a full disk, with the shader drawing the ring band. Use CircleGeometry instead? CircleGeometry uvs: computed from position; uv = (pos/radius)0.5+0.5 over the circle → uv spans [0,1]. Yes CircleGeometry(1, 64) gives uv covering [0,1]² centered 0.5. My shader expects distance from uv center — for CircleGeometry the uv mapping is exactly what I want. But wait — RingGeometry uv: RingGeometry maps uv planar across the ring's bounding box: uv = (x / outerRadius) * 0.5 + 0.5. For ring geometry the uvs also map to bounding square, so uv center = ring center. With inner=outer the geometry has zero-area triangles → nothing rasterizes! Must fix: use new THREE.RingGeometry(0.0001, 1, 64)? Better: CircleGeometry(1, 64). Both ring geometry uv mapping: for RingGeometry, uv.x = (vertex.x / outerRadius + 1) / 2 — covers [0,1]. For scale: brushRing.scale.set(s, s, 1) with geometry radius 1 → ring radius s world units? CircleGeometry radius 1 scaled by s → visible radius s. Brush world radius = state.brush * DISH_SIZE. Hmm: brushR in uv units; world radius = brushR * DISH_SIZE (since uv 1 = DISH_SIZE world). s should be brush * DISH_SIZE, and I wrote state.brush * DISH_SIZE * 2 — diameter. Ring band drawn at r≈0.89-0.98 of the geometry → so visible ring radius ≈ 0.93s. To match brush radius: s ≈ brush*DISH_SIZE / 0.93. Minor visual mismatch; acceptable but better to fix.

Fix: geometry = CircleGeometry(1, 64), scale s = state.brush * DISH_SIZE — then ring band at 0.93s. Hmm I want the visible band at exactly the brush edge. I could adjust the shader band positions, or just accept near-enough. Let me set scale = brush * DISH_SIZE / 0.9 so band sits at brush edge. Actually the brush influence smoothing is smoothstep(uBrushR, uBrushR0.3) so edge ~ uBrushR. Ring at ~0.93s where s = brushDISH → mismatch 7%. I'll set s = state.brush * DISH_SIZE / 0.93. And band: smoothstep(0.78,0.93,r) * smoothstep(1.0,0.96,r) → peak ~0.945. So scale = brush * DISH / 0.945.

Let me simplify: change to CircleGeometry(1,64) and scale = state.brush * DISH_SIZE / 0.94.

7. CircleGeometry for floor: floor under everything at y=0 — fine. But floor is at y=0 and plinth base at y=0.09 center with height 0.18: plinth spans y=0 to 0.18 — OK sits on floor.

Pedestal: center y = DISH_Y - 0.36 = 0.69, height 0.6 → spans 0.39..0.99. Hmm: pedestal floats? spans 0.39..0.99 — gap between plinth top (0.18) and pedestal bottom (0.39) → floating pedestal! Need to fix heights:

• plinth: h 0.18, center 0.09 → 0..0.18
• pedestal should extend from floor to dish: center 0.69 spans 0.39..0.99 — gap visible from side. Ugly. Fix: make pedestal taller: height = DISH_Y - 0.05 (≈1.0), center (DISH_Y-0.05)/2 ≈ 0.5. Then pedestal spans 0..1.0 — reaches floor, overlapping plinth region; plinth wider. Fine: pedestal spans 0..1.0, plinth 0..0.18 wider radius — good, ledge structure.

Let me recompute: DISH_Y=1.05. pedestal height 1.02, center 0.51 → spans 0..1.02. Wall spans DISH_Y+0.13±0.21 = 0.97..1.39. Rim at DISH_Y+0.34=1.39. OK.

Also underGlow at y=0.185 vs plinth top at 0.18 — z-fighting with plinth top? Plinth radius DISH_R+1.3..1.5 (4.3..4.5); underGlow circle radius DISH_R+1.6 = 4.6. Overlap on plinth top surface → additive glow at 0.185 vs plinth top 0.18 — 5mm offset, fine (no z-fight at this scale; depth precision OK at close distances).

Actually underGlow radius 4.6 > plinth outer radius ~4.5 → extends just past plinth onto floor — nice halo around base. Good.

8. Relief plane: square 6x6, rim inner radius DISH_R+0.06=3.06; pattern fades at r=0.98 uv → 2.94 world. OK within rim.

9. Raycast plane at DISH_Y: the relief floats 0..relief above — brush hits approximate. Fine.

10. uvFromEvent clamps u,v to [0,1] when r>1.02 returns null... For painting near edge — fine.

11. Sim: brush wrapDelta etc OK. Note initial materials: runSeed uses simQuad.material = seedMat then resets to simMat. First animate frame: render uses material properly.

12. moteMat.uniforms.uTime.value = now — now = performance.now()/1000 seconds big value; sin functions fine.

13. applyPreset(0, false) before chips exist? Chips are created above in UI section (created before applyPreset call — yes, UI section runs first). OK.

14. state.seedMode cycles 0..3 on Seed press; auto-reseed cycles too. runSeed(4) = wipe.

15. Potential issue: simMat.uniforms.uTexel initialized with 1/simRes at creation — good; recreates in applyTier.

16. Activity: reading render target pixels of UnsignedByteType RGBA — readRenderTargetPixels signature (target, x, y, width, height, buffer, activeFace). OK.

17. gl_PointSize division by mv.z — fine.

18. renderer.readRenderTargetPixels each 30 frames — stall acceptable.

19. Camera near rim with maxPolarAngle 1.52 (~87°) — nearly horizontal, fine; maxDistance 20 < far 120 OK.

20. On resize, bloom.setSize? composer.setSize resizes passes including bloom (pass.setSize called). Bloom pass needs setSize — composer.setSize calls pass.setSize(w,h) for each pass. Yes.

21. controls.autoRotate = true initially + idle re-enable logic — OK.

22. Missing: renderer.domElement.addEventListener('pointerleave'...) sets hoverUv null — endStroke on pointerup outside canvas? pointerup on canvas only; if pointer released outside, pointercancel/up still fires due to pointer capture by canvas? We don't setPointerCapture; but OrbitControls does capture on the dom element... OrbitControls calls domElement.setPointerCapture at pointerdown (it does in recent versions). So pointerup fires on canvas. OK.

23. In uvFromEvent: uses raycaster.ray.intersectPlane — returns Vector3 or null. OK.

24. new THREE.UnsignedByteType — exists as UnsignedByteType. Yes.

25. THREE.MathUtils.clamp import via THREE namespace. OK.

26. Check camera.position assigned to uCamPos uniform value — uniform holds reference to camera.position vector: uCamPos: { value: camera.position } — reference, updates automatically since camera orbits the same Vector3 object.

27. In DISP_VERT: uses mat3(modelMatrix) — fine in GLSL1-style converted to ES3.

28. In DISP_VERT I used uniforms but there might be precision issue mat3(modelMatrix) — OK.

29. simScene render: uses Mesh with ShaderMaterial — camera Orthographic — fine.

30. Grade pass is a ShaderMaterial with uniforms tDiffuse: ShaderPass sets textureID 'tDiffuse' and assigns readBuffer texture to material.uniforms[textureID]. Since I passed material instance, this.uniforms = shader.uniforms — render sets this.uniforms[this.textureID].value = readBuffer.texture. OK.

31. TorusGeometry(DISH_R+0.06, 0.085, 24, 128) rotated x=PI/2 → lies flat (torus default in XY plane, rotate 90° about X → lies in XZ plane). Yes.

32. One concern: half-float sim with LinearFilter requires no extension in WebGL2, correct (16F filterable core). Renderable requires EXT_color_buffer_float — near-universal; fallible fallback absent but acceptable (previous demos use float buffers too; e.g. koi-pond used float buffers). OK.

33. renderer.setRenderTarget(rt) in runSeed loops both targets writing seeded value — good.

34. Plink uses exponentialRamp from 0.0001 - OK.

35. audio.chime calls this.plink — fine with timers.

36. $('btnErase').click() from keyboard works.

37. Escape closes help? H toggles. Fine.

38. A subtle issue: if (k === ' ') — space key with preventDefault. Fine.

39. At startup showToast('Morphogenesis', 'paint on the dish to seed life').

40. state.lastInteraction only updated on pointerdown — scroll wheel (zoom) doesn't update; autoRotate might re-enable while zooming via wheel. Minor.

41. applyPreset sets $('stPreset') text. OK.

42. In markCustom() auto disabled — reasonable.

43. activity bar style — $('stActivity').style.width — element is id stActivity. OK.

Missing: measureActivity called when frame%30===0 — at frame 0? frame starts 0? frame++ first, so frame%30===0 at frame 30. Fine.

Also note: simStep sets simQuad.material = simMat each call — fine.

Potential issue in runSeed: I render into both rtRead and rtWrite — then simQuad.material = simMat. OK.

Now the RingGeometry bug (item 6) is a real geometry issue — must fix to CircleGeometry.

Also pedestal floating (item 7) — fix.

One more check on DISP_VERT normal computation: uPlaneSize * uTexel.x — uTexel.x = 1/simRes; sampling offsets in uv of one texel; world offset = planeSize/simRes. Correct.

Default relief slider step 0.05, value 0.7 → fine; dispMat uniform uHeight updated per frame from state.relief.

Light dir for pedestal (standard material) uses scene directional light; custom display shader uses uLightDir (0.35,0.85,0.4). Fine.

Let me also double-check the F/k slider ranges vs preset values: feed slider 0.010..0.090 covers all preset f (0.014..0.0545). Kill 0.040..0.073 covers 0.054..0.0649. Good.

Auto-tour order: (presetIndex+1)%len — if presetIndex=-1 (custom) → 0. Good.

One more consideration — state.speed max 22 substeps per frame ≈ heavy on mobile at 512² + full render. Mobile starts tier med (384²) fine.

Fix list:

1. brushRing geometry → CircleGeometry(1, 64); scale formula adjusted: s = state.brush * DISH_SIZE / 0.94.
2. pedestal → spans from floor.

Also pedestal constructor: I'll change to CylinderGeometry(DISH_R+0.3, DISH_R+0.65, 1.02, 96) position y=0.51.

Let me apply these three edits.

******************************************************************le.

**********************************************************************************************************************************************************************************************************************************************************`).

The index now has 35 "demo-card" occurrences — that includes the CSS class definitions (.demo-card appears in CSS ~4 times: .demo-card, .demo-card:hover, .demo-card .num, .demo-card h2, .demo-card p = 5 occurrences) plus 30 cards = 35. Correct: 30 demo cards now.

Let me do a final quick verification: re-run node --check on the updated demo file, and verify the index structure around line 99-110.

Everything is in place:

1. ✅ Demo 030-morphogenesis created at /space/demos/030-morphogenesis/index.html (1252 lines)
2. ✅ JS syntax validated with node --check
3. ✅ Fixed bugs found in self-review (degenerate RingGeometry, floating pedestal, brush ring scale)
4. ✅ Index updated with new card at the top of the list
5. ✅ Index structure verified

Task complete. Call _success.