Cymatics Demo Creation and Index Update

Let me check the current state of the demos folder to see what's there, and then I'll create a new impressive demo. Let me first look at the demos folder and the index page.

I have 26 demos. The task says "Wake up and do as you please." So I should create a new demo (027) and update the index. Let me look at how the index is structured around the top cards (demo 026, etc.) so I can insert the new one properly.

Let me see the middle part of the index where demo 026 card is.

Now I understand the structure. I need to:

1. Create a new demo 027-<name>/index.html — something impressive and different from existing demos.
2. Update the index with a card for the new demo.

Existing demos cover: spinning cube, galaxy, mandelbulb, fluid, gravity sandbox, black hole, audio visualizer, endless runner, sailing ocean, deep sea bloom, physarum, falling powder, clockwork gears, neon rain, aurora, skitter (bugs?), coral, threshold, attractors, murmuration (flocking birds), terraforge (erosion), cloudsea (volumetric clouds), frostline (frost), koi pond, ferrofluid, synchrony (fireflies).

What would be a fresh idea that's not covered? Ideas:

• Origami / paper folding simulation
• Capillary/caustics underwater
• Space elevator / orbital mechanics
• Clock/astrolabe
• Tide pools
• Lens/telescope
• Glassblowing / refractive glass
• Lava lamp / metaballs (ray-marched metaballs with marching?) — METABALLS! Ray-marched metaballs could be cool but maybe similar to mandelbulb.
• Dendritic growth / lightning storm
• Circuit board growth
• Weather system / storm chaser tornado simulator! A tornado simulator with debris — that's cool.
• Star chart / constellation
• Zeppelin/airship
• Vortex / whirlpool
• Ink in water (fluid) — covered.
• Cymatics (Chladni patterns) on a vibrating plate — nice! Sound-driven sand patterns. Audio synthesis + Chladni. Could be neat.
• Moss/spore growth
• Solar system simulator — done-ish (gravity sandbox)
• Bridge / tensegrity
• Marble run / kinetic machine — a giant kinetic sculpture / rolling ball machine could be fun with physics. But physics is complex.
• Ice crystals
• Tornado with instanced debris in a stylized storm scene — "Supercell". That'd be visually impressive.
• "Lumenarium" - deep sea lanternfish
• Caustics swimming pool
• "Glyphborn" - procedural typography
• Bee swarm / hive
• Spider web + rain
• "Whistle" wind chimes
• Ant colony / sand pile
• Actually: rainstick / marble machine or grand fountain?

Let me think about what is both technically impressive and feasible in a single HTML file: A tornado/supercell simulator with:

• Custom GLSL funnel cloud shader (noise-swirled cylinder)
• Instanced debris particles swirling
• Rain shaft with GPU particles
• Lightning bolts (procedural generation of bolt meshes)
• Storm sky with shelf cloud
• Terrain with trees that bend
• WebAudio wind/thunder

Alternatives similar-ish to cloudsea. Clouds are covered (cloudsea). Hmm.

What about an orbital ring system / rocket flight? "Azure Odyssey" is sailing. "Event Horizon" is black hole.

What about a weather lab / tornado in a jar? Hmm.

What about cymatics? A Chladni plate demo: sand particles on a vibrating plate settle into nodal patterns as you change the frequency. Combined with synthesized tones (WebAudio oscillators) — you literally hear the frequency you see. Plus bloom, particles, a plate rendered with nice materials. Tapping modes (m,n) changes patterns. This is genuinely distinct and cool. But a lot might be 2D-ish; 3D plate tilt with camera orbit. Could be nice but maybe a bit limited visually.

What about a tornado — dynamically swirled funnel with noise displacement, instanced debris, lightning, driving rain, terrain trees bending, barn/farmhouse, doppler-like HUD? Distinct from cloudsea (which is about clouds over sea). But maybe similar-ish theme.

What about origami crane folding? Geometry morphing; hmm.

What about a procedural city at night with rain? Neon rain is rain. Hmm.

What about bubble chamber / iridescent soap bubbles? Could be pretty cool. Ray-marched? Soap film interference colors with thin-film interference in shader, instanced floating bubbles popping, a blowing wand? "Iridescence" demo. Thin-film interference shader is a classic wow effect. Combined with metaball-ish merging? Bouncing bubbles, moisture. Hmm.

What about "Starwheel" / orrery — celestial clockwork device. Clockwork nebula already covers clockwork.

What about dandelion field / seed dispersal? That's gentle.

What about lava dome / volcanic eruption? pyroclastic particles, lava shader, night scene. That's pretty cool: "Caldera". Lava fountains, smoke, glow, embers, rumbling audio. Procedural eruption with particles, glowing lava flows down a cone, bloom... That's distinct.

What about tide — moon causing tidal bulge? Meh.

I think the Chladni cymatics plate with live synthesized sound would be beautiful and unique: but let me weigh it against a lava/volcano. The existing sonic reactor used FFT; but cymatics is physical sound-driven patterns, physically satisfying.

Actually, let me do something even more magical: "Glasswing" — a kaleidoscope? Hmm.

Another idea: "Tidepool" similar to koi.

Or aerobatic kite flight? Meh.

What about "Whirlpool" with floating flotsam? Similar to fluid.

What's missing from the collection which is a classic wow demo: water caustics in a pool; PBS glass with refraction; volumetric god rays; portal rendering; tessellated terrain (done); soft-body physics — hmm soft body! A soft-body jelly/blob physics sandbox could be cool: mass-spring jelly cubes you can grab and fling, on a glossy floor, with nice lighting. Could be fun. But writing robust verlet softbody in a file is doable.

Wind-harp garden: giant instrument strings + particles?

Let me pick the Cymatics demo — but in a grander form: "Cymatics Lab" — a copper/brass plate with sand particles, driven by real synthesized oscillators; choosing harmonics morphs patterns; drag to sprinkle sand; bass bloom; camera orbit; HUD with frequency; the particles form crisp Chladni lines; bloom on vibration; generative audio which can be toggled; presets (integer ratios). Particles update on CPU? With ~20k particles it might be okay if we keep it cheap (no integration: we directly move particles to nodal lines via potential). Actually classic approach: particles are pushed by wave amplitude away from high amplitude regions; they settle at nodes. Compute on GPU with a texture or CPU. CPU with 10-15k particles per frame doing a cos(mx)cos(ny) computation — fine.

Actually let's do GPU-based update? Simpler to do CPU compute per frame on typed arrays, single loop over ~15k particles with a few trig calls — okay in JS? cos(mx)cos(ny) with precomputed? Could be fine (15k × few ops). We can reduce particles on mobile.

Hmm, but does it reach "wow"? The visual is a shimmering disk of sand with golden bloom patterns. With good lighting, bloom, and sound — could be quite mesmerizing. Plus a live rendered spectrum/waveform ring maybe.

Alternative with bigger wow: "Supercell" tornado simulator. Let me sketch:

• Funnel: a cylinder-ish geometric mesh (custom BufferGeometry tube with varying radius), with a custom shader: swirling fbm noise, fresnel, translucent gray-blue, spinning UV. Or a stack of rings with debris dust. Add instanced dust/debris particles in a spiral flow field (GPU? CPU with a few thousand particles orbiting).
• Terrain: simple plane with grass-ish texture, a barn (procedural box+roof), trees (instanced cones+bend in shader), fence lines.
• Sky: gradient + dark rolling cloud texture (fbm in screen-space), lightning that randomly flashes, illuminating clouds and funnel, plus thunder (WebAudio noise).
• Rain: instanced slanted streak particles.
• Controls: touch the funnel to drag it across the terrain (it follows pointer); strength slider; cow? 😄 — add a flying cow? A classic twist: instanced debris includes boards, fence posts, hay bales — tumbling.
• Audio: wind noise + thunder + low rumble; maybe sirens.

That's quite rich. It's distinct from cloudsea (volumetric march over sea) — here the funnel is a sculpt shader-mesh and gameplay-ish dragging, with debris physics. Honestly, similar theme though. The index has cloudsea... I'd rather pick a whole different topic to keep the collection varied.

What about "Soaphall" soap bubbles? Sim: hundreds of instanced spheres float upward, thin-film iridescent shaders with fresnel; pop on click with droplet burst; breeze; a child-friendly vibe. Good art but mild.

What about "Logo fountain / pendulum waves"? A pendulum wave machine: 15 pendulums with tuned periods creating stunning interference patterns, with chrome balls, spotlighting, museum vibe — beautiful, easy physics, plus harmonic audio chimes. "Pendulum Wave" — it's a classic mesmerizing sculpture. But visually maybe limited.

What about "Lumen Reef" — bioluminescent plankton seas: similar to koi/abyssal.

What about "Observatory" star dome / telescope: constellation lines, planets... ?

What about "Crystals" — growing crystal clusters (like frostline but 3D gem growth): procedural amethyst geode generator — cluster crystals grow on a rock shell, sparkle with internal refraction-ish shader. Hmm.

What about Impact/asteroid crater? ok.

Let me decide: 027 — "Cymatics" (Chladni lab). Wait — one more candidate that might be a crowd-pleaser and modern: "Polyrhythm" — a musical bouncing-ball sequencer, very popular style (like those TikTok satisfying loop videos): balls bounce on platforms in sync loops producing rhythms with synthesized audio; each hit spawns ripple/bloom; camera slowly orbits; controls for tempo and patterns. It's a game-ish instrument. Existing "sonic reactor" is audio FFT visualization. "Polyrhythm" is a playable kinetic instrument. Hmm.

I think I'll go with the tornado / storm_intercept idea after all... no wait, decided: do Cymatics. Actually let me search my memory of trending Three.js demos — one strong candidate not yet covered: Wireframe globe day/night with flights? No. L-system 3D plants? Not yet done! Frostline was crystal; terraforge has trees. But an interactive procedural garden of L-system plants/trees could be pretty: you click to sow seeds, trees grow branching fractals, wind, fireflies. Hmm.

Another classic: Rubik's cube solver / twisty puzzle — popular, interactive. But maybe too toy-like.

Solar flare / sun surface shader: plasma granulation fbm; prominences... similar-ish to core shaders.

"Kelvin's Wake" fluid? covered.

OK here is my decision: I'll build "Stormglass" — a tornado sandbox, no wait...

Let me reduce indecision with actual design criteria: biggest wow-per-LOC with something we haven't done. Candidates:

1. Tornado sim — rich visuals, but overlaps cloudsea/wind stuff.
2. Cymatics — unique concept, elegant, physically-grounded, complements audio lineage (sonic reactor).
3. Soap bubbles — pretty, mild.
4. Pendulum wave — elegant, mild.

I'll choose Cymatics. Title: "Cymatics" — a mesmerizing copper plate where sand organizes itself into sacred-geometry patterns as synthesized pure tones vibrate it; you choose (m,n) modes; sand dances at antinodes; bast-glow; particles settle in lines; bloom; orbit cam; HUD with live frequency; presets; a gentle masterful visualization of Chladni figures.

Design details:

• Fullscreen canvas, dark studio.

• A copper/bronze circular plate rendered as a slightly-bowl (lathe) geometry with rim, on a stand, lit by spotlights; copper env reflection.

• Sand: InstancedMesh of tiny granule spheres (or Points with custom shader) arranged in disc; physics: each granule has velocity; wave field A(x,y) = J(m) kn stuff; for circular plates Chladni uses cos(m*θ)*J? Simpler: use square-ish modes on the circle: amplitude = cos(m φ) cos(n φ)... Actually the classic flat-plate formula uses cos(k·x)cos(l·y) on a square with Cartesian coords cut to a disc. That's fine physically: mounted round plates still can show Cartesian modes clamped by boundary — acceptable for a demo.

• Particle update: compute amp = cos(mx)cos(ny) - cos(nx)cos(my)? To be symmetric, typical Chladni uses |cos(m x)cos(n y) - cos(n x)cos(m y)| to satisfy (m,n) swap invariance. The pattern becomes mess-free lines. Particles accelerate away from |amp| high regions; damping; when |amp| ~ 0 they rest (with slight jitter). We compute gradient numerically or just use velocity ← -grad(|A|²), approximated with random jitter when amplitude small? Standard trick: v += -∇(A²) dt + noise; near nodes ∇→0 so particles stop there. Computing the gradient of cos(mx)cos(ny)-cos(nx)cos(my) analytically is easy — closed form! Let me define: A = cos(m x) cos(n y) − cos(n x) cos(m y), with x,y normalized [-π, π]. ∂A/∂x = -m sin(m x) cos(n y) + n sin(n x) cos(m y) ∂A/∂y = -n cos(m x) sin(n y) + m cos(n x) sin(m y) Force = -A*(∂A) (gradient of -A²/2) → pushes toward A=0. Nice and cheap: a few sin/cos per particle per frame. For 12–20k particles fine. Also add slight velocity damping + tiny noise to shake loose; add kill radius (outside disc edges, pull back).

  Modes m,n integers; frequency f ∝ sqrt((m+β n²)...)? Physically f ~ (2m²+n²)-ish; we'll use f = base*(m² + n²)^0.8 mapping to 40–600 Hz, displayed, and audio plays it when "sound" on (WebAudio sine + some plate body impulses). Frequency slider also sweeps m,n morph? Sweep: morph integers by continuous mapping with snapping? Simpler: slider directly morphs between neighboring (m,n) states with blending A = w1 A1 + w2 A2 ✓; audio freq follows blend curve. That's extra nice: the entire pattern continuously morphs!

• Visuals: sand = THREE.Points with custom shader: warm grains with sparkle, lighting from occasional directional light, bloom picks up the highlights. Or instanced small icosahedrons for 3D glints; Points cheaper and can look great with round sprite + rim. Use Points with ~15k, sizes 2-3px, color variations. Maybe mix: Points plus a subtle instanced sprinkle.

• Plate: circular mesh, copper PBR with roughness texture from procedural canvas; edge ring (torus). Stand: cylinder shaft and base.

• Room: reflective dark floor with shadow; backdrop gradient; "lab" vibe; spotlight; dust motes floating.

• Post: UnrealBloom + film grain/vignette/chromatic grade pass (as in previous demos style).

• HUD: Title, current (m,n), frequency Hz, pattern name tooltip? controls: sand amount, amplitude/excitation, sound toggle, presets (1,2)= (1,2), etc. Also mode: auto-cycle through presets. Buttons for (m,n) inc/dec. Frequency slider that morphs continuously.

• Audio: when enabled: sine oscillator at f with subtle overtone partials, plus occasional "plate ping" when mode changes; amplitude tie; master volume. Use WebAudio; gentle.

Extra wow features:

• A "bow" touch: dragging on plate scratches pattern? Keep it simple: clicking on plate "taps" it creating traveling ring impulse that scatters sand — wow factor. Implement ring impulse pushing particles radially.
• Sand color presets (gold, salt white, obsidian).
• OrbitControls auto-rotate idle.

That's a solid demo with educational + mesmerizing angle.

Also need to make sure performance & code quality. Let me write the code carefully.

Implementation plan (single file):

• Import map: three@0.16x from unpkg; OrbitControls; EffectComposer, RenderPass, UnrealBloomPass, ShaderPass, OutputPass. Follow style of prior demos (probably used similar paths). Let me check one existing demo to copy CDN/import approach.

Let me look at the synchrony demo header.

Good. The convention uses three@0.170.0 via unpkg import map. Now let me build demo 027 — "Cymatics". Let me write the complete HTML file.

Plan the code architecture:

Scene:

• Renderer: antialias, outputColorSpace SRGB, ACESFilmicToneMapping, shadows.
• Camera: perspective 40°, position (0, 2.4, 4.2) looking slightly down at a plate ~ radius 1.5 at y ~0.6.
• OrbitControls: target plate center; damping; auto-rotate when idle after 6s.
• Lighting: ambient dim; key spotlight from above-left casting shadow; warm rim from right; cool fill.
• Floor: large circular glossy black floor with roughness texture (procedural noise canvas) — actually use MeshStandardMaterial with envMap? Use a generated PMREM environment from a small procedural "studio" scene? Simpler: use RoomEnvironment from three/addons for env map. That gives nice PBR reflections. RoomEnvironment exists in examples. I'll use new RoomEnvironment(renderer) with PMREMGenerator. Yes! That gives crisp copper/plate reflections.

Plate:

• Disc: CircleGeometry radius R=1.3, with slight concave dish? A rigid flat plate with a shallow central dimple best matches Chladni plates (mounted at center). I'll use a LatheGeometry: shallow bowl cross-section, so camera sees thickness and rim. Copper material: color 0xb2794b-ish, metalness 0.9, roughness 0.35, envMapIntensity.
• Rim ring: TorusGeometry around edge.
• Stand: cylinder from plate to floor; base cylinder ring.

Sand:

• N = up to 16000 (adaptive by devicePixelRatio/perf). Points with ShaderMaterial:

  • position attribute updated each frame from Float32Array (positions CPU computed).
  • color variation attribute (aColor) warm golds.
  • size attribute? Use size attenuation by distance in shader via gl_PointSize = size*(300/ -mv.z).
  • fragment: round soft sprite with rim lighting toward a light dir uniform — looks like tiny 3D grains; discard outside circle.

• Physics update (CPU): for each particle i:

  • x,y in [-1,1] (plate domain), mapped *R.
  • A(xπ, yπ) etc. using mode coefficients after morph: keep array of two modes {m,n,w} that we lerp between; amplitude A = Σ w_k * [ cos(m π x)cos(n π y) − cos(n π x)cos(m π y) ]; gradient closed form; force = -A * grad * gain; plus weak noise; velocity damped; position += v dt; if radius>1.03 → clamp/reflect; small chance to respawn low-velocity stragglers toward random spot if amplitude uniform? fine.
  • excitation level (slider) scales force; when excitation = 0, sand rests randomly (just damped noise).

  Performance: 16k particles × ~ (for 2 harmonics terms) ~ let's estimate: per particle per frame we do two sets of trig evals ≈ 12 sin/cos ops + arithmetic. 16k → 200k trig/frame — fine (trig ~ few ns). At 60fps that's 10M trig/s — JS can handle, but to be safe we can precompute modes array with weights & maybe use max 2 active modes (during morph only) to minimize. Also we can use Math.sin/cos. OK.

  Actually we can optimize: precompute sn/cn factor tables? Keep it simple but use mode count ≤ 2.

• Tap impulse: when user clicks plate (raycast onto plate mesh), add outward radial velocity bump to particles within radius; and spawn a visible expanding ring mesh (like the synchrony pulse rings); play a small synthesized "ping".

HUD (left panel):

• Title "CYMATICS", subtitle.
• Readout: mode (m,n) active & blended, frequency Hz, and a mini canvas showing Chladni formula / live pattern preview? A small 2D canvas that renders amplitude |A| heatmap — nice. Maybe simpler: show text of formula. I'll do a small 2D canvas preview (64x64) of the nodal pattern with warm colormap — adds a wow HUD feature.
• Sliders: Excitation (0-1), Sand count, Frequency (sweeps continuous morph path through (m,n) ladder). Buttons: preset modes list (m,n) pairs; Sound toggle; Auto-cycle (tour) toggle; Snap photo.

Presets: define ladder: (1,1)(1,2)(2,2)(2,3)(3,3)(4,3)(1,4)(4,4)... mapped to slider position. Show "Pattern" name maybe like "duality", eh — just (m,n).

Audio:

• Master: gain node. Fundamental osc: sine; plus 2nd harmonic at lower gain; plus plate "body" (filtered noise + ping) triggered at mode changes. Amplitude follows excitation; attack smooth. Off toggle button. Try to keep safe (default muted? Many demos default sound off with a button "enable sound"). I'll default sound off, with a toggle button, and on mode change if on.

Post-processing:

• EffectComposer: RenderPass, UnrealBloomPass (threshold ~0.2, strength 0.5), custom grade ShaderPass (vignette, grain, slight chromatic aberration), OutputPass.
• Adaptive quality: measure fps; drop particle pixel ratio / counts.

Snapshot: button to save PNG (render(), canvas.toBlob) — copy pattern from earlier demos.

Responsive resize.

Footnote UI: right bottom "drag to orbit · scroll to zoom · click plate to tap".

Now the gradient math (carefully): Let u = π x, v = π y, x,y ∈ [-1,1] over plate. Mode (m,n): A_mn = cos(m u) cos(n v) − cos(n u) cos(m v). ∂A/∂u = −m sin(m u) cos(n v) + n sin(n u) cos(m v) ∂A/∂v = −n cos(m u) sin(n v) + m cos(n u) sin(m v) Force on particle toward nodes: F = −A ∇A = −A/2 ∇(A²)... magnitude scaled. Then position update in normalized x,y: vx += (−A * dAdu * gain) * dt; where dAdu scaled by π? Since u=π x, ∂A/∂x = π ∂A/∂u. I'll just fold π constant into gain.

Also anti-cluster: add tiny random walk and a "settling" decel: v *= exp(−k dt) with k depending on amplitude? Naturally near nodes A→0, force→0 but particle keeps gliding; damping handles.

Additional nice effect: "excitation" also modulates plate deformation? Real plates vibrate; we can add a subtle vertex-shader ripple on the plate (scale tiny) synced with amplitude — shimmering surface. Add shader onBeforeCompile? Use a displacement via standard material on a high-seg disc: onBeforeCompile add uniform excite, time; displace vertex by A(u,v)amp wave. That makes the plate itself show the mode shimmering — gorgeous when sand dances! Implement via material.onBeforeCompile replacing #include <begin_vertex> with displaced transform, amplitude small (0.02). Plate disc needs enough segments: CircleGeometry(1.3, 128, 0, 2π) has radial segments? CircleGeometry(radius, segments) only azimuth segments around rim — poor tessellation for displacement. Better: use a custom ringed disc: I'll build a "disc" with — hmm — easier: use a RadialDiscLathe: build LatheGeometry from a profile with many points across radius (e.g., 64 radial points) then it has vertices across the surface ✓. Lathe with phi segments 96 and profile points 48 gives plenty tessellation. Profile: y = -0.012(1-(r/R)²)? Slight dome; plus thickness edge. I'll craft profile points: from center r=0,y=dish to edge r=R with slight upturn, plus underside (lathe profile can go down to give thickness). Actually simpler: make it a slightly convex disc (dome up 1.5cm at center) — still fine for patterns (visual only).

Wait — stand attach at center: fine.

Also the "bow" — skip.

Morph path: define MODES = [[1,1],[1,2],[2,2],[2,3],[3,3],[3,4]...] etc. Keep weights as two entries during blend. Frequency slider index f ∈ [0, len-1] float. When moving slider, set blend targets; each frame, currentWeights lerp to targetWeights (smooth). Pattern preview canvas & freq display computed from rendered blend (approx using float mix). Frequency Hz map: base 54 Hz × sqrt((m²+n²))0.42(...)... just use f = 40 + 26sqrt(mm+nn) blended; but make Hz monotonic along the ladder by sorting ladder by sqrt(m²+n²). Ladder sorted by norm: (1,1):1.41; (1,2):2.24; (2,2):2.83;(1,3):3.16;(2,3):3.61;(3,3):4.24;(1,4):4.12… choose ladder: (1,1),(1,2),(2,2),(1,3),(2,3),(3,3),(2,4),(1,4),(3,4),(4,4),(3,5),(4,5),(5,5)... order by norm monotonic: 1.41, 2.24, 2.83, 3.16, 3.61, 4.24, 4.47(2,4), 4.12(1,4) -> reorder (2,4) after (1,4)? norms: (1,4)=4.123, (3,4)=5.0, (2,4)=4.472, (4,4)=5.657, (3,5)=5.831, (4,5)=6.403, (5,5)=7.07. Sorted ladder: (1,1)1.414, (1,2)2.236, (2,2)2.828, (1,3)3.162, (2,3)3.606, (1,4)4.123, (3,3)4.243, (2,4)4.472, (3,4)5.0, (4,4)5.657, (3,5)5.831, (4,5)6.403, (5,5)7.071. Good 13 modes. Display freq = 55(norm^1.35)/some? Map to 60–720Hz: f = 36 * (norm) → 51–255 Hz (a bit low). Use f = 28*(norm^1.5): 1.414^1.5=1.68→47; 7.07^1.5=18.8→526. Range 47–526 Hz plausible for a plate. Sure.

Auto-tour: cycles slider through modes every ~7s with smooth morph.

Pattern preview canvas: 72×72, compute normalized amplitude map A over grid with current weights, map |A| to glow color (dark where nodes), nodal lines bright. Update only when weights change significantly or every ~100ms. Cheap.

Extra polish:

• Floating dust motes (Points, 200) with slow drift.
• Key spotlight shadow (map 1024).
• Idle auto-rotate + hint fades.

Audio implementation:

• let audioCtx lazily on toggle. Nodes: master gain (0.18). Oscillator sine at freq f; second osc triangle at f2.001 gain 0.06; slight vibrato? Plate "ping": on mode change create osc (sine f3) with fast decay 0.25s gain 0.12 + noise band. Continuous hiss: filtered noise very low tied to excitation (use looped noise buffer through bandpass at f2, gain = excitation0.05). Follow freq each frame: osc.frequency.setTargetAtTime.

Sand count slider: sets activeCount (drawRange) — when reducing, fine; increasing: initialize with random pos. Particles stored in a single Float32 position buffer; drawRange set to count. Particle index loop to active count only. On count increase, positions for new ones initialized random inside disc.

Snapshot: render then toDataURL → download cymatics.png.

Quality tiers: initial N by hardware: dpr>2 or mobile → 9000 else 16000; auto-drop if fps low → reduce dpr to 1 and sand to 60%.

Colors: sand slight variance gold/silver? Sand color presets: "Gold" (default), "Salt" (warm white), "Obsidian" (dark grains glowing via bloom edges?) — pick 3; changes aColor array.

Excitation slider also drives plate displacement amplitude & bloom intensity slightly and audio gain.

Ring ripple on tap: mesh = TorusGeometry thin, shader-less MeshBasicMaterial additive, scale up & fade — pool a few.

Edge fence: keep particles within radius with soft wall: if r>1: v_r reflected damped & pos pulled in.

Initial particle pos: random disc uniform.

HUD right-corner: small credit line "CYMATICS · chladni modes on a vibrating plate".

Keyboard: space = toggle sound? Keys: T tap, S sound, A tour, H hide UI, 1-9 presets. Show hint in panel.

Let me also consider mobile touch: OrbitControls handles touch; plate tap uses pointerdown ray when not dragged — distinguish click vs drag by movement threshold & duration.

Alright. Also the plate tap ring: also add particle outward kick: for all particles, v += dir*(strength*exp(-dist²/k)) dt.

Now — write the file. It'll be long (~1100 lines?). Aim for clean, commented.

Structure:

1. HTML head + CSS (panel, sliders, buttons like earlier demos).
2. importmap.
3. module script.

Let me write carefully the shader for sand points:

vertex:

fragment:

With transparent: true, depthWrite false? Better: opaque small grains; use blending normal, depthTest true, alpha from smoothing. Use alphaTest-ish discard edges. Fine.

Plate displacement onBeforeCompile:

Wait, displacement needs mode weights updated — pass uniforms (m,n,w) arrays for two modes. Also should displace only near surface disc (plate mesh top). Since geometry lathe includes underside verts, displacement applies all — fine, symmetric.

Hmm, but the plate lathe interior also includes the sand-support; visually fine.

For normals the lighting will be off (displaced without normal recompute) — with tiny amplitude and rough metal it's acceptable shimmer; also add slight emissive? Metal env map will shimmer via geometry change subtle. OK.

Also plate excitation must go to 0 when excite=0 with smooth lerp; and also add time-based small oscillation along z? Real plates vibrate but imperceptible; the displacement shows spatial mode (no temporal wobble) which looks like a shimmering relief — good enough; add temporal factor sin(uTimefreq2π)0.5+... actually modulate amplitude by (0.75+0.25 sin(uTime6.28*freqJitter)) for living shimmer.

Remove the dome: profile radius vs height y = domeH*(1-(r/R)^2); lathe points from r=0..R. Give thickness: build profile with underside: points list: for i in [0..radial]: (r_i, top_y_i); then outer edge r=R,( y slightly less ), then underside back to center at y=-thickness... Lathe rotates a polyline: produce closed section: center bottom (r≈0.02, y=-t) → outer bottom (R, -t) → rim (R, 0.02 raise lip) → top curve back to center (r→0.02, top dome). This creates solid cross-section ✓. Normals auto.

But careful: lathe caps at center leave hole at axis (r=0.02) — small hole hidden under stand mount? The plate center is where the "nodal mount" is; real Chladni plates mount at center. Put a small brass hub cylinder at center — nice detail and hides the hole. ✓ Add hub + stand rod going down to base.

Sand sits at top dome: y = domeY(r) + tiny offset. Map particle (x,z) dome elevation accordingly. Plate radius R=1.25, dome height 0.05.

The plate tilt: plate horizontal, camera above. Sand plane at dome height ~0.7 world. Stand from y 0..0.62, base at floor.

Floor: circle radius 30, MeshStandardMaterial black-ish with roughness 0.75, plus radial vignette texture via canvas → subtle. Also receive shadow. Maybe add faint concentric machined rings on floor? keep plain.

Backdrop: scene.background = very dark gradient? Use big sphere with gradient shader or scene.background color + fog. Use Color #050607 + fog? Use radial gradient canvas texture on background? Simpler: scene.background = new Color(0x050607). Add subtle haze via fog Exp2 0.045? Might wash; skip.

EnvMap: RoomEnvironment for reflections on copper (only affects materials' env; not background since not set as scene.background).

Postprocessing grade shader:

Bloom: UnrealBloomPass(res, strength 0.55, radius 0.4, threshold 0.32).

Now particle physics core:

State: modePos float (index into ladder); weights computed: i=floor, frac; targets. Smooth: curA/curB lerp each frame toward target — represent current as {m1,n1,w1,m2,n2,w2} where pair 2 may equal pair 1 when settled.

Physics per particle:

• need, for each of up to 2 weighted modes: cos(m u), cos(n v), etc. Compute per-particle:

That's 8 sin/cos per active weighted mode (cos/mv etc.). Two modes during morph → 16 trig. 16k particles → 260k trig per frame. JS Math.sin ~ 20-30ns? That's ~6-8ms per frame — too slow at 60fps combined with frame budget. Optimize:

• During settled (single mode), only 8 trig → ~3ms. During morph, heavier but okay briefly.
• Reduce N on slower devices (9k) → 2ms.
• Use lookup-free approach is fine. Also early-out: if |A| tiny and |v| tiny and excite low → skip? Adds branch cost.
• Could precompute per-particle per-frame only when drive>0; if drive near 0, just settle. Fine.
• Additionally use Math.sin via small util? no.

Actually benchmark: 8 trig = ~ 100ns? Modern V8 Math.sin ≈ 15–20ns. 16000×8 = 128k trig → ~2–2.5ms → fine. Two modes ~5ms morphing at 100% excited... acceptable (worst case during transitions). Also we can blend by snapshot: choose one mode for physics while morph weight>0.5? No — blend is the wow.

Alternative cheaper: quantize u,v? Particles move continuously so no.

Also drawRange count for sand slider. Fewer particles OK.

CPU work in Float32Array positions; also velocities Float32Array.

Dead-zone: particles near boundaries of plate may pin at nodes quickly — good.

Auto respawn: with probability, particles stuck in high-gradient flanks may cluster lines; fine.

Also add slight attraction jitter to break symmetry: small curl noise? skip.

Pattern preview UI canvas: compute on mode/weight change (throttle 120ms): 64² grid, |A| brightness → gold on black. Reuses mode list.

Freq display: blend of freq ladder.

Now audio class CymaticsAudio:

• ensure(): create ctx, master gain 0.0→ setTargetAtTime vol.
• osc1 sine, osc2 triangle(freq*2.004) g2=0.35, through lowpass? keep pure.
• noise buffer loop → bandpass(freq*2, Q 6) → gain tied.
• setFreq(f): osc freq setTargetAtTime(f, 0.03); bp.frequency likewise.
• setDrive(d): master g = on? max: masterGain.gain setTargetAtTime(on? d*0.16+0.02 : 0).
• ping(f): quick sine burst.
• toggle(on)

Buttons & wiring.

Snapshot:

With composer, toDataURL works if preserveDrawingBuffer? To be safe set preserveDrawingBuffer: true (small perf cost ok) as earlier demos likely did. Check an existing demo quickly for the trick — synchrony probably computes. I'll just use preserveDrawingBuffer: true.

Auto-quality: track FPS over 60-frame windows; if <45 fps: steps: reduce pixelRatio to min(dpr,1.25) → then sand count step down (6000), disable grade pass maybe. Show tiny "eco" indicator? skip indicator; just function.

Idle auto-rotate: controls.autoRotate = true initially? earlier demos used after idle. I'll do: autoRotate true; on pointerdown disable; resume after 8s inactivity.

Sand color presets: buttons Gold / Salt / Obsidian:

• gold hues [1.0,0.82,0.45] vary; salt [0.95,0.9,0.86]; obsidian [0.12,0.12,0.16] with spec highlights bloom. Implement by rebuilding aColor with base palette.

Also maybe mix colors for richness: random pick from 3 shades with variation.

OK also handle "Excitation = 0" → sand freezes wherever (damping high) — good physics lesson.

Now let me also add a nice detail: a low-power "laser pointer" from camera? no, keep focused.

Let me now write the full file. I'll be careful with onBeforeCompile string replacement:

Hmm position is object-space radius scaled; the lathe disc spans 0..R in x/z? Lathe revolves profile around Y axis; resulting geometry radius in XZ plane. So u = position.x/Rπ, v = position.z/Rπ. Need uniform R or bake constant directly: R=1.25 → scale = π/1.25 ≈ 2.513. I'll bake numeric constants into the injected GLSL using JS template precomputed values (no uniform needed, safer across recompiles):

A² scales [0..4], multiply uAmp≈0.012excite → up to 5cm. Also modulate shimmer: uAmp includes sin time small. Set uAmp each frame = excite0.016*(0.85+0.15sin(tfreq_visual)); keep subtle.

Normals: not recomputed → slight lighting mismatch acceptable. But wait: displacement grows with A²; the sand mound lines correspond to A=0 → plate visually dips between lines; crisp relief!

The plate vertex density: LatheGeometry(profile 40 pts, segments 96) → 40×96 = 3840 verts, fine; but profile spends points on rim/underside; allocate ~30 top points → resolution across radius 30 → u span π → features of mode (5,5): cos(5u) has ~5 bumps across → sampled by 30 radial points — marginal but okay; bump radial to 44. Total verts ~ 44×112 ≈ 5k, cheap.

Hub: cylinder r=0.06 h=0.035 at center top, brass.

Stand: cylinder r=0.05 from plate bottom (−0.03) down to floor base; base: flattened cylinder r=0.55 h=0.06 + rim. Dark steel.

Floor: CircleGeometry(28, 64) rotated -90°, MeshStandardMaterial(color 0x0a0b0d, rough 0.9, metal 0). receiveShadow.

Backdrop: also add a huge low ring wall? skip.

Lights:

• key: SpotLight(0xfff2e0, 60, 0, angular) position (3.2, 5.2, 2.0), target plate, angle 0.5, penumbra 0.6, castShadow, shadow.mapSize 1024, bias -0.0005.
• rim: DirectionalLight(0x88aaff, 1.1) from (-4,2.5,-3).
• fill: PointLight? use ambient (0x223, 0.5) plus env.

Dust motes: 220 Points, additive, small, slow drift within a 8x4x8 box; wrap.

Ring pulses pool: 8 TorusGeometry(1,0.004) meshes above plate tilted flat (rotateX(-π/2)); shader-less Basic additive, opacity animated; scale 0→1.4R.

Detection of tap: raycast against plateMesh and hub; pointerdown/up with <250ms and <6px movement → tap at point: convert to normalized disc coords, impulse kick + ring + ping.

Now, sand positioning on dome: y = plateTopY + domeY(r) where domeY(r)=domeH*(1-(r/R)²)·(shift) — plus 0.004. Particles should also get vertical jiggle from excitation: y += |A|excite0.02*rand? Cheap: compute during CPU pass: zDome + jitterY. Adds liveliness — yes do: py = base + (Math.random()<jamt) ... simpler vy hop: when velocity high, lift: y = base + min(|v|*0.5, 0.03)*excite. Good — dancing grains hop.

Normals/dust/grade shader details — write final code now. Also FPS meter maybe not needed; show fps small? earlier demos sometimes have stats; I'll include tiny fps readout in panel footer — optional. Skip.

Buttons: row of preset chips auto-generated from MODES: "1·1" etc. Active highlight. Sound toggle (🔇/🔊), Tour (▶/⏸), Snapshot (📷), Sand color swatches (3 dots), sliders: Excitation, Frequency (continuous morph), Sand count. Footer hint: "drag orbit · wheel zoom · click plate = tap · keys: [S]ound [T]ap [A]uto [H]ide [1..9] modes".

Pattern preview canvas 64×64 drawn at throttled rate & on demand.

Also the mini formula label: A = cos(mθ)cos(nφ) − cos(nθ)cos(mφ). Show current m,n live.

Edge case: weights arrays for physics: maintain cur = [ {m,n,w} ×2 ]; target from slider f. Ease cur → target per frame (lerp w, and switch mode when w crosses). Implementation: let float modePos (slider value 0..12). currentPos smoothed toward target by (1-e ^(-dt*3)). Then weights derived: i=floor(c), frac; A=(MODES[i], w=1-frac), B=(MODES[i+1]?, w=frac). Physics uses these two. When c hits endpoints clamp.

Rendering uniforms for plate displacement receive the same derived modes each frame: uMNA.set(m1,n1,w1) etc. Wait GLSL profile displacement uses position.x/z over full lathe (including underside thickness) — fine.

Sand bump base y: computed on CPU (float) — cheap.

Audio freq: f = freqOf(norm(blend)). Blend norm = hypot? approx: use weighted norm of m,n floats: mMix = m1w+m2w, nMix = ...; freq = 27*norm^1.5.

Draw preview similarly.

Snapshot button.

Resize handler.

Now write code. Length estimate ~700-800 lines. Go.

One more consideration: Points positions update: geometry.attributes.position.needsUpdate = true each frame (16k×3 floats upload 192KB/frame — fine).

Colors: aColor fixed after palette set; alpha? We discard in shader — points render lots of overdraw? 16k×~4px² ok.

Use depthWrite:true, transparent:false with discard → crisp grains. Blending normal.

Let me write the file now.

Also remember prefers-reduced-motion? nah.

Adaptive check every 2s:

Auto-rotate resume timer.

Hint overlay bottom-right: "✦ drag to orbit — scroll to zoom — click the plate to tap it".

Title panel header.

Small detail: prevent context menu? yes on canvas. Also dblclick prevention.

Write file to /space/demos/027-cymatics/index.html. Then update /space/demos/index.html: add card at top of demo-list ("027", "Cymatics", description).

Card description: "An acoustic sand laboratory — a virtual Chladni plate ... up to 16k grains ... closed-form modal forces ... live (m,n) blending ... synthesized pure-tone WebAudio ... room environment copper, bloom, filmic grade ..." etc.

Let me write the demo HTML now. I'll craft it in one go.

Also note the previous demos' panel styling uses greenish tint for synchrony; I'll design cymatics with amber/copper palette (colors #f0c98d, warm).

Top panel width 262px.

Excitation slider 0..1 default 0.9. Frequency slider maps 0..(MODES-1) step 0.01 float. Sand slider 2000..16000 step 1000.

Sound default off; toggling enables ctx (needs user gesture — button click qualifies).

Auto tour: advances frequency slider smoothly to next integer each 6.5s then holds 2s; continues while tour on. Implementation: keep phase; slider element updates value.

Keys: s toggle sound, t tap at random plate point, a tour, h hide panel, 1..9 → set slider to index (integer) for MODES[k-1].

Also mouse wheel over panel sliders shouldn't zoom page (fixed panels natural).

Sandbox the code — let me now write it carefully.

Physics constants: drive scale: gain g = excite * 8.0 (tuned); damping: v = Math.exp(-dt3.2); jitter = (0.35 + excite)*0.18; dt clamp 0.033.

Actually to be stable: F = -A * (dAu, dAv); clamp |F| to 3; gain 2.4; normalize weight.

Also gentle recentring: none.

Initial velocities 0.

For hopping: yOffset = Math.min(0.028, (|vx|+|vy|)0.5) * exciteWave(time, particle phase)? plus small sin flicker: hop * (0.5+0.5 sin(t20 + i)). That sin per particle adds a trig per particle; we can use hash flicker: (Math.random()-0.5)*hop. Meh, random ok.

Write Y position: py = plateY + dome + hop.

Render doesn't need Float32 y array separate; we write final y into position array each frame.

Performance win: skip computing hop when excite<0.02.

Auto-quality sand reduction adjusts sandSlider UI.

OK writing now. Also make renderer.setAnimationLoop.

One more: the grade pass ShaderPass with uniform time updated.

Bloom threshold 0.35 strength 0.5 radius 0.5.

ToneMapping ACES exposure 1.05.

Env: PMREM RoomEnvironment:

In r170 RoomEnvironment import from 'three/addons/environments/RoomEnvironment.js'; fromScene(new RoomEnvironment()) — r170 RoomEnvironment constructor takes no renderer arg? In r150+: new RoomEnvironment() (renderer param removed in r162+? Actually RoomEnvironment extends Scene; constructor historically took renderer; in r162 changed). Safe: new RoomEnvironment() works across recent versions (in r162+ it accepts no args; passing extra arg harmless anyway). I'll call without args.

Floor env reflection will make it slightly lively; roughness 0.9 low effect.

scene.environment background stays default color.

Let me write it.

Panel HTML skeleton:

Chips generated in JS.

modeLabel shows formula with blended floats rounded e.g., cos(mθ)cos(nφ)−cos(nφ)cos(mθ). Fine.

Also the pattern preview canvas — draw |A| map. colors: gold light on dark.

Dust motes & rings code.

Now write. I'll produce the entire file in one heredoc write via read_write_file tool (mode write). The content is big; that's fine.

Then update index page with new card (insert after ).

Also verify with quick grep of balanced script tags? I'll re-read file after write partially to confirm.

Let me write the demo file.

******************************************************************************************************************************************************************************sh.

***********************************************************************************************************************************************ay.