Attractorium Demo Creation

The task is "Wake up and do as you please." — so I have freedom. My purpose is to create cool Three.js demos in /space/demos/. Let me check the current state of the demos folder and the index page, then create a new advanced demo (next number would be 019 presumably).

******************************************************************************************************************************************************************************n).

The task is "Wake up and do as you please." — my purpose says to create cool Three.js demos. Previous demo was 018-threshold. So I should create demo 019.

Let me check the last demo to see the structure/style conventions (import map, three version) and make sure 018 is complete. Let me quickly peek at 018-threshold/index.html header and tail to confirm it's complete.

********************************************************************************************************************************************************************************************************************************18.

Three.js 0.170.0 with ES modules. Now I'll create demo 019. Let me pick a concept that doesn't duplicate existing demos:

Existing: spinning cube, nebula galaxy (particles), mandelbulb (raymarch fractal), fluid dynamics (GPU Navier-Stokes), gravity sandbox (N-body), event horizon (black hole lensing), sonic reactor (audio viz), void runner (game), azure odyssey (sailing/ocean), abyssal bloom (boids deep sea), physarum garden (slime mold), powder alchemy (falling sand), clockwork nebula (orrery), neon rain (cyberpunk city), aurora borealis (aurora), skitter (creature locomotion), coral resonance (cymatics), threshold (portals).

New idea for 019: Something with a "wow" factor. Ideas:

• A volumetric cloud / storm cloud raymarcher with lightning — partly overlaps with neon rain.
• Lorenz / strange attractor particle sculpture — a million particles advected through strange attractors with trail accumulation, 3D flythrough, interactive parameter morphing between attractors (Lorenz, Aizawa, Thomas, Halvorsen, Dequan Li, etc.). That could be gorgeous: GPGPU particles + ribbon trails + bloom + audio. Similar-ish to nebula galaxy but quite different.
• Magnetic field / ferrofluid — CPU heavy.
• Kaleidoscopic IFS / Menger sponge flythrough — raymarched, similar to mandelbulb.
• Wave interference / ripple tank 3D — could be nice but cymatics overlaps.
• Cloth sim + wind — meh.
• Reaction-diffusion 3D (Gray-Scott on a sphere/torus) — cool! 010/011 overlap somewhat (physarum), but Gray-Scott coral growth on a 3D surface is visually distinct. Could do "Gray-Scott on arbitrary mesh" — tricky.
• A "dreamscape" terrain flythrough with erosion-based procedural terrain, volumetric fog, and a hot air balloon ride? — azure odyssey overlaps somewhat.
• Kinetic light sculpture: double pendulum / chaotic pendulum array with glowing traces — a room full of chaotic pendulums with phosphor trails, bloom. Physics is cheap (CPU), trails are gorgeous. "Pendulum Wave / Chaotic Chandelier".
• Fire/ember simulation with volumetric raymarched fire — fireplace/campfire scene at night with sparks GPGPU, fire raymarch, procedural wood, crickets audio. Could be very atmospheric: "Emberlight" — a campfire under stars with tens of thousands of GPU embers, raymarched volumetric flames, smoke, heat haze (screen distortion), spark interactions (click to throw a log / gust wind), night forest silhouette, synthesized crackle audio. That's a strong, atmospheric demo with no overlap.

Or strange attractors: "Attractorium" — a gallery of strange attractors rendered with 500k GPGPU particles with phosphor trails, morph between attractor types live, orbit, bloom, generative audio tied to attractor energy. That's very "wow" and quite different from nebula galaxy (which is a galaxy). The trails (afterimage pass) make it stunning.

I think the strange attractor one is excellent and distinctive: "Attractor Garden / Strange Attractor Observatory". Features:

• GPGPU (FBO ping-pong) particles advected through the attractor vector field, integrated with RK4 or Euler in shader.
• Multiple attractors: Lorenz, Rössler, Aizawa, Halvorsen, Thomas, De Jong (2D map), Dadras, Chen, Four-Wing, Rabinovich–Fabrikant... Pick ~6 with known params.
• Live parameter sliders (sigma, rho, beta for Lorenz etc.) with particle trails forming/disrupting.
• Afterimage/trail rendering: render particle points additively into a trail buffer with decay, then composite with bloom. Actually simpler: use AfterimagePass from three addons? It exists (AfterimagePass) but its damp can be uniform-driven. Alternative: render points as stretched line segments along velocity (each particle rendered as a short streak using vertex shader with prev position) — gives motion streaks without FBO trails. Combined with a fade-to-dark fullscreen quad in an offscreen accumulation buffer for phosphor trails.
• Coloring by speed/curvature, custom shader with depth fade.
• Audio: generative pads whose filter cutoff follows attractor energy (mean speed), plus subtle wind.
• Interaction: click-drag orbit, scroll zoom, double-click to reseed, buttons to switch attractor, "burst" button that scatters particles, auto-morph mode cycling attractors with param interpolation.
• HUD with stats, snapshots, quality toggle, bloom toggle.

Trails approach: I'll do an accumulation buffer: ping-pong two render targets; each frame, render previous trail target through a fade shader (multiply by damp, slight blur optional) into the other, then render particle points additively into it; finally composite trail texture to screen (with bloom on the composite). That's a standard phosphor-trail setup and reliable.

Particle count: 262,144 (512×512) or 1M at high quality? Keep 512×512 = 262k default, quality high = 1024×1024 ≈ 1M. Integration in shader with delta time clamped.

Attractor definitions in GLSL — a function vec3 field(vec3 p) selected by uniform int or by blending two fields during morph. To allow uniform-driven branch cheaply, compute selected field via if/else on uniform int — fine in WebGL2.

Morph: uniform uMorph blends fieldA and fieldB. Also per-attractor scale/offset uniforms to normalize view.

Particles respawn when they go NaN/too far or after lifetime expires: store lifetime in w component; reseed via hash from uv + time.

Rendering points: use gl_PointSize ~ 1.5–3, additive blending, color by speed using a palette (inferno-ish / custom gradient). Also render a subtle "core mesh" — maybe a faint wireframe of the attractor's bounding? Not needed.

Extra visual: a slowly rotating "gallery" pedestal? Keep it space/void with stars background — an observatory vibe: dark dome, faint starfield, the attractor sculpture floating center, reflective floor? A subtle radial grid floor (like a museum plinth) adds depth. I'll add a faint polar grid disc beneath and a soft glow.

Camera: OrbitControls with auto-rotate, damping.

Post: UnrealBloom + custom grade pass (vignette/grain) — reuse pattern from previous demos.

Audio: WebAudio generative — two detuned saws through lowpass whose cutoff follows normalized mean particle speed (computed cheaply on CPU? No—approximate from a few probe particles? Simpler: use parameter chaos derived from attractor params + time-based LFO). To keep honest: compute energy by reading back a small downsampled texture? Read-back stalls. I'll do: energy = smoothed function of parameter values and a slow LFO + user interactions (burst adds energy). Good enough and reliable.

Also add "conduct" mode: moving pointer horizontally/vertically modulates two params live (e.g., Lorenz rho & sigma) — super fun and interactive. That's the wow interaction: play the attractor like an instrument.

Snapshots: render then toDataURL, download.

Presets per attractor with nice params:

1. Lorenz: σ=10, ρ=28, β=8/3. Scale ~0.6? Lorenz spans z 0..50, x ±20 — center offset (0,0,25), scale ~0.35 → world radius ~7.
2. Rössler: a=0.2,b=0.2,c=5.7. spans ±10, offset z? center ~(0,0,?) Actually Rössler center around (0,0,3), radius ~12. scale 0.5.
3. Aizawa: a=0.95,b=0.7,c=0.6,d=3.5,e=0.25,f=0.1. spans ±1.5 — scale 5.
4. Halvorsen: a=1.89. spans ±8ish — scale 0.8.
5. Thomas: b=0.208186. spans ±3 — scale 2.2.
6. Dadras: p=3, q=2.7, r=1.7, s=2, e=9. spans ±5ish — scale 1.2.
7. Four-Wing: a=0.2,b=0.01,c=-0.4. spans ~±3 — scale 2.
8. Chen: a=35? too fast maybe; classic Chen a=35,b=3,c=28, spans ±30 — scale 0.25, dt small.

I need to be careful with integration stability: use adaptive per-attractor dt scale uniform uDtScale with clamped dt. RK4 for stability in shader. 262k particles × RK4 is fine on GPU.

Also particles can be drawn with soft round sprite alpha in fragment via gl_PointCoord.

Trail buffer: use HalfFloatType render targets with damp 0.96ish. Composite pass: map + grade. Then bloom on final? Bloom should apply to the composite — use EffectComposer with RenderPass of a "composite scene" (fullscreen quad showing trail texture + background + floor)... Hmm, simpler architecture:

• Scene A (world scene): background stars, floor grid, plinth glow — rendered normally to screen via composer.
• Trail buffer composited as an additive fullscreen layer.

Option: make the trail texture a texture on a fullscreen quad in the main scene rendered first? Ordering and depth get fiddly. Cleaner: composite trail texture inside the grade/final shader pass: bloom applies to trail too? UnrealBloom operates on the composer's read buffer after RenderPass. If I add trails only in the final grade pass (after bloom), trails won't bloom. I want bloom on trails.

Alternative architecture: render EVERYTHING (bg + floor + trail quad) into the composer scene:

• Main scene contains: stars, floor, and a fullscreen "overlay" quad holding trail texture with additive blending, rendered in an ortho-like manner... Instead, put the trail quad as a plane that always faces camera filling the view? Fragile.

Cleanest standard approach: do trails in screen space via the composer:

1. Render scene (stars, floor, particles-as-streaks?) — no.

Let me restructure:

1. trailScene render: ping-pong buffer: (a) fade pass of prev trail, (b) additive particle points rendered into same target. Particle positions projected with the same camera — so trail buffer is screen-space.
2. Main render via EffectComposer: RenderPass(mainScene with stars/floor/etc), then a custom ShaderPass that adds trailTexture (additive), then UnrealBloomPass, then grade pass (vignette/grain/tonemap) to screen.

Order in composer: RenderPass → AddTrailsPass → Bloom → Grade. Bloom will bloom the combined image including trails.

One catch: particles rendered into trail buffer need the camera matrices — fine, pass camera to the points material (it's a THREE.Points in a separate scene rendered with the same camera).

Point size attenuation: manual in shader using projection.

Also on resize, trail buffers resize.

Auto-morph timeline: every ~35s, pick next attractor, morph over ~6s (uMix 0→1, params lerp). During morph also crossfade scale/offset. Toast announces name. Manual selection via chips.

Pointer "conduct" mode toggle: when enabled (default on for fun?), pointer X/Y map to param1/param2 deltas from preset center within safe ranges. Maybe default OFF to preserve canonical shapes, toggleable with 'C'. Hmm — the task history shows these demos have rich controls; default off, big hint. Actually making it default ON but subtle (±10% modulation) gives life. I'll do: conduct mode button toggles; when on, sliders show live values.

Keyboard: 1–8 select attractor, M morph now, B burst, C conduct, H HUD, Space pause, S snapshot, O auto-orbit.

Burst: reseed 30% particles randomly + energy spike for audio + bloom flash.

Stats: FPS, particle count, attractor name, params.

Also draw faint "ghost orbit" — skip.

Floor: circular polar grid shader disc at y=-6 with radial fade, plus soft radial glow sprite under sculpture. Stars: 1500 points sphere shell. Background color #050308-ish with subtle nebula gradient via big sphere shader? Keep simple: stars + fog-colored bg + vignette grade.

Audio design (WebAudio, all synthesized):

• Drone: 2 detuned sawtooth oscs at low freq (55Hz, 55.3Hz) + sub sine, through lowpass (cutoff 200–1200 driven by energy), gain modest.
• Shimmer: slow random pentatonic plucks (triangle osc + short envelope + feedback delay), rate tied to energy.
• Burst whoosh: filtered noise sweep.
• Master gain slider, mute button, starts on first user gesture.

That's a solid plan. Size: aim ~1100-1400 lines similar to previous. Let me also add title/authoring comments and keep consistent style with earlier demos (I haven't seen them, but consistency in quality matters more than exact style).

Verification: no browser (playwright unavailable per history). I'll do static checks: balanced braces/parens/backticks, DOM ids referenced exist, function definitions, and a small math sanity test with node if available (three via CDN won't be importable offline — but node may exist; I can test pure JS math for RK4 stability of Lorenz with chosen dt by replicating in plain JS).

Check node availability. Then write the file in chunks (it's long). I'll write with multiple appends via shell heredocs? The read_write tool writes whole content at once — content might be ~60-70KB; that may exceed message limits comfortably? 63K file was fine to read partially. Writing 70KB in one call is risky but doable in 3-4 chunks with cat >> heredoc via execute_shell_command. Heredocs with quoted delimiter avoid interpolation issues — but the content contains backticks and $ — with quoted heredoc ('EOF') no expansion occurs. However the execute tool itself wraps command as JSON string; large content fine. I'll split into ~5 chunks of ~15-20KB each.

Actually simpler: use read_write_file_in_shell_environment with mode write for chunk 1, then append via shell cat >> file <<'CHUNK_EOF'. read_write doesn't support append. I'll use execute_shell_command with heredoc for all chunks.

Let me now design the GLSL carefully.

Simulation shader (fragment, ping-pong):

• Inputs: tex positions (xyz + life), tex seeds? Seeds can be derived from uv hash + reseed counter uniform.
• Uniforms: uDt, uTime, uFieldA/uFieldB params (vec4 each), uTypeA/uTypeB (int), uMix, uScale (world normalization not needed in sim; sim in attractor space, apply transform at render), uBounds (max radius), uLifeRate.
• Each step: p = texture(...); vel = field(p.xyz); newp = RK4(p.xyz, dtspeed); life -= dtlifeRate*(0.5+speednorm); if life<=0 or |p|>bounds or isnan → reseed at random point near attractor start region with life=rand.
• Reseed position: small random offset around a characteristic seed point per attractor (e.g., Lorenz (0.1,0,0)). Uniform uSeedPos.
• Also store previous position for streak rendering? Streaks need prev pos: store in second texture or pack? I'll store prev in the alpha... alpha holds life. Use second render target? MRT complicates. Alternative: Points rendered as points with size 2 — with accumulation trails, motion blur emerges naturally from the trail buffer. Skip streaks; trails carry it.

Field function GLSL:

vec3 lorenz(vec3 p, vec4 pr){ return vec3(pr.x*(p.y-p.x), p.x*(pr.y-p.z)-p.y, p.xp.y-pr.zp.z); } rossler(p, pr){ return vec3(-p.y-p.z, p.x+pr.xp.y, pr.y+p.z(p.z-pr.z)); } // a,b,c aizawa(p,pr){ float a=pr.x,b=pr.y,c=pr.z,d=pr.w; // e,f fixed? use uExtra return vec3((p.z-b)p.x - dp.y, dp.x + (p.z-b)p.y, c + ap.z - p.zp.zp.z/3.0 - (p.xp.x+p.yp.y)(1.0+ep.z) + fp.zp.xp.xp.x); } halvorsen(p,a){ ... } vec3( -ap.x -4p.y -4p.z - p.yp.y, -ap.y -4p.z -4p.x - p.zp.z, -ap.z -4p.x -4p.y - p.xp.x ) thomas(p,b){ return vec3(sin(p.y)-bp.x, sin(p.z)-bp.y, sin(p.x)-bp.z); } dadras(p,pr){ // a,b,c,d,e return vec3(p.y - pr.xp.x + pr.yp.yp.z, pr.zp.y - p.xp.z + p.z, pr.wp.xp.y - pr.vp.z); } need 5 params → use vec4 + uExtra float. I'll make params vec4 + float extra. fourwing(p,pr){ return vec3(pr.xp.x + p.yp.z, pr.yp.x + pr.zp.yp.z, -p.z - p.xp.y); } // classic: dx=ax+yz, dy=bx+cyz, dz=-z-xy chen(p,pr){ return vec3(pr.x*(p.y-p.x), (pr.z-pr.x)p.x - p.xp.z + pr.zp.y, p.xp.y - pr.y*p.z); } // Chen: dx=a(y-x), dy=(c-a)x - xz + cy, dz=xy - bz

For blending: mix(fieldA(p,prA), fieldB(p,prB), uMix) — crossfade vector fields. RK4 on blended field.

Params per attractor (vec4 + extra):

• Lorenz: (10, 28, 8/3, 0)
• Rössler: (0.2, 0.2, 5.7, 0)
• Aizawa: (0.95, 0.7, 0.6, 3.5), extra e=0.25, f=0.1 → need 6 params. Use two vec4s? Simplify: hardcode e,f for aizawa in shader branch. pr = (a,b,c,d).
• Halvorsen: (1.89,0,0,0)
• Thomas: (0.208186,0,0,0)
• Dadras: (3, 2.7, 1.7, 2, 9) → 5 params; hardcode e=9 in branch, pr=(a,b,c,d).
• Four-Wing: (0.2, 0.01, -0.4, 0)
• Chen: (35, 3, 28, 0)

dt scaling per attractor: Lorenz ~0.006, Rössler 0.02, Aizawa 0.01, Halvorsen 0.005?, Halvorsen has 4x quadratic terms, dt ~0.003-0.005. Thomas 0.05 (slow), Dadras 0.005, FourWing 0.01, Chen 0.002. I'll store per-attractor dtScale and blend during morph. RK4 keeps it stable.

World transform per attractor: scale + center offset (in attractor space subtract center, multiply scale):

• Lorenz: center (0,0,25), scale 0.32 → radius ~ (20*0.32)=6.4
• Rössler: center (0,0,4), scale 0.55
• Aizawa: center (0,0,0.5), scale 4.5
• Halvorsen: center 0, scale 0.75
• Thomas: center 0, scale 2.4
• Dadras: center 0, scale 0.9
• FourWing: center 0, scale 2.0
• Chen: center (0,0,20), scale 0.22

Bounds (resample radius in attractor space): 60, 40, 4, 30, 12, 15, 12, 80.

I'll verify stability with a quick node test replicating RK4.

Rendering points vertex shader: sample position texture by uv attribute; worldPos = (pos - uCenter)uScale; gl_Position = projmv*worldPos; point size by distance; pass speed (from velocity magnitude computed in fragment sim and stored? we'd need extra channel). Compute speed at render: v = length(field(p)) * uDtScale-ish → normalize by uVNorm per attractor. Store params accessible in vertex shader too (same uniforms). Fine.

Color: palette function of normalized speed + slight hue shift per attractor (uHue). Inferno-like palette: mix deep purple → magenta → orange → white.

Alpha: soft disc via gl_PointCoord in fragment, additive blending, depthWrite off, depthTest on (so floor occludes? floor is below; fine either way—use depthTest true into trail buffer? trail buffer has no depth; render particles without depth in trail scene: occlusion between particles matters little with additive. But floor shouldn't occlude since floor is in main scene. OK: no depth in trail scene.

Composite shader: color = texture(trail); main scene rendered by RenderPass; AddPass adds trail * exposure; then bloom; then grade.

Star field: Points on sphere radius 400, shader with twinkle. Floor: circle geometry radius 60 at y=-7, shader polar grid + radial fade, subtle. Also faint reflection? skip.

Auto quality: fps watcher drops particle res 1024→512→256 and bloom.

Snapshot: composer.render() then canvas.toDataURL — need preserveDrawingBuffer or render synchronously before capture. I'll render then capture in same tick.

HUD: title, description hint, chips row (attractor buttons), sliders: Speed (dt multiplier), Trail (damp), Bloom, Volume; toggles: Morph(auto), Conduct, Orbit; buttons: Burst, Snapshot, Mute, HUD hide; stats line; toast.

Pointer conduct: when enabled, normalized pointer pos maps param indices per attractor (define which two params are "playable" per attractor + ranges). E.g., Lorenz rho∈[20,35] (y), sigma∈[6,14] (x). During morph/conduct, sim params update; sliders hidden values fine.

Energy estimate for audio: base per attractor + |Δparams| + burst spike + pointer velocity. Smooth with lerp.

Now the code. Let me structure the HTML file:

3. module script:
   • imports: three, OrbitControls, EffectComposer, RenderPass, ShaderPass, UnrealBloomPass.
   • ATTRACTORS array with name, params, extra defaults, center, scale, dt, bounds, vnorm, hue range, seed point, playable params.
   • GLSL strings: simFrag, simVert(trivial), pointsVert, pointsFrag, fadeFrag (trail decay), addPass shader, grade shader, star shaders, floor shaders.
   • GPGPU: create two WebGLRenderTargets (posA, posB) HalfFloat; simScene with fullscreen quad; initial positions texture filled with seeded data.
   • Trails: trailA/trailB targets (HalfFloat), fadeScene quad with trailPrev texture, then render pointsScene additively into same target (renderer.autoClear=false trick: render fade quad, then render points without clearing).
   • Main scene: stars, floor, glow sprite.
   • Composer: RenderPass(mainScene,camera) → addTrailsPass → bloom → gradePass(to screen).
   • UI wiring, audio, loop, morph state machine, keyboard, resize, snapshot, quality.

Check three@0.170 API: EffectComposer/RenderPass/UnrealBloomPass/ShaderPass import from 'three/addons/postprocessing/...'. OutputPass exists; with custom final pass to screen set renderToScreen on last pass (composer handles automatically: last pass renders to screen if renderToScreen true — in newer three, composer sets renderToScreen automatically on the final pass? No — EffectComposer sets this.renderToScreen = true on passes? Actually EffectComposer.render() uses pass.renderToScreen = (i === last)? It does: in EffectComposer, pass.renderToScreen is determined by pass.renderToScreen property... Let me recall: In three r170 EffectComposer.render: const isLastEnabledPass = i === lastEnabledPassIndex; pass.render(renderer, writeBuffer, readBuffer, deltaTime, maskActive); and inside passes they check this.renderToScreen. EffectComposer does NOT auto-set; but there's renderToScreen set via... Hmm, actually in recent three versions, EffectComposer does handle it: "renderToScreen is handled automatically by EffectComposer since r101"? Let me check: In current three.js EffectComposer source:

Yes — EffectComposer sets pass.renderToScreen automatically. Good, so I just add passes in order.

UnrealBloomPass with HalfFloat buffers fine.

For the "AddTrailsPass": a ShaderPass whose fragment adds texture: uniforms tDiffuse (auto), tTrail; fragment: gl_FragColor = vec4(c + trail*uTrailGain, 1). Then bloom. Then grade pass: tonemap-ish (ACES approx), vignette, grain, gamma? Keep renderer.outputColorSpace default; when using composer, the final pass should handle color space — with custom grade to screen I can do the sRGB conversion manually: pow(color, 1/2.2) approx or use LinearTosRGB. Since materials render in linear, final grade will do ACES + sRGB. But the main scene materials (stars/floor shaders) — I author their colors in "linear-ish" artistic space anyway; consistent since all custom shaders. Points additive also custom. OK.

One nuance: renderer.outputColorSpace affects only built-in materials' output encoding when rendering to screen — with render targets it's linear. All custom → fine.

Trail fade pass shader: c = texture(tPrev, vUv) * uDamp; also slight diffusion? Skip diffusion (needs blur); damp only, clamp.

gl_PointSize: size = uSize * (300/dist); clamp [1, 8]? For high-DPI multiply by pixelRatio.

DPR: cap at 2 (quality high), 1 low.

Now initial positions: generate Float32Array with random points in a box around seed; attractor will pull them in; life random 0..1. Some attractors (Thomas) need wider initial spread; seed box uniform per attractor... simpler: init around origin box of radius ~ spread param per attractor (store). On attractor switch (after morph completes), reseed all particles into new attractor region? During morph, blended field transports them — usually works nicely (classic trick). I'll reseed gradually anyway via life decay (lifetime ~ a few seconds), so particles naturally redistribute. Lifetime in seconds 3–8 random, decay faster at high speed.

NaN guard: if any component is NaN/Inf (check via !(abs(x)<1e6)) → reseed. In GLSL ES 3.0, isnan/isinf exist (WebGL2). Use them guarded.

Integrator RK4 with dt = uDt * uDtScale * uSpeed(user). Clamp dt.

Also add gentle global rotation of the sculpture (scene group rotation.y slow) — rotate the points rendering only? Points are rendered in trail scene with world transform; put rotation in vertex shader via uRot matrix (cheap: rotate XZ by angle). Stars/floor static. Rotating sculpture + camera auto-orbit might be too much; make sculpture rotation optional subtle (on, 0.05 rad/s) — trails make it dreamy. Yes include, toggleable? Just keep constant subtle; speed slider affects sim not rotation.

Alright — also "ghost" core mesh: skip.

Audio graph:

• master = GainNode(0.8*volume) → destination... plus convolver? skip convolver, use feedback delay for space.
• droneOsc1 saw 55Hz, droneOsc2 saw 551.007, sub sine 27.5 → droneGain(0.05) → lowpass(400 + energy1600, Q=4) → master.
• noise (pink-ish via lowpassed buffer) windGain 0.02 → bandpass sweep slow → master.
• pluck scheduler: every 0.25–2s (rate ∝ energy): triangle osc freq from pentatonic [220, 261.6, 293.7, 329.6, 392, 440, 523.3, 587.3]*0.5 or *1, gain env 0.0001→0.12 exp decay 1.2s → delay(0.35s, fb 0.35) → master.
• burst(): noise burst bandpass 400→4000 sweep, gain 0.25 decay 0.8; plus pluck chord.
• Audio starts on first pointerdown/keydown (button "Sound: On/Off").

Toast helper, $ helper.

Stats: fps EMA, particles count, params readout.

Keyboard shortcuts as planned.

Auto morph: if enabled, timer; morph duration 6s; uMix smoothstep; at end swap A=B, choose next (cycle), uMix=0... Actually morph from current to next: set B=next, mix 0→1; on complete A=B, mix=0. Params lerp similarly (prA→prB), scale/center/dt/vnorm lerp too — pass as uniforms uCenterA/uCenterB etc. and mix in shader with same mix value. Points vertex: center = mix(cA,cB,uMix), scale = mix(sA,sB,uMix).

Sim fragment mixes fields with uMix and params mix(pA,pB,uMix) per branch — do: fieldA = computeField(uTypeA, p, prA); fieldB = computeField(uTypeB, p, prB); v = mix(fieldA, fieldB, uMix). computeField with uniform int branch — fine.

dt = mix(dtA, dtB, uMix). bounds likewise.

Conduct modifies prA/prB components live (the active one mostly — modify both proportionally? modify only current dominant... simpler: conduct writes to a "user offset" vec2 applied to the playable params of BOTH A and B presets — offset in normalized range scaled by per-attractor range. Store offsets per attractor index so it persists. Actually simplest: conduct directly edits ATTRACTORS[i].params[j] within range; presets restored via Reset button (R). Good: add R = reset params.

Sliders: Speed (0.2–2×), Trails damp (0.90–0.995), Bloom (0–2), Volume (0–1). Buttons per above.

Alright, also small "feature chips" for attractors 1..8 with names.

Now — write it. I'll aim for clean, commented code. Let me carefully draft the entire file mentally then write in chunks. Given length, I'll write 5 chunks of heredoc.

Key risk areas to double check in static pass:

• All DOM ids used exist.
• Uniform names match.
• Balanced braces/backticks (template literals in GLSL).
• three r170: WebGLRenderTarget options {type:THREE.HalfFloatType, format:THREE.RGBAFormat, minFilter:Nearest, magFilter:Nearest, depthBuffer:false, stencilBuffer:false}. For GPGPU positions use FloatType? HalfFloat precision for positions up to ~50 with RK4 fine? Half float has ~3 decimal digits — Lorenz positions ±25 → resolution ~0.03. Trails would look chunky? Actually position quantization 0.03 in attractor space × scale 0.32 → 0.01 world — invisible. But integration error accumulates; Lorenz is chaotic anyway; fine. However life stored in w, fine. I'll use FloatType when available with fallback HalfFloat: check renderer.capabilities.isWebGL2 — FloatType color buffer needs EXT_color_buffer_float (WebGL2 widely supported). I'll try FloatType, fallback HalfFloatType. Trail buffers HalfFloat (need blending/linear — HalfFloat supports linear filtering widely; I use Nearest anyway; additive blending into HalfFloat requires EXT_color_buffer_half_float / float blend — WebGL2 + EXT_color_buffer_float covers rendering; blending float is allowed with that ext in WebGL2). Use HalfFloat for trails (safer for blending), Float for sim with fallback.

Also composer default buffers: fine.

Points geometry: BufferGeometry with attribute 'uv2'? I'll store reference uv in 'position' attribute? Points need position attribute to exist; I'll create position attribute = uv (x,y in [0,1], z=0) and use it in shader to sample texture. Set frustumCulled=false on Points.

Sim scene: fullscreen triangle/quad: use THREE.OrthographicCamera(-1,1,1,-1,0,1) + PlaneGeometry(2,2) with sim material; standard GPGPU pattern.

Rendering into trail target: renderer.setRenderTarget(trailWrite); renderer.render(fadeScene, quadCam); // draws decayed previous renderer.render(pointsScene, camera); // additive points, autoClear must be false after first render — set renderer.autoClear=false before, restore after.

Fade quad covers screen in NDC with its own material (tPrev: trailRead.texture, uDamp).

Then swap trail targets; composite uniform tTrail = trailWrite... after swap, trailRead is the one just written. Standard.

Resize: trail targets setSize(wdpw, hdph)? Full res trails = heavy fill; use 0.5× res for trails at low quality, full at high. Simpler: trail scale factor 1.0 high, 0.75 low. Keep simple: trails at render size × (quality high?1:0.6). Points size unaffected much.

Bloom pass resolution handled internally.

Camera: PerspectiveCamera(55, aspect, 0.1, 1000), pos (0, 2.5, 16). OrbitControls target (0,0.5,0), autoRotate speed 0.6, damping.

Sculpture world radius ~6.5, floor at y=-7, radius 60.

Now let me also plan uniform list for sim material: uPosTex, uDt, uTime, uTypeA,uTypeB (int), uPrA,uPrB (vec4), uMix, uDtA,uDtB, uBoundA,uBoundB, uSeedA,uSeedB (vec3), uSpreadA,uSpreadB, uSpeed, uBurst (extra reseed probability), uLifeMin/uLifeMax? keep constants, uSeedNonce (float, changes on reseed so hash differs).

Points material uniforms: uPosTex, uPrA,uPrB,uTypeA,uTypeB,uMix (to compute speed for color), uVNormA,uVNormB, uCenterA/uCenterB (vec3), uScaleA/uScaleB, uRot (float angle), uSize, uPixelRatio, uHueA,uHueB, uTime, uOpacity.

computeField duplicated in points vertex shader (for speed) — fine.

Hash function for reseed: hash(uv * nonce).

life stored: on reseed life = mix(2.5, 6.0, hash) seconds; decay dt*(0.6 + 0.7*speedNorm). speedNorm in sim requires vnorm uniform too: uVNormA/B. ok.

Also add subtle curl-noise perturbation during morph to avoid collapse artifacts: when 0<uMix<1, add small random jitter ∝ sin(pi*mix)*0.5 — helps redistribute. Jitter via hash(time).

Alright, audio "energy": e target = clamp(0.25 + paramVel2 + burstEnv + pointerVel, 0, 1); smooth e += (target-e)dt2. Drone cutoff = 300 + e2200; pluck interval = 1.6 - e*1.3.

Snapshot: flash overlay div opacity animation + capture.

Quality auto-degrade: fps<45 for 4s → reduce particle res (rebuild sim textures 1M→262k→65k), toast.

HUD hide: H toggles .hidden class on panels.

Now write the code. I'll be careful with template literal usage: GLSL in template literals with ${} only where intended.

Chunk plan:

1. DOCTYPE, head, CSS, body DOM, importmap, script open, imports, helpers, ATTRACTORS config.
2. Renderer/scene/camera/controls, stars, floor, glow.
3. GPGPU sim (shaders + setup + reseed), points scene/material, trail system.
4. Composer passes (add-trails shader, grade shader), resize.
5. Audio engine.
6. UI wiring, morph state machine, loop, keyboard, snapshot, quality, boot. Close tags.

Let me now write all the GLSL carefully.

SIM FRAG:

Check Chen eq: dx=a(y−x), dy=(c−a)x − xz + cy, dz=xy − bz. With a=35,b=3,c=28. In code: pr.x=a, pr.y=b, pr.z=c → dy=(pr.z-pr.x)p.x - p.xp.z + pr.zp.y ✓, dz=p.xp.y - pr.y*p.z ✓.

RK4 on blended field:

Hash:

Main:

Texture size: use vec2 ts = vec2(textureSize(uPosTex,0)); vec2 uv = gl_FragCoord.xy / ts; — textureSize available in WebGL2 GLSL300? Our shader compiled as GLSL ES 3.0 if using texture(). three.js ShaderMaterial defaults to GLSL1 syntax auto-upgraded; texture() works via #define in three. textureSize also available. Fine. Actually three injects #define texture2D texture for ES3; textureSize is native in ES3.

POINTS VERT:

gl_PointSize clamp: min via max(sz...,1.0). Also if life near end, could shrink: pass life fraction? life max varies; skip.

POINTS FRAG:

Blending: AdditiveBlending, transparent true, depthWrite false, depthTest false.

Fade frag:

Quad vertex: gl_Position = vec4(position.xy,0.,1.); vUv = uv;

Add-trails pass frag:

Note: ShaderPass provides tDiffuse automatically; add tTrail uniform.

Grade pass frag:

Stars: Points 1600, on sphere r 300–500, vertex: size by hash, twinkle sin(time*f+p); frag soft dot, color slightly blue/white mix. Additive.

Floor: CircleGeometry(70, 96) rotated -PI/2 at y=-7. Shader: polar grid: radial lines + rings via fract, intensity fades with r; subtle pulse from center synced to burst? keep static + slow rotate? static. Color faint violet. Also a radial glow disc (separate plane, additive, radial gradient) radius 12 under sculpture.

Background: scene.background = new Color(0x040309). Fog? Points far… add FogExp2 0.008 for floor depth — floor custom shader ignores fog unless implemented; skip fog.

Now morph choreography in JS: state: curIndex, nextIndex, mix (0..1), morphing bool, autoMorph bool, morphT. startMorph(to): set B uniforms to ATTRACTORS[to], nextIndex=to, morphing=true, mix 0→1 over 6s smoothstep. On complete: curIndex=next; copy B→A uniforms; mix=0; morphing=false. Conduct modifies ATTRACTORS[cur].params live — but uniforms were copied at morph setup... simpler: uniforms hold LIVE values; each frame, if not morphing: prA = current params (so conduct edits reflect immediately). During morph: prA frozen at start (snapshot), prB = target params (also live if user conducts? freeze too). Implement: on morph start, snapshot prAFrozen, prBFrozen. When idle, uPrA.value = currentParams().

Also scale/center/dt/vnorm/seed/spread/bounds lerp similarly — snapshot approach for all.

Toast on morph start: "Morphing → {name}".

Auto-morph every 40s when idle.

Audio engine object with init on gesture, methods: setVolume, burst(), update(dt, energy), toggle.

Burst action: uBurst=0.35 for one sim frame? Set uniform then after one step set 0. Implement via variable consumed in loop. Plus audio burst + bloom kick (bloomPass.strength spike decaying) + toast.

Speed slider multiplies uSpeed 0.2..2.2.

Trail slider sets uDamp 0.90..0.995 (display %).

Bloom slider 0..2.

Now sizes: SIM_SIZES = {high:1024, med:512, low:256} → particles 1,048,576 / 262,144 / 65,536. Default med? High-end wow → default high (1M). Auto-degrade handles slow machines. Start high.

Rebuild sim on quality change: create new targets + points geometry with new uv set; dispose old.

Init texture: DataTexture Float32 RGBA filled with seed-region random points + random life; needsUpdate.

Check FloatType renderable: if (!renderer.capabilities.isWebGL2 && !renderer.extensions.has('OES_texture_float')) fallback. r170 is WebGL2-only effectively (WebGL1 dropped in r163+? WebGL1 support removed in r163). three r170 requires WebGL2. Good — FloatType render target requires EXT_color_buffer_float which is near-universal on WebGL2; still guard with try or fallback HalfFloat. I'll just use HalfFloat for sim too — hmm, precision for RK4 chaotic: fine visually (trails are aesthetic). But positions up to bound 80 with half float → step ~0.06 quantization at 80 → jitter visible in trails? Trails are additive glow — slight dithering actually adds texture. Previous demos (physarum 1M agents) presumably used float. I'll use FloatType with runtime check: create test RT and renderer.checkBuffer? Simplest: const simType = renderer.extensions.has('EXT_color_buffer_float') ? THREE.FloatType : THREE.HalfFloatType; — has() exists on WebGLExtensions in r170? renderer.extensions.has(name) exists (used internally). Yes, WebGLExtensions.has is public-ish. I'll guard with optional chaining fallback true... If has() missing, default HalfFloat. I'll write: let simType = THREE.HalfFloatType; try { if (renderer.extensions.has('EXT_color_buffer_float')) simType = THREE.FloatType; } catch(e){}.

OK. UI HTML:

• #title-panel: h1 ATTRACTORIUM? Name the demo... "019 — Strange Attractor Observatory". Title ideas: "Attractorium", "Strange Gardens", "CHAOS BLOOM", "Lorenz Garden". I like "Attractorium". Demo folder: 019-attractorium. Title: "Attractorium — A Strange Attractor Observatory".

• #controls panel: rows: Row chips: 8 attractor chips (name + key number). Row sliders: Speed, Trails, Glow(bloom), Volume. Row buttons: ▶ Morph (M), Burst (B), Conduct (C), Orbit (O), Sound (N?) — use "Sound (U)"? Keep: Sound toggle button only. Snapshot (S), Hide HUD (H).

• #stats panel bottom-right.

• #toast.

• #flash for snapshot.

• help hint in title panel with kbd list.

Pointer conduct: pointermove on canvas when conduct on: px = (x/w)*2-1, py = 1-(y/h)*2? map to param ranges per attractor: each attractor def has conduct: {i: paramIndex, min, max} ×2. Update params, and mark userTouched.

Pause: Space toggles sim advance (uDt=0) but keep rendering/camera.

Energy param velocity: track params delta.

Let me also handle context: prefers-reduced-motion? skip.

Now — verify param ranges for conduct are safe (attractor stays bounded):

• Lorenz: sigma 6..16, rho 22..35.
• Rössler: a 0.1..0.3, c 3..8.
• Aizawa: a 0.8..1.1, d 3..4.
• Halvorsen: a 1.3..2.2 (x), and modulate 4.0 coefficient? Not a param in vec4... use only one param for Halvorsen + map Y to dt? Map Y to uSpeed? Hack: second axis modulates a "flow" (speed) 0.5..1.5. Fine: conduct entries can target 'speed'.
• Thomas: b 0.16..0.24 (x), speed on y.
• Dadras: a 2.5..3.5, c 1.2..2.2.
• Four-Wing: a 0.1..0.3, c -0.55..-0.25.
• Chen: a 30..40, c 22..34.

Good.

Now, Rössler spiral is mostly flat (z small until spike) — with center (0,0,4) scale 0.55 nice.

Double-check Halvorsen stability: dt 0.004, positions bounded ~±15? Halvorsen attractor extent ~±10 with a=1.89. bounds 30. scale 0.7 → world ±7. vnorm: velocities magnitude up to ~300? vnorm normalizes for color/life only: set per attractor after test. I'll compute rough max speed in node test and set vnorm = 1/maxSpeed*0.9 approx.

Let me write a node script to integrate each attractor with RK4 at chosen dt for 200k steps, checking boundedness and measuring extent & mean/max |v| to set centers/scales/vnorm. Node available? Check. Then finalize constants.

Also decide seeds/spreads:

• Lorenz seed (1,1,20) spread 10.
• Rössler seed (5,5,0) spread 6.
• Aizawa seed (0.1,0,0.5) spread 0.8.
• Halvorsen seed (1,0,0) spread 4.
• Thomas seed (1,1,1) spread 3.
• Dadras seed (1,1,1)? extent ~±5; spread 3.
• FourWing seed (1,1,0.5) spread 2.
• Chen seed (1,1,20) spread 8.

Node test will confirm bounded.

One more consideration: additive blending of 1M points of size ~2px into trail buffer → bright; gain/damp tuned; exposure in grade 1.0; bloom threshold 0.25 strength 0.9 radius 0.6.

Point opacity per particle low (0.85aa with color pal ~ up to 1) — with 1M points overlapping heavily it will saturate → good for bloom.

Alright. Also add subtle "core glow" sprite at sculpture center (additive, small) for depth anchor. And a ring/orbit path? skip.

Time to write files. After writing, static checks:

• node --check on extracted module JS (extract between and , remove import lines? node --check doesn't resolve imports — it only parses, imports fine syntactically). Parse with node --check requires .mjs? node --check file.mjs works for ESM. I'll extract and check.
• DOM id cross-check via grep.
• brace balance check.

Then update /space/demos/index.html adding card at top.

Let me start: check node availability and run the attractor math test to lock constants.

********************************************************************************************************************************************************************************************m).

Issues:

1. Rössler escaped — likely burn-in from seed (5,5,0) with dt=0.02: Rössler spikes in z grow fast; RK4 dt 0.02 should be OK... let me investigate: maybe it escaped during burn-in (trajectory needs smaller dt at spikes). Try dt 0.01 and seed (5,5,1).
2. Thomas converged to fixed point (radius 0): b=0.208186 with RK4 dt 0.05 from seed (1,1,1) decayed to a fixed point. Thomas is chaotic for b=0.208186 in continuous time with small dt; my dtscale: dt here is raw step 0.05 — should be fine for accuracy. Actually Thomas with b=0.208186: it's chaotic but from (1,1,1) it might land on a stable periodic orbit/fixed point — Thomas has bistability: for b below ~0.209 it's chaotic transient then may settle? Known: Thomas' cyclically symmetric attractor is chaotic for b < ~0.2081... hmm at b=0.208186 it should be chaotic. But it collapsed to fixed point (2.58,2.58,2.58)? Fixed point satisfies sin(p)=b p → p≈? sin(2.58)=0.533, bp=0.537 ✓ so it converged. From (1,1,1), Thomas can decay for some b. Try seed (3,2,1) asymmetric or b=0.19 (robustly chaotic), or b=0.1998. Let me test b=0.19 and different seeds.
3. Four-Wing collapsed to fixed point: a=0.2,b=0.01,c=-0.4 from (1,1,0.5) converged. Classic four-wing params a=0.2, b=0.01, c=-0.4 are chaotic from (1,1,1)? It converged to (0,1.55,0)... hmm radius 0. Try seed (2,1,1) or params a=0.2,b=0.01,c=-0.4 with dt 0.01 should be chaotic... Known four-wing: a=0.2,b=0.01,c=-0.4, initial (1,1,1) → chaotic. But it died. Maybe dt too large during transient? Let me test more carefully with smaller dt.

Also Dadras radius x=18.9 is larger than I assumed (extent ±19) — center (0.9,-2,-1), radius ~19 → world scale 0.32, bounds 60.

Let me retest the three problem cases with tweaks.

Interesting:

1. Rössler escapes for all dt with my formula. Let me check my Rössler equations: standard Rössler: dx = −y − z; dy = x + a y; dz = b + z(x − c). I wrote dz = b + z*(z - c) — WRONG! It's z*(x−c), using x not z. That's the bug. Fix: pr.y + p.z*(p.x - pr.z).
2. Thomas: collapses from symmetric seed (1,1,1) because symmetric trajectory can fall into stable fixed point — Thomas b=0.208186 has coexisting attractors. From asymmetric seeds it's a nice chaotic attractor with radius ~2.5. Since particles seed in a box around a seed point with spread, some symmetric ones collapse. Actually collapsing to a fixed point means particles pile up there and die? They never die from collapse (life decays anyway and reseeds). With random box seeds spread 3, most will be chaotic, a fraction drain into fixed points — actually that creates bright dot artifacts. Better choose b=0.1998 (robustly chaotic, radius 2.64, from (2,1,3)) and seed (2,1,3) spread 3. Even so, symmetric initial conditions measure-zero — random float seeds are never exactly symmetric. But basin of the fixed point may still catch some; they'll reseed within ~6s. Acceptable. b=0.1998, vmax 1.7, vmean 0.7, dt 0.05 — but note vmean tiny → vnorm must be ~1/1.7=0.6 for color.

Actually wait — Thomas from (2,1,3) at b=0.1998 gives radius 2.64 centered (1.31,1.31,1.31). Hmm, but classic images of Thomas attractor are centered near origin with radius ~3-4. Center (1.31) each axis suggests the attractor sits offset — that's fine; center param handles it.

3. Four-Wing collapses from those seeds to a fixed point (0,~1.6,0). Hmm, four-wing with a=0.2,b=0.01,c=-0.4 is supposed to be chaotic... let me check equations: Four-wing (Wang et al.): dx = a x + y z; dy = b x + c y z; dz = −z − x y. With a=0.2,b=0.01,c=−0.4 from (1,1,1)... Maybe my memory of params is off; common: a=0.2, b=0.01, c=-0.4, initial (1,1,1) chaotic per literature. But simulation says convergence. Let me test other param sets and seeds, and verify against known alternative four-wing: dx = a x + y z? Another common set: a=0.2,b=0.01,c=-0.4; or Liu's. Let me just scan a few param sets and seeds quickly.

Also double-check Dadras vmax 331 — fine with dt 0.005? vmax 331 × dt 0.005 = 1.66 per step — RK4 might be inaccurate at spikes but it stayed bounded. OK. dt 0.004 safer. Actually vmean 12 low, spikes 331 brief. Fine.

Let me fix Rössler and scan four-wing.

Rössler fixed: c=(1.16,-1.48,11.43)?? Hmm, z center 11.43 radius 11.42 — that means z spikes up to ~23, min ~0. The spiral is mostly z≈0 with spikes to 23. Actually for c=5.7, z spikes go up to ~c*... yes z spikes approach x-c scale... The attractor: x,y radius ~10, z 0..23. So center for display should be (1.2,-1.5,3) with most of the visual in the plane; spikes reach z 23. Set center (1.2,-1.5,4), scale 0.5, bounds 60. dt 0.01.

Four-wing: my equation must be wrong. Checking literature: Four-wing attractor (2009, Wang et al.): dx/dt = a x + y z dy/dt = b x + c y z dz/dt = −z − x y with a=0.2, b=0.01, c=−0.4... Every seed converges to (0, c?, 0)-ish fixed point. Fixed points: dz=0 → z = −xy. dx=0 → ax + yz = x(a − y²?) ... if x=0: dy = c y z = 0; dz: −z = 0 → z=0; dx: yz=0 ok; then dy=0 → any y fixed. So y-axis is a line of fixed points! With b x term small... if x decays to 0, trajectory sticks to the y-axis line of equilibria. Eigenvalue along x: a + ... at x=z=0: dx/dt = a x → a=0.2>0 unstable in x, hmm but yz=0. Perturbation x grows 0.2x... but maybe orbit falls back. The literature says it's chaotic for a=0.2,b=0.01,c=−0.4. Let me double check sign convention: maybe dz = −z − x y is right... Hmm, actually the well-known four-wing system by Qi et al. has different form. The simple one above: Zhou/Chen... Let me just drop Four-Wing and use another well-behaved attractor. Candidates:

• Halvorsen ✓ already have.
• Rabinovich–Fabrikant: dx = y(z − 1 + x²) + γ y; dy = x(3z + 1 − x²) + γ x; dz = −2z(α + x y); α=1.1, γ=0.87. Beautiful, bounded ~±1.5.
• Sprott systems (e.g., Sprott B/F) — nice.
• Lü: dx = a(y−x), dy = −x z + c y, dz = x y − b z; a=36,b=3,c=20. Similar family to Chen/Lorenz.
• Dequan Li: dx = a(y−x) + d x z; dy = e x + k y − x z; dz = b z + x y − f x²; params a=40, d=1.833, e=0.16? complex.
• Arneodo: dx=y, dy=z, dz=−a x − b y − z + c x³, a=−5.5,b=3.5,c=−1?
• Rabinovich–Fabrikant is gorgeous (scroll waves). Let me test RF and Lü.

I'll replace Four-Wing with whichever tests nicely.

RF collapsed to a periodic orbit (z radius 0). RF at γ=0.87, α=1.1 should be chaotic... it settled into a limit cycle from this seed. Hmm. Actually RF is chaotic at α=1.1, γ=0.87 — but maybe it needs transient longer or different seed. Whatever — Lü works beautifully (like Lorenz/Chen family, nice double-scroll-with-bridge).

Current roster:

1. Lorenz ✓ c(0,0,25) r~26, scale 0.28, dt 0.006, vmax 384, vmean 96 → vnorm ≈ 1/384*? For color normalization I want speedNorm ~ |v|/vmax reaching 1 at peaks: vnorm = 1/vmax ≈ 0.0026. vmean*vnorm ≈ 0.25 good.
2. Rössler ✓ c(1.2,-1.5,4) r~11(+z spike 23), scale 0.5, dt 0.01, vmax 64 → vnorm 0.016.
3. Aizawa ✓ c(0,0,0.75) r~1.5, scale 4.5, dt 0.01, vmax 5.6 → vnorm 0.18.
4. Halvorsen ✓ c(-2.9,-2.9,-2.9) r~9.2, scale 0.75, dt 0.004, vmax 95 → vnorm 0.011.
5. Thomas ✓ b=0.1998, c(1.3,1.3,1.3) r~2.7, scale 2.6, dt 0.05, vmax 1.7 → vnorm 0.6.
6. Dadras ✓ c(0.9,-2.1,-1) r~19, scale 0.34, dt 0.004, vmax 331 → vnorm 0.003.
7. Lü ✓ c(0,0,22) r~24, scale 0.28, dt 0.002, vmax 631 → vnorm 0.0016.
8. Chen ✓ c(0,0,27.5) r~29, scale 0.24, dt 0.002, vmax 981 → vnorm 0.001.

Bounds (kill radius in attractor space): Lorenz 80, Rössler 60, Aizawa 6, Halvorsen 40, Thomas 15, Dadras 60, Lü 80, Chen 90.

Seeds: Lorenz (1,1,20) spread 8; Rössler (5,5,1) spread 6; Aizawa (0.1,0,0.5) spread 0.8; Halvorsen (1,0,0) spread 5; Thomas (2,1,3) spread 3; Dadras (1,1,1) spread 5; Lü (1,1,15) spread 8; Chen (1,1,20) spread 8.

Conduct mappings (x→param0, y→param1) safe ranges:

• Lorenz: σ∈[6,16], ρ∈[20,40] (rho 40 still bounded? vmax grows; dt 0.006 RK4 with rho 40: v spikes ~550×0.006=3.3/step — borderline but ok; cap rho 38).
• Rössler: a∈[0.1,0.3], c∈[3,9] (c=9: spikes bigger; bounds 60 covers z spike ~ up to c? z spike ~ up to (x-c)z... could reach 40? keep c≤8).
• Aizawa: a∈[0.8,1.1], d∈[3.0,4.2].
• Halvorsen: a∈[1.2,2.4] (a→2.4 still bounded ~±11? test showed a=1.89 r9; fine), y→speed.
• Thomas: b∈[0.15,0.23], y→speed.
• Dadras: a∈[2.4,3.6], c∈[1.2,2.4].
• Lü: a∈[30,42], c∈[16,26].
• Chen: a∈[30,40], c∈[20,34].

For "speed" as second axis for Halvorsen/Thomas: implement conduct entry as {i:-1} meaning modulate a per-attractor speed multiplier? Simpler: give each attractor two real params where possible. Halvorsen has only 'a' — second axis can modulate... Halvorsen variant with two params: use generalized Halvorsen with coefficient params? Keep simple: for Halvorsen & Thomas second axis modulates global flow speed multiplier (uConductSpeed 0.5..1.8). Implement per-attractor conduct defs: [{label, i, min, max}, {label, i:-1(speed), min, max}].

Alright. Also world display scale so sculpture ~ radius 6-7 world units:

• Lorenz: r 26 → scale 0.27 → 7.0
• Rössler: r 11.4(z 23 spike) → scale 0.5 → ~5.7 (spikes to 11 ok)
• Aizawa: r 1.5 → scale 4.4 → 6.6
• Halvorsen: r 9.2 → scale 0.72 → 6.6
• Thomas: r 2.7 → scale 2.5 → 6.75
• Dadras: r 19 → scale 0.35 → 6.65
• Lü: r 24 → scale 0.28 → 6.7
• Chen: r 29 → scale 0.23 → 6.7

Now write the demo. File: /space/demos/019-attractorium/index.html. Also update /space/demos/index.html.

Let me now write the whole HTML carefully in chunks. I'll compose it fully, mindful of every uniform and id.

Structure plan (ids):

• canvas#stage
• #title-panel (h1, .sub, #hint with kbd)
• #controls: rows: #chips (buttons .chip data-i), sliders: #sl-speed,#sl-trail,#sl-bloom,#sl-volume with .val spans; buttons: #btn-morph,#btn-burst,#btn-conduct,#btn-orbit,#btn-sound,#btn-snap,#btn-hud
• #stats (bottom-right): #stat-fps,#stat-parts,#stat-name,#stat-params
• #toast
• #flash

JS module sections:

1. imports, helpers ($, clamp, lerp, toast)
2. ATTRACTORS data
3. renderer, camera, controls, scenes
4. stars, floor, glow sprite
5. GPGPU
6. points
7. trails
8. composer
9. audio
10. UI + morph + loop

Colors/aesthetic: deep violet/ink background #040309, gold/violet/cyan accents. Title gradient gold→violet→cyan similar to threshold? Vary: use cyan→magenta→gold.

Write chunk 1 now: head + CSS + body + importmap + script start + helpers + ATTRACTORS.

For the importmap, use three@0.170.0 same as 018.

Details for chips: 8 buttons with number key + name.

Stats: update 4×/s.

Morph default ON (auto), first auto morph after ~45s? Start with Lorenz. Also cycle order designed for nice transitions: 0→3 (halvorsen)→2 (aizawa)→6 (lü)→1 (rossler)→4 (thomas)→5 (dadras)→7 (chen)→0... just cycle +1 with random? Sequential cycling fine, or pick random ≠ cur. I'll cycle sequentially for predictability.

Audio engine: as planned. Frequencies: base pentatonic minor: A2 110, C3 130.8, D3 146.8, E3 164.8, G3 196, A3 220, C4 261.6, D4 293.7, E4 329.6. Drone root 55 Hz (A1).

Now careful design of the frame loop:

Note: when paused, skip sim but still render trails (fade continues — fine, it'll slowly fade; actually if paused we might prefer freezing trails too; fade continuing looks like dissolving — acceptable, even nice).

The "conduct" pointer: listen pointermove on window; if conductOn and pointer over canvas (not panels): nx = e.clientX/innerWidth, ny = 1 - e.clientY/innerHeight; target params lerp.

Param smoothing: keep displayedParams = current lerp toward target each frame (fast lerp 8/s) for buttery response.

Energy: base 0.3 + paramVel30 clamped + burstEnv + morph activity 0.25sin(pi*mix).

Auto-quality: track EMA fps; every 2s check: if fps<42 and level can decrease → drop (high→med→low: rebuild sim/points; low also dpr 1). If fps>58 for 20s and level<userMax? Keep it simple: only degrade, never upgrade; user can toggle quality button cycles high/med/low.

Quality button: label "Quality: High". On click cycles and rebuilds.

Rebuild sim function: creates posA/posB RTs size N with Float/Half type, fills DataTexture, recreates sim material? Material reusable — just re-render with new targets. Points geometry: rebuild BufferGeometry with uv positions attribute count N*N, dispose old geometry; update pointsUniforms texture. Also update stats label.

Also guard: uNonce increments each reseed/fill to decorrelate hashes.

Snapshot:

toDataURL on WebGL canvas without preserveDrawingBuffer works if called immediately after render in same task — composer.render() then toDataURL synchronous → OK.

Toast helper with timeout.

Keyboard mapping as planned: keys 1-8 select (immediate morph), m morph next, b burst, c conduct, o orbit autorotate toggle, p/space pause, s snapshot, h hud, r reset params, g quality? Quality via button only; add q cycles quality. n sound toggle (m taken) — use 'u'? Weird. Use 'x' for sound? Let's: N = sound on/off. Fine.

HUD hide: add class to body 'no-hud' → panels opacity 0 pointer-events none, but keep #toast visible.

Star shader:

vertex:

frag:

Additive blending, depthWrite false. Stars distributed on upper hemisphere-ish full sphere radius 350-480, avoid near floor plane? fine anywhere.

Floor shader (polar grid):

Simpler: ring = abs(fract(r*0.55)-0.5)2.0 → line where fract~0 → use fwidth-free: line = smoothstep(0.08,0.0,abs(fract(r0.55)-0.5)-0.42)? Let me do:

Hmm let me write clean:

• rings: float ring = smoothstep(0.05, 0.0, abs(fract(r * 0.55) - 0.5) - 0.44); fract∈[0,1), minus 0.5 → [-0.5,0.5), abs → [0,0.5]; subtract 0.44 → negative near center... produces line width ~0.06 in fract units. OK.
• spokes: float sp = smoothstep(0.02, 0.0, abs(fract(ang/6.28318*24.0)-0.5)-0.47) * smoothstep(4.0, 8.0, r); fade spokes inside r<4.
• radial fade: float fade = smoothstep(60.0, 12.0, r);
• color violet-ish: vec3(0.45,0.35,0.9)
• alpha = (ring0.5 + sp0.22) * fade * 0.35; also center glow spot: + smoothstep(9.0,0.0,r)0.05 FragColor vec4(colalpha? , ) with additive blending → vec4(colintensity,1). Use AdditiveBlending, so write coloralpha.

CircleGeometry radius 60, 128 segments, rotated x -PI/2, y=-7. In shader compute vP from position attribute before rotation: since geometry local coords are in plane XY (circle is in XY facing +z), after mesh rotation it's flat. Use varying vec2 vP = position.xy (local).

Glow sprite: PlaneGeometry(26,26) at y=-6.9 rotated flat, radial gradient shader additive: color mix of current hue? Uniform uHueA/uHueB driven — nice touch: plinth glow tinted to attractor hue. pal(hue-ish) in JS compute THREE.Color and set uniform. Add intensity pulse with energy.

I'll compute plinth color in JS: new THREE.Color().setHSL(0.72 - hue*0.5?...). Simpler: same cosine palette in JS: pal(t)= a+b cos(2π(c t+d)), with a=b=0.5,c=1,d=(0,0.33,0.67)+hue... t fixed 0.7. Fine, compute in JS.

Camera start: (0, 3.5, 17), target (0, 0.8, 0).

Now composer buffer type: default UnsignedByte — additive trails + bloom threshold on LDR buffer clips. Set composer with HalfFloatType render target: new EffectComposer(renderer, new THREE.WebGLRenderTarget(w,h,{type:THREE.HalfFloatType})). In r170 EffectComposer defaults to HalfFloatType already (since r152-ish default HalfFloat). Yes, modern three EffectComposer uses HalfFloatType by default. Good, no action needed.

UnrealBloomPass(resolution, strength, radius, threshold): new UnrealBloomPass(new THREE.Vector2(w,h), 0.9, 0.55, 0.22).

Now, particle count labels: 1M / 262k / 66k.

One more detail: OrbitControls import path 'three/addons/controls/OrbitControls.js'.

Panel styling: reuse aesthetic: rgba(8,6,16,0.62), border rgba(140,120,255,0.18), backdrop blur. Accent gradient: #5ff2e0 (cyan) → #a78bfa (violet) → #f0c878 (gold).

Buttons/chips style: small rounded, hover glow, .active state.

Range inputs styled with accent-color.

I think I'm ready to write. Total file ~1200-1350 lines. Let me write chunk by chunk, being careful.

Chunk 1: HTML head/CSS/body/importmap.

Note about type="module" script and heredoc: content includes backticks (template literals) — fine inside quoted heredoc.

CSS details — write compact but complete.

Let me think about the exact uniform object sharing: I'll create simUniforms once and assign textures per frame (uPosTex). Since material uniform objects shared, rebuild keeps same uniforms object.

For points material, uniforms shared too; uPosTex set per frame to posRead.texture.

Vertex shader for points must include attribute vec3 position; — three auto-injects position attribute declaration for ShaderMaterial? For ShaderMaterial, three injects built-in attributes (position, normal, uv) declarations automatically in WebGL2? Yes — three prepends attribute declarations for position/normal/uv in the vertex shader prefix. So use position.xy as uv. Good.

texture() in vertex shader: fine WebGL2.

For the sim material, it's a fragment-only computation on PlaneGeometry(2,2) with vertex: void main(){ gl_Position = vec4(position.xy, 0.0, 1.0); }.

One caveat: three's default prefix includes precision and defines; my precision highp float; duplicate is harmless? Duplicate precision statements are allowed? Redefining precision is allowed in GLSL (later overrides). Actually multiple precision statements are legal. But three already prepends precision highp float; — adding mine again is legal GLSL. To be safe, omit my own precision lines (three handles it).

textureSize: in three GLSL3? ShaderMaterial defaults GLSL1 syntax but three compiles with #version 300 es when WebGL2? No — three always uses GLSL1-style shaders with WebGL2 compatibility defines UNLESS material.glslVersion = THREE.GLSL3. With WebGL2, three prepends #version 300 es always (since r118 WebGL2 uses GLSL3 under the hood with compatibility defines: texture2D → texture). Yes: three.js shaders on WebGL2 are compiled as GLSL ES 3.0 with #define texture2D texture. So textureSize works, isnan/isinf work.

GLSL fragColor: three defines out highp vec4 pc_fragColor; #define gl_FragColor pc_fragColor. So gl_FragColor fine.

Alright — also any(isnan(np)): isnan(vec3) returns bvec3; any() works. isinf similar. Available in ES3.0 ✓.

One risk: uTypeA/uTypeB as int uniforms with branching — fine. Set via {value: 0} — three infers int from...? For ShaderMaterial uniform int, value must be number and three sets via gl.uniform1i if the GLSL declares uniform int. three's uniform system looks at the shader's active uniform type — it introspects. Yes, it uploads based on declared type. ✓

Burst uniform uBurst float; set 0.35 for exactly one frame.

Life reseed also triggered at init: initial life random ensures staggered.

Morph transition with uTypeA=uTypeB possible if user mashes; guard: if morphing and user selects, redirect nextIndex.

Also add "shuffle" small button? skip, M cycles next sequentially... Actually auto-morph sequential; M picks random different one. ok.

HUD stats param readout: show current params formatted: σ10.0 ρ28.0 β2.67 — per attractor labels array.

Param labels:

• Lorenz: ['σ','ρ','β']
• Rössler: ['a','b','c']
• Aizawa: ['a','b','c','d']
• Halvorsen: ['a']
• Thomas: ['b']
• Dadras: ['a','b','c','d']
• Lü: ['a','b','c']
• Chen: ['a','b','c']

Stats show first 3-4 labels with current values.

Energy function:

Audio pluck scheduling: nextPluck -= dt; if <0 { pluck(); nextPluck = lerp(2.2, 0.5, energy) * (0.7+0.6*Math.random()); }

Now write everything. I'll write the file in ~6 chunks. Let me be extra careful about:

• uniform name consistency
• all referenced ids exist
• every function defined before use at call time (module top-level runs in order; functions hoisted via function declarations).

Also: chips for 8 attractors: create dynamically from ATTRACTORS to reduce HTML.

HTML body skeleton:

Sliders:

• Speed 0.2..2.2 step .01 init 1 (id sl-speed, val val-speed)
• Trails 0.90..0.995 step .001 init 0.965 (sl-trail) display as % mapped? display raw.
• Glow 0..2 step .01 init 0.9 (sl-bloom)
• Volume 0..1 step .01 init 0.7 (sl-volume)

Buttons: Morph⟶(btn-morph), Burst(btn-burst), Conduct: Off(btn-conduct), Orbit: On(btn-orbit), Sound: Off(btn-sound), Snapshot(btn-snap), Quality: High(btn-quality), Hide(btn-hud).

Alright, writing now. Chunk sizes ~200-260 lines each, 6 chunks.

One more check — three r170 THREE.sRGBEncoding removed (renamed); I don't need it. renderer.outputColorSpace default SRGBColorSpace — affects only when rendering to screen with built-in materials... Since final pass is custom ShaderPass to screen, and the grade shader does pow(1/2.2) manually — the renderer may also apply output encoding to the quad? For ShaderMaterial, no automatic encoding is appended (encoding chunk only in built-in materials via colorspace_fragment which ShaderMaterial doesn't include). ✓

Set renderer.toneMapping = THREE.NoToneMapping (default anyway).

For Points material: blending THREE.AdditiveBlending, transparent:true, depthWrite:false, depthTest:false.

For stars: same but depthTest true? Stars are background — they should be behind everything; render them with depthWrite false, and they're at r≫ so fine with depthTest true. Points sculpture has no depth into main scene anyway (different pass). Floor: additive too? If floor is additive, stars behind floor won't be occluded — fine aesthetically.

Order: main scene renders bg color + stars + floor + plinth glow; then trails added; bloom; grade.

Also: controls.autoRotate = true default (orbit on).

Burst also gives camera slight shake? subtle: cameraShake variable decaying, applied as random offset to camera pos after controls.update... offsetting camera directly fights controls; apply to a group? Skip shake; bloom kick + audio + reseed is enough feedback. Add FOV kick: camera.fov += burstEnv decay... keep simple: bloom kick only.

Snapshot flash: #flash div CSS animation triggered by class toggle.

Auto-morph: tAuto countdown only when autoMorph && !morphing && !paused. Default autoMorph ON? If ON, conduct edits get wiped on next morph (params reset to preset of target anyway). Keep auto ON with 45s interval; toast notifies. Hmm, conduct persistence: store user offsets separately from presets? KISS: conduct edits live params; morph copies whatever current params are as A-snapshot. Presets restored on R or when cycling back (ATTRACTORS entries mutated...). To avoid permanent mutation, conduct writes into ATTRACTORS[i].live (a copy); presets in .params pristine; R resets live=params. uPrA reads live of cur when idle.

Implement: each attractor: params (pristine vec4 array), live (copy). currentParams(i) = ATTRACTORS[i].live.

During morph: prA = frozen snapshot of cur.live at morph start; prB = frozen snapshot of target.live at morph start (so conducting during morph doesn't wobble; acceptable).

dtA/dtB etc. similarly from attractor defs (not user editable).

OK writing now.

Chunk 1 content — let me write the CSS thoughtfully.

Also mobile: touch orbit works via OrbitControls; chips/buttons clickable. Fine.

Now writing chunk 1.

***************************************************************************************up.

I'm at 58% of time budget already?! timeProgress 0.584. Hmm — the run started and I've used a good chunk. iterationProgress 0.012 — odd, but the maxTime threshold matters. I should speed up: write remaining chunks efficiently with less chatter. Remaining: stars/floor/glow, GPGPU sim, points, trails, composer, audio, UI/loop. That's ~700 more lines. Let me write them in 3 bigger chunks, then verify quickly, update index, and finish.

Keep going fast, no more calibration detours.

**********************************************************************it.

Wait — there's a bug in buildSim: I render the sim shader with uDt=0... actually uDt default value is 0 at first frame? I set uDt each frame in loop. At build time uDt.value is whatever last frame left (could be 0.016). That would integrate one step — harmless. But also life decay uses uDt; harmless. But one issue: the sim step at build time requires the field uniforms to be set to the target attractor — I'll set uniforms before calling buildSim. Also initialTexture uses FloatType while target may be HalfFloat — fine (texture upload converts? DataTexture Float sampled in shader as float — yes, DataTexture type FloatType; the render target type is separate. Reading a FloatType texture and writing to HalfFloat target works.)

Also min(uDt, 0.033) * mix(uDtA,uDtB,uMix) * uSpeed — at build time uDt=0 → dt=0, and life -= 0 — but life from texture is fine, reseed only for out-of-bounds. Good — but wait, the initial texture already has seeded positions; running the copy with dt=0 copies positions + life, good. However uDt.value initial is 0 (set in uniform def) — at build time it's fine regardless.

One catch: in buildSim I render simScene which references uPosTex = init DataTexture — but the shader samples via gl_FragCoord — renders a fullscreen quad covering all pixels ✓.

Chunk 5: trail system + composer + passes.

Chunk 6: state/morph/conduct/UI/loop. Careful with all ids: chips, sl-speed, val-speed, sl-trail, val-trail, sl-bloom, val-bloom, sl-volume, val-volume, btn-morph, btn-burst, btn-conduct, btn-orbit, btn-sound, btn-snap, btn-quality, btn-hud, stat-name, stat-fps, stat-parts, stat-params, toast, flash.

Morph state machine:

But wait — conduct edits live params while idle; each frame when !morphing I should refresh uPrA from ATTRACTORS[cur].live (cheap). During morph keep frozen snapshots (already set).

Param smoothing: I'll keep displayParams per attractor updated by pointer; direct write to live with lerp smoothing:

• pointer targets stored as conductTX, conductTY (normalized 0..1); when conduct on, each frame map to param ranges and lerp live values toward target with 1-exp(-dt*6).
• conduct entries with i=-1 → modulate conductSpeed global multiplier (uSpeed *= conductSpeed).

uSpeed = speedSlider * conductSpeed.

Energy: track param delta:

Simpler: paramEnergy = smoothed norm of (live - prevLive) each frame × k.

Bursts: burstPending variable; set 0.4; loop consumes.

Reset (R): ATTRACTORS[cur].live = [...params]; if !morphing setA(cur) refresh; toast.

Chips: built dynamically; active = cur or nxt during morph.

Stats params line: labels & live values (formatted to 3 sig figs).

FPS EMA + auto-degrade: if fps<42 for >3s and qualityLevel<2 → qualityLevel++, applySize(), buildSim/buildPoints, toast.

Quality button cycles 0→1→2→0: sets qualityLevel, applySize + rebuild sim/points, toast.

Palette JS for plinth/floor tint: cosine palette t=0.65, hue current (lerped during morph):

col.r = 0.5+0.5cos(2π(t + h)); col.g = 0.5+0.5cos(2π(t + 0.33 + h)); col.b likewise. Compute hueEff = lerp(hueA(cur), hueB(nxt), mix). Set plinth color from palette at t=0.6, floor tint at t=0.3 dimmed.

Loop: standard; update uniforms; autoRotate handled by controls; sculptureRot += dt*speed; uRot.

Note ordering per frame:

1. dt/t
2. auto morph timer, updateMorph
3. conduct update (params → live; if !morphing refresh A uniforms)
4. controls.update()
5. sim step (if !paused) — set uniforms uDt, uTime, uBurst
6. trails pass
7. composer
8. audio.update, stats (throttled), plinth pulse.

Energy calc function:

paramEnergy: computed in conduct/update step: dP = distance(live, prevLive) normalized by range... simpler: paramEnergy += |Δ| * 0.5 then decay: paramEnergy = exp(-dt3).

pointerVel: track pointer speed smoothed when conduct on.

Snapshot function with flash.

Boot sequence:

• setA(0); setB(0); buildSim(QUALITY[0].sim, ATTRACTORS[0]); buildPoints; applySize(); updateChips(); UI wiring; start loop.
• toast welcome "Drag to orbit · press 1–8 to switch sculptures".

Note buildSim needs uniforms set (setA/setB before).

Also on quality change rebuild: buildSim(QUALITY[l].sim, ATTRACTORS[cur]) — reseeds particles (fine) + buildPoints.

applySize calls buildTrails — also called at boot.

Keyboard: keydown handler with e.code.

Space preventDefault to avoid page scroll.

Auto-morph countdown pauses when paused or when conduct on? If conducting, user is playing — postpone morph: reset autoTimer while conductOn and pointer recently moved. Simple: if conductOn, don't countdown (auto morph resumes when disarmed). OK.

First frame dt guard.

Write chunk 6 now (~330 lines). Then close script/body/html.

File complete at 1146 lines. Now verification:

1. Syntax check the module JS via node --check (extract script).
2. DOM id cross-check.
3. Uniform consistency spot checks.
4. Balance checks.

One thing I notice: in buildSim, I render simScene twice with uPosTex = init — but the second render also reads init, that's fine (both targets get same seed copy). However there's a subtlety: simUniforms.uDt.value at boot is 0 → dt 0 → pure copy ✓. But life -= uDt*(...) = 0 ✓.

Also in the frame loop when paused: pointsUniforms.uPosTex.value = posRead.texture still fine.

Potential issue: renderer.getRenderTarget() in buildSim — captured prevTarget but after loop I setRenderTarget(prevTarget) ✓.

Another: EffectComposer default in r170 — creates HalfFloatType internal buffers ✓.

One real bug candidate: In the points vertex shader I declared uniform float uMix — but three also injects its own uniforms like modelViewMatrix (fine). However uVNormA/uVNormB are SHARED uniform objects between simUniforms and pointsUniforms (pointsUniforms.uVNormA = simUniforms.uVNormA) — sharing uniform objects between two ShaderMaterials is fine in three ✓. Same for uTypeA/uTypeB/uPrA/uPrB/uMix ✓.

Check: In sim fragment shader I use uniforms uDt... declared ✓. FIELD_GLSL uses int t, vec4 pr params ✓. In points vertex shader, FIELD_GLSL included ✓, and fieldMix uses uniforms passed as args ✓.

textureSize(uPosTex, 0) returns ivec2 → vec2(...) ✓.

HASH_GLSL included in sim ✓ (points shader doesn't use hash — not included there, good).

GLSL: sim shader has uniform float uDt, uTime, uMix, uSpeed, uBurst, uNonce; and then second line uniform float uDtA, ... ✓.

Possible three.js gotcha: ShaderMaterial for sim mesh rendered with ortho quadCam; PlaneGeometry(2,2) positions xy in [-1,1] ✓ gl_Position direct.

Trail rendering: renderer.render(pointsScene, camera) — pointsScene has no background, autoClear false so no clear ✓. Points material depthTest false ✓.

renderer.setRenderTarget(trailWrite) then render fadeScene with quadCam — fadeScene mesh material depthTest false ✓.

One concern: blending on fade quad — default NormalBlending, overwrites target content ✓ (fragColor = faded prev). Since we don't clear, and quad covers all pixels ✓.

UnrealBloomPass(resolution Vector2(1,1)) — composer.setSize will resize passes including bloom ✓ (Pass.setSize). Vector2(1,1) initial then composer.setSize(w,h) sets it properly ✓.

composer.setPixelRatio(dpr) exists in r170 ✓.

OrbitControls with canvas — pointer lock not needed ✓.

Snapshot: toDataURL after composer.render() — the canvas is rendered by composer's final pass... but note after composer.render() in snapshot(), the drawing buffer might be considered cleared because preserveDrawingBuffer:false — but synchronous toDataURL right after render in same JS task is safe ✓.

Audio: audio.setEnabled(on) calls init then resume. master.gain ramp from 0 ✓. volumeLevel declared AFTER audio object uses it? let volumeLevel = 0.7; is declared after the audio const — but setEnabled only runs at click time, by then module fully evaluated ✓. bindSlider closure references audio ✓.

One ordering bug: bindSlider('#sl-volume'...) references audio — defined ✓ (audio defined in chunk 5 before chunk 6 UI).

In stats, simSize — set by buildSim ✓.

updateChips used in startMorph defined ✓.

Keyboard: e.key >= '1' — string compare works for digits ✓.

Quality boot: $('#btn-quality') label "Quality: High" matches QUALITY[0].label ✓.

applySize → buildTrails disposes old ✓ boot: trailRead null → guard if (trailRead) ✓.

In frame(): addTrailsPass.uniforms.tTrail — ShaderPass clones uniforms? IMPORTANT: ShaderPass constructor does this.uniforms = shader.uniforms — actually ShaderPass does: this.uniforms = UniformsUtils.clone(shader.uniforms)? Let me recall three's ShaderPass:

I passed a plain object → uniforms get CLONED. So addTrailsPass.uniforms.tTrail.value = ... — that accesses the cloned uniforms object which IS the one used by the material (this.uniforms assigned to material.uniforms). Cloning happens once at construction; mutating addTrailsPass.uniforms.tTrail.value afterwards works ✓ (uniforms is the cloned object used by the material). And uGain cloned from 1.0 ✓. Same pattern for gradePass (uniforms cloned; I set gradePass.uniforms.uTime ✓ works).

BUT: cloning a uniform whose value is a Texture — clone keeps the reference or null; we always set before render ✓.

Also UnrealBloomPass expects readBuffer with scene; addTrailsPass needsSwap default true ✓ chain: RenderPass renders scene into readBuffer; addTrailsPass reads tDiffuse=readBuffer, writes writeBuffer, swap; bloom reads, adds bloom; grade final ✓.

Another subtle: RenderPass with scene.background color — clears to bg ✓.

Points position attribute: I use position.xy as uv and never use z ✓.

gl_PointSize clamp ✓.

mat2(cr, -sr, sr, cr) — column-major: columns (cr,-sr),(sr,cr) → rotation matrix ✓.

isnan on vec3: any(isnan(np)) ✓ ES3.

textureSize in GLSL1-compat mode: three compiles all shaders as GLSL300 on WebGL2 ✓.

Potential precision issue: positions FloatType when EXT available ✓.

The initialTexture DataTexture default minFilter Nearest? DataTexture defaults: magFilter Nearest, minFilter Nearest ✓ good.

Now — chunk ordering issue: applySize() references stars.material.uniforms and buildTrails and pointsUniforms — all defined before boot calls applySize ✓. But applySize is also wired to resize — fine.

One more: in setQuality I call applySize() then buildSim — but buildSim uses simUniforms which at that moment have uTypeA etc for cur ✓ and seeds with ATTRACTORS[cur] ✓. During morph, quality change reseeds into cur — acceptable.

Edge: updateConduct uses ATTRACTORS[cur].conduct — all have 2 entries ✓. When morphing, conduct edits cur's live but field A is frozen snapshot — edit applies after morph. Acceptable.

e.code === 'Space' preventDefault also stops button focus scroll ✓.

Wait — one bug: in frame loop, when !morphing I call setA(cur) EVERY frame — which also resets uHueA etc. Fine, cheap. But note setA also sets uniforms from a.live — intended for conduct ✓.

Another: hueEff uses ATTRACTORS[nxt].hue when not morphing nxt==cur after first morph completion (setB(cur)); initially nxt=0 ✓.

Energy uses mix — when not morphing mix=0 ✓.

Now extract and syntax-check with node.

88% of time used. I need to finish fast. Remaining critical steps:

1. GLSL compile sanity — can't compile without GPU; do a quick regex check that all uniforms referenced in GLSL are declared in the same shader. Quick python check.
2. Update /space/demos/index.html.
3. Done.

Let me do a fast combined check + index update in one command. Actually do the GLSL uniform check quickly, then index update, then success.

92% time. The "shared: False" results are just my crude string-matching (whitespace differences) — the actual code has uMix: simUniforms.uMix, etc. Fine.

Wait — one REAL issue I should double check quickly: in pointsUniforms I wrote:

The checker regex with exact spacing failed — that's just formatting. It's fine.

But CRITICAL BUG: in the sim fragment shader the GLSL declares its own uniforms from simUniforms; in points VERTEX shader I declared uniform float uVNormA, uVNormB; and use them — they're provided via shared objects ✓.

One more potential real bug: in the points vertex shader I declared uniform float uMix, uRot, uSize, uPixelRatio, uScaleA, uScaleB, uHueA, uHueB; and separately uniform float uVNormA, uVNormB; — no duplicates ✓.

In the sim shader: declared uniform float uDt, uTime, uMix, uSpeed, uBurst, uNonce; — and FIELD_GLSL declares no uniforms ✓.

Now update the demos index — do it NOW as time is short.

The exact whitespace didn't match. Let me check the actual text around the marker.

******************************************************************************************************xt.

**************************************************************************************************************************************************************************ss.

24 demo-cards = 19 demos + ... wait 19 demos would be 19 cards; 24?? Let me think — "demo-card" appears twice per card (class def in CSS + anchor? No, CSS uses .demo-card selector... grep counts lines containing the string. CSS has multiple .demo-card selectors (.demo-card, .demo-card:hover, .demo-card .num etc.) plus the 19 anchors. 19 anchors + ~5 CSS lines = 24 ✓. Good.

Demo complete, index updated. Call _success now — time nearly exhausted.