Prismworks Demo Creation and Deployment

The task says "Wake up and do as you please." This is a free-form task. My purpose is to create cool Three.js demos in /space/demos/. The previous run created demo 036-wavefunction. So I should create a new demo, numbered 037 presumably.

Let me first check the current state of the demos folder to see what exists.

Let me install shell tools first.

I have full context. Now I'll create demo 037. My concept: "Emberglass — 3D Thermal Convection Crystal Lab"? Let me decide on something distinctive, polished, and technically interesting that I can implement reliably in a single HTML file.

Final decision: 037-crystal-resonator? Hmm.

Let me go with: "Prism Reef"?

Actually, I'll do a strong idea I've been circling: "Voronoi Shatter"?

Let me commit to something concrete and buildable with high wow-factor:

Demo 037: "Chromadepth Forge"...

OK here's my final choice, committing now: "The Glass Harmonica — Light Refracted Through a Living Crystal" — no.

FINAL: 037-lantern-tide — "Lantern Tide": A night river scene with floating paper lanterns? Too similar to koi pond aesthetics.

Let me think about what's genuinely most impressive and distinct in my remaining ideas, and also fun:

1. Reaction-diffusion 3D — done (030 morphogenesis).
2. Eulerian fluid — done (004).
3. Smoke / fire volumetric — 022 clouds, 029 fireworks.
4. Light/optics — NOT done yet. Refraction, dispersion, caustics. This is a fresh domain!

037: "Prismworks" — an interactive optics bench. Scene: a dark lab room with a glass prism/lens collection. A white light beam (laser) enters, splits through a prism into rainbow spectrum via wavelength-dependent IOR (real dispersive refraction!), beams rendered as glowing additive volumetric-ish ribbons computed by 2D ray tracing through polygon shapes. Components: prisms (triangle), lenses (convex/concave circles), mirrors, beam splitters, diffraction grating (splits into spectral orders!), all draggable and rotatable. Plus rainbow photon particles flowing along the beam paths. Bloom-heavy, dark room, caustic-ish glow where beams hit the table, audio hum per beam.

This is a well-bounded computational geometry problem (ray tracing line segments against circles and polygon edges with refraction/reflection) — very doable in JS per frame at 60fps, and dispersion = multiple wavelengths traced with different IOR. The visual: glowing spectral ribbons fanning out = gorgeous with bloom. Interactive: drag components, rotate them, add/remove, spectral laser colors.

This is fresh (no optics demo yet), educational (Snell's law, dispersion, TIR, diffraction orders), and visually stunning (dark room + rainbow beams + bloom).

Components list:

• Prism (equilateral triangle): white light in → rainbow fan out (7+ wavelengths).
• Lens (circle/sphere cross-section): focuses parallel beams to a point; concave diverges.
• Mirror (line segment): reflects.
• Beam splitter (thin rectangle, 50/50).
• Diffraction grating (line segment): splits into multiple orders with rainbow spreading.
• Detector/screen: shows color accumulated? Maybe a sensor bar showing power.

Sources:

• White beam (broad, splits spectrally).
• RGB lasers (pure lines, mix additively).

Interactions:

• Drag bodies to move, drag rotate handle (or scroll over a body to rotate).
• Click source to cycle color (white, red, green, blue, violet, laser pointer).
• Buttons: add prism/lens/mirror/splitter/grating; presets ("Dark Side of the Moon", "Fiber Optic TIR", "Newton's Telescope", "Double Slit"?—no double slit needs wave... skip, do "Grating Rainbow Fan", "Periscope").
• Fresnel partial reflections toggle? Keep simple: always compute both reflected+refracted at glass boundaries with Fresnel weighting for intensity, capping recursion depth.

Rendering approach: compute beam tree in 2D (JS), each segment has wavelength(s) and intensity. Render as camera-facing ribbons in 3D with additive shader, hot white-ish core + colored glow, intensity fade. Photon packets (points) flow along segments with speed = c/n. Glass objects rendered as translucent meshes with fresnel rim + subtle internal sparkle. Table: dark reflective surface with grid etching? A subtle "optical bench" grid + glow pools where beams hit objects/walls.

Audio: hum per beam color? A soft synth pad where each active spectral band adds a voice (pitch by wavelength) — gorgeous idea: the chord literally IS the spectrum currently being produced. Photon "tick" when beam hits detector. Volume tied to intensity.

The ray-tracing core:

• 2D scene on XZ plane (top-down optical bench), rendered in 3D with beams as flat glowing ribbons slightly above the glass (or passing through at mid-height).
• Shapes: circles (lenses), segments (mirrors/gratings), polygons (prisms, splitters).
• Ray march: find nearest intersection among all shapes; at glass interface compute Snell refraction per wavelength (Cauchy equation n(λ) = A + B/λ² for crown glass → dispersion!), spawn reflected ray with Fresnel coefficient. Mirror: reflect, small absorption. Grating: reflect orders ±1, ±2 with angle from grating equation m·λ = d(sin θm − sin θi) and transmit 0th order; also reflection 0th order. Splitter: 50% reflect 50% transmit.
• Wavelength sampling: for white light use e.g. 12 spectral samples 400–700nm; render each as thin line → fan of colors. For laser, single wavelength.
• Cap: max bounces ~12, max segments ~400, intensity cutoff 0.01.

Performance: 12 wavelengths × ~8 bounces × ~20 shapes → trivial.

Beams hitting the room walls create glow dots. A "spectrum analyzer" detector bar could show accumulated spectral power histogram at bottom of HUD — actually nice: live spectrum graph of light hitting a specific screen object? Simplify: HUD shows legend of component under cursor.

Presets:

1. Dark Side of the Moon: white beam + prism → rainbow fan onto wall. (iconic!)
2. Double Prism Recombination: two prisms recombine? (Newton's experiment) — second inverted prism recombines into white. Physically real with dispersion!
3. Lens Bench: parallel white beams through convex lens → chromatic aberration visible at focus (different focal lengths per color!). That's a beautiful demo of real CA.
4. Total Internal Reflection: beam inside glass block zigzagging (fiber optic).
5. Grating Fan: white beam on grating → spectral orders fan out.
6. Crossed Beams / RGB mix: red+green+blue lasers crossing → additive colors visible where overlapping (additive blending makes this free!).

That's a killer preset list.

Glass rendering: prisms as extruded 3D shapes (short height), translucent, fresnel edge glow. Lens as flattened cylinder. Beams at mid-height of glass blocks so they visually pass "through" the glass.

Beam ribbons: for each segment, camera-facing quad strip (billboarded around the segment axis) — but beams are all in a horizontal plane, camera orbits above; a simple approach: draw each beam twice — once as a flat horizontal ribbon on the plane (gives it a "glow pool on the table" feel), and once as a vertical-ish camera-facing ribbon for the volumetric look. Or simpler: use THREE.Line2? Thick lines need LineGeometry from examples — could import from addons. Actually simplest robust: custom BufferGeometry ribbons camera-facing via shader (build ribbon in vertex shader using view vector cross segment direction). I've done similar (teslasphere ribbons). I'll write a ribbon shader: attributes per vertex: pos, dir, side, t, color, intensity. In vertex shader: offset = normalize(cross(viewDir, dir)) * width * side.

Photon particles: sprites flowing along beam paths, spawn at sources, die at endpoints, additive glow dots. Cap ~2000.

Scene dressing:

• Optical bench: dark brushed-metal table with etched grid lines (subtle emissive grid shader), beveled edge.
• Room: dark walls (where beams terminate, glow spots).
• Dust motes drifting.
• Post: UnrealBloom + grade pass (vignette, grain, chromatic aberration) — consistent with the series.
• Soft key light + component glow lighting.

Controls: OrbitControls. Pointer drag on component = move; drag on ring handle around selected component = rotate; scroll over component = rotate too; click source = cycle color; double-click empty = spawn prism? Keep it simple: buttons for adding components, presets, clear, snap, sound toggle, help overlay.

HUD: title, component count, fps, quality tier, hint line. Info panel describing physics of hovered/selected component ("Crown glass BK7, n=1.52@550nm, Cauchy dispersion").

Educational popover per preset explaining the physics.

Audio: WebAudio — pad chord = sum of sine/triangle voices, one per active wavelength band (map 400-700nm → pitch range, e.g., λ→musical pitch like the wavefunction demo mapped photon wavelength). Volume per voice = total intensity of that band currently in the scene. Plus gentle room noise. Ticks on wall hits? Maybe subtle "glass clink" when placing components.

This is a solid, fresh, feature-rich demo. Name: 037-prismworks — "Prismworks — an interactive optics bench".

Hmm wait, double-check the refraction math for 2D cross-sections through 3D-extruded shapes: rays travel in the horizontal plane (2D problem), shapes are extruded. Prism triangle cross-section in XZ-plane: yes, the classic prism dispersive bending happens in the plane perpendicular to the prism's apex edge. So extrude along Y.

For circles (lenses), a cylinder extruded vertically = spherical lens approximation in 2D (actually cylindrical lens, fine).

Mirror: thin box. Grating: thin box with line shader marks. Splitter: thin box with 50% coating.

Ray tracing in 2D:

• Circle: ray-circle intersection quadratic.
• Segment (with finite extent): ray-segment.
• Convex polygon (triangle/quad): ray vs each edge, track entry/exit. For convex shapes, entering = closest hit with normal facing ray (dot(n,d)<0), exiting = hit with normal facing away.

Simplify: treat every optical element as a set of "interfaces" each being a segment with: type (glass boundary with medium inside/outside tracked via shape membership), or mirror, or grating, or splitter.

Medium tracking: each ray carries currentIOR medium flag: inside glass (with that glass's n(λ)) or air. At glass boundary hit, determine entering/exiting by normal orientation.

Shapes:

• Circle lens: boundary = circle. Normal = radial.
• Prism triangle: 3 edges. Normal = outward perp.
• Slab (rectangle) for beamsplitter/TIR block: 4 edges.
• Mirror: 1-2 segments, both sides reflective.
• Grating: segment(s), reflective grating with orders.

Fresnel: use Schlick approximation with n1,n2 per wavelength.

Dispersion: n(λ) = 1.5046 + 0.00420/λ² (λ in μm) roughly BK7: B=1.03961212, C=0.00600069867 → n² = 1 + B λ²/(λ²−C). Use real Cauchy/Sellmeier for correctness! BK7 Sellmeier: n²−1 = (1.03961212 λ²)/(λ²−0.00600069867) + (0.231792344 λ²)/(λ²−0.0200179144) + (1.01046945 λ²)/(λ²−103.560653). That's real. At 400nm n≈1.5308, 700nm n≈1.5131. Dispersion strength maybe exaggerate ×N for visual separation (a "dispersion boost" slider, default 3×).

White beam: sample 10 wavelengths uniformly 400–700nm, render with additive spectral colors (wavelength→RGB approximation function). Each trace: 10 wavelengths through the tree... but the tree structure differs per wavelength when TIR occurs for some and not others (critical angle differs per λ!). That's actually physically awesome — TIR rainbow separation. Implementation: trace per wavelength independently (10 × tree). Cost fine.

Segment budget: sources few, wavelengths ~10, depth 10 → at most 10×2^depth worst case with splitting at every interface... Fresnel spawn both reflected+refracted each hit → exponential. Mitigate: spawn reflected only if Fresnel weight > 0.02 and reflectivity enabled; for glass boundaries the Fresnel reflected ray is usually weak at near-normal incidence (R4%) — include but with intensity multiplier; cap total segments per source at ~500; intensity cutoff 0.015. That'll be fine visually (faint ghost reflections add realism!).

Beam render data: list of segments {p0, p1, λ or RGB color, intensity}. Also glow spots at endpoints/hitpoints: accumulate small additive sprites at hits (caustic-ish sparkle), brighter at focus points — the caustic glow emerges naturally at the lens focus where many segments converge.

Photon flow: for animation, spawn photon particles that travel along the currently computed segment list: pick random segment weighted by intensity, advance position along it, respawn at random source segment when reaching the end. Gives flowing life.

Screen/detector: maybe skip; wall glow dots suffice + spectrum readout: compute total spectral power across 24 bins for ALL active segments → draw a tiny spectrum histogram in HUD ("scene spectrum"). Nice and easy with canvas 2D overlay or DOM bars. DOM bars (24 divs) updated ~10Hz.

Now the "wow" money shot: preset 1 Dark Side of the Moon — white beam entering prism, fan of rainbow exiting, splashing on the wall, bloom glowing.

Camera: orbit around the table, slight top-down default. Room: dark box with subtle gradient, beams end in glow on walls (walls far enough ~30 units).

Table: rounded square, dark, with faint engraved mm grid + concentric angle marks (protractor look) — shader on table plane. Optical components sit on table (height ~1.2 units extrusion).

Components selection/dragging: raycast against component meshes; drag moves (constrained to table); rotating: hold R? Better: drag with right mouse? OrbitControls uses right for pan... Use: hover component + scroll = rotate; or drag the circular handle that appears under selected component. Also keyboard [ ] rotate selected. Double-click removes component (with confirm? just remove + undo button? keep: X key deletes selected). Add buttons spawn at center with slight random offset.

Auto-tour? Maybe idle camera drift. Skip tour; presets are the content.

Sound design:

• On enable: soft pad, one detuned voice pair per of 8 spectral bands; gain per band = live spectral power (smoothed). Frequencies: map band center λ to pitch: e.g., A notes... Map 400nm→660Hz-ish high, 700nm→330 low? Actually invert: violet = high pitch. Base formula f = 220 * (700/λ) → 400nm→385Hz, 700→220. Slightly detuned dual oscillators + lowpass. So the chord breathes with the spectrum.
• Placement clink: short filtered noise + sine ping.
• Wall-hit shimmer? Skip.
• Room tone: very low brown noise.

UI: top-left title + description; top-right buttons (mute, help, snapshot); bottom-left: preset chips; bottom-right: add-component buttons; bottom-center: hint text; spectrum analyzer: bottom strip? Place spectrum bottom-center above hint. FPS/quality top-right small.

Help overlay modal with controls list and physics notes.

Adaptive quality: measure fps, drop pixelRatio tiers, reduce wavelength samples (10→7→5) and photon count.

Snapshot: render canvas → PNG download.

Alright, also the index page update: add card 037 at top of list.

File: /space/demos/037-prismworks/index.html — single self-contained file, Three.js r160+ via unpkg import map (check what previous demos used — let me peek at 036 quickly for CDN and structure conventions).

Let me check the import map used in 036.

The convention is Three.js 0.170.0 with import maps, EffectComposer + UnrealBloomPass + ShaderPass (grade) + OutputPass. I'll follow the same pattern.

Now let me build the optics demo. I'll write it in chunks to keep each file write manageable. Plan the code:

File: /space/demos/037-prismworks/index.html

Structure:

1. HTML head: meta, title, CSS (HUD, buttons, spectrum bars, help overlay, presets).
2. Import map.
3. Module script:
   • Imports.
   • Constants & utils (wavelength→RGB, Sellmeier IOR, spectral sampling).
   • Renderer/scene/camera/controls/composer setup.
   • Room + table (shader grid), walls.
   • Optical component classes (geometry meshes + 2D trace shapes).
   • Ray tracer (2D): intersect, refract (Snell), reflect, Fresnel (Schlick), grating equation, TIR.
   • Beam ribbon rendering (custom BufferGeometry + shader, rebuilt per frame when scene changes).
   • Glow spots at hit points (Points or instanced sprites).
   • Photon particles flowing along segments.
   • Dust motes.
   • HUD: spectrum analyzer (DOM bars), hints, fps, quality.
   • Audio: spectral pad, clink, room noise.
   • Interaction: pointer drag components, rotate via scroll/handle, click source to cycle wavelength sets, presets, add/delete, keyboard, touch.
   • Presets (6).
   • Adaptive quality, resize, snapshot.
   • Main loop.

Let me carefully design the ray tracer data model:

Simplify lens to convex circle (magnifying). For a concave diverging element, I could offer a "plano-concave" implemented as a circle of glass hole? Too complex. Instead offer:

• Convex lens (circle of glass).
• Prism (triangle of glass, equilateral or right-angle — right-angle prism used for periscope TIR!).
• Slab/block (rectangle of glass) — for TIR zigzag and parallel displacement.
• Mirror (segment, double-sided).
• Splitter (thin rectangle, semi-transparent mirror coating on the diagonal? classic cube beamsplitter = cube with diagonal half-mirror). Simplest: thin mirror segment with 0.5 reflectivity transmitting 50%.
• Grating (segment, reflective, orders -2..+2 + transmit? Reflective grating: 0th order = specular reflection, ±1, ±2 orders by grating equation; also let 15% transmit straight).

Concave lens: skip, convex only. Fine.

Ray struct: {ox, oz, dx, dz, lambda, intensity, medium: null|element} (medium = glass element currently inside, or null=air).

Trace(ray, depth):

1. Find nearest intersection t>eps among all interfaces + room walls.
   • Polygon edges: ray-segment intersection, need hit normal sign.
   • Circle: quadratic, choose nearest positive root; if inside circle, the exiting root is positive.
   • Walls: room bounds (square at half-size W): compute t to each wall, choose nearest.
2. If wall: deposit glow spot, add segment, end.
3. If mirror: add segment to hit; reflect; continue with intensity*0.95; add small glow at hit.
4. If splitter: two children: reflected (0.5·0.92) and transmitted (0.5·0.92)? Actually 50/50: intensity split. Add slight absorption. Continue both if above cutoff.
5. If grating: children: order 0 reflection (0.25), orders ±1,±2 with efficiency ~ (0.18, 0.10) each depending, transmit 0th (0.2). Compute reflected direction for order m via grating equation: along-grating tangent direction t̂; decompose incident d into tangent/normal components relative to grating line. For reflective grating: sinθm = sinθi + m λ/d (with sign conventions). Implementation: Let g = unit tangent along grating, n = unit normal. Decompose d: dt = d·g, dn = d·n. For reflection order m: the tangential component changes by m·λ/d (in units where tangential component is sin of angle): dt' = dt + m·(λ/d)·(λ in same units as d... careful: d = groove spacing in world units; λ_world = λ_nm * scale). Set groove density ~600 lines/mm typical. World scale: 1 unit = 30mm? Table ~24 units = 720mm bench. Groove spacing = 1/600 mm = 1.667μm = 0.001667mm → in world units 0.001667/30 = 5.6e-5. λ = 550nm = 550e-6 mm /30 = 1.8e-5 world. λ/d = 0.33 → order ±1 at asin shift of 0.33 rad-ish. Visible fan. Good — physically real! Then dt' must satisfy |dt'|<=1 else order evanescent (skip). dn' = -sqrt(1-dt'^2) * sign(dn) (reflection flips normal comp). d' = gdt' + ndn'.
6. If glass boundary (edge or circle):
   • Determine entering vs exiting: if ray.medium === owner → exiting (n1 = owner.ior(λ), n2 = 1), normal = outward surface normal at hit; else entering (n1=1, n2=owner.ior(λ)), normal = outward normal (pointing against ray when entering).
   • cosI = -d·n (n oriented against incident ray; flip n if d·n>0).
   • eta = n1/n2. sin2T = eta²(1-cosI²). If sin2T>1 → TIR: reflect, stay in medium, intensity*0.995.
   • Else refract dir = etad + (etacosI - cosT)n where cosT=sqrt(1-sin2T). Fresnel Schlick: R0=((n1-n2)/(n1+n2))²; R = R0+(1-R0)(1-cosθ)^5 (cosθ = cosI if n1<n2 else cosT). Spawn reflected child (intensityR) if >cutoff; transmitted (intensity*(1-R)*absorb), medium flips membership.

Intersection testing per shape:

• element.edges: precomputed world-space segments with outward normals (prism, slab). Recompute when moved/rotated.
• circle lens: store center/radius.
• mirror/grating/splitter: segment(s).

All elements expose intersect(ox,oz,dx,dz) returning {t, nx, nz, kind} and contains(x,z) for medium checks. Also iorFn for glass.

Segment budget: trace each source beam; for white, N wavelengths (10 default). Max depth 14; global segment cap ~1600 per rebuild. Rebuild happens when: any element moved/rotated, source changed, quality change. Not per frame — cache and reuse for photon animation & rendering. Ribbon geometry static between rebuilds.

Beam ribbons: build BufferGeometry:

• For each traced segment (with color & intensity), emit 4 verts / 2 tris: camera-facing ribbon. In shader, billboard around segment axis. Width ∝ (0.05 + intensity0.06). Also a second pass "halo" with 3× width and 0.25 alpha? Could do single ribbon with shader profile: core bright + soft falloff — use uv.y across width, brightness = exp(-ky²) — one ribbon gives core+glow via falloff.
• Attributes: aPos0(3), aDir(3), aSide(float), aT(float along), aColor(3), aI(float). Position computed in vertex shader: base = mix(p0, p1, t)? Actually pass both endpoints. Simpler: attribute aEnd (0 or 1), aP0, aP1, aSide; vertex: p = mix(aP0,aP1,aEnd); viewD = normalize(cameraPosition - p); off = normalize(cross(viewD, dir3)) * width * aSide; worldPos = p + off. Color = aColor * intensity, alpha from profile in fragment with uv.y=aSide.
• Additive blending, depthWrite false, depthTest true. Beams at y = beamY (0.75, mid-glass height).
• Also render table glow copy? Flat copy of ribbons at y=0.02 with extra width and 0.3 intensity gives "light pooling on table". Cheap and gorgeous: same geometry, second mesh scaled flat? Just draw same geometry with uniform yOverride & widthMult & alphaMult. Two draw calls.

Glow spots: at every interaction point, add sprite sized by intensity (Points with size attenuation, additive). Rebuild with beams. Also endpoint wall splashes bigger, soft disc shader with color.

Photon particles: N=1200. Each photon: current segment index (weighted pick by seg.intensity × length), t along, speed = baseSpeed / mediumN at segment start medium... simpler constant speed × (0.75 for glass segments — tag segments with medium n to slow photons in glass, nice touch). Render as Points with small round sprite shader, color = segment color. On reaching end → pick new segment from source segments (those starting at a source). Weighted reservoir. Also trails? Skip trails; motion + bloom is enough.

Component meshes (3D):

• Prism: extruded triangle (use THREE.Shape + ExtrudeGeometry or manually build). Height 1.5, y from 0 to 1.5. Material: custom shader — transparent, fresnel rim, faint glass tint, slight vertical gradient, plus edge highlight. Use MeshPhysicalMaterial with transmission? Transmission is expensive-ish but elements few (~10). MeshPhysicalMaterial with transmission 1, roughness 0.05, thickness... could look great with env. But transmissive materials need scene behind; on dark bg it may look black-ish. Previous demos used custom fresnel glass-ish shaders. I'll write a custom "glass" ShaderMaterial: color = mix(tint, white, fresnel), alpha = 0.08 + fresnel*0.5, additive-ish normal blending, plus top face slightly brighter to read shape. Double-sided. No depth write. Edges: add LineSegments edges with glow color.
• Lens: cylinder r=2, height 1.5, 64 seg.
• Slab: box 4×1.5×2.
• Mirror: box 4×1.5×0.12 with metallic face shader (bright strip) + stand base.
• Splitter: box 3×1.5×0.1, 50% mirror = pale silver-blue.
• Grating: box 4×1.5×0.1 with shader stripes (fine lines emissive) — vertex/fragment: lines = sin(local.x * freq) → subtle rainbow sheen.
• Sources: small cylinder emitter + glowing aperture + color ring. White source = white ring; laser = colored. Click cycles: white → red(650) → green(532) → blue(450) → violet(405) → triple RGB (3 parallel beams? make source emit 3 beams slightly angled for mixing)... simpler: colors cycle single λ; a separate "RGB" source preset adds three sources. Keep source types: white and single-wavelength, click to cycle λ through [white, 650, 610, 580, 532, 500, 460, 405]. Beam aim: rotate via handle.

Bases: every optical element gets a small dark metal post/base disc (cylinder) so they read as bench-mounted.

Table shader: dark blue-grey metal, fine grid lines every 1 unit (0.06 alpha), stronger lines every 5, radial protractor rings at center? subtle. Plus soft radial falloff. Plus faint noise sheen. Also beams pool glow drawn separately (flat ribbons).

Room: box 60×16×60 interior dark, very subtle vertical gradient + tiny noise; walls receive beam endpoint splashes (sprites).

Presets (define element layouts):

1. Dark Side — white source left, equilateral prism center, fan to right wall. The classic.
2. Newton Recombined — white → prism → second inverted prism → recombined white-ish spot + mirror redirecting part? Keep two prisms aligned so output recombines toward white. (With accurate dispersion both prisms bend opposite; recombination into white needs second prism to re-converge — two identical prisms in opposition produce parallel displaced rainbow that re-overlaps at distance → near-white at wall. Actually true recombination needs lens; at the wall the colors re-mix if wall far. It'll show rainbow re-merging — good enough & honest with a note.)
3. Chromatic Focus — collimated white beam (wide beam = multiple parallel rays! source type "beam width": emit K parallel rays spanning aperture) through convex lens → focus with CA fringes (blue focuses shorter). This needs multi-ray sources — implement sources with aperture width & ray count (e.g., 9 parallel rays). Gorgeous CA demo.
4. Light Pipe (TIR) — slab (long bar) with laser entering end face at shallow angle → zigzag TIR along the bar, nothing escapes until the far end.
5. Grating Fan — white beam onto grating → central white 0th order + symmetric rainbow fans (orders ±1, ±2). With real grating equation the red bends more than violet — correct physics!
6. RGB Mixer / Interferometry-ish — three lasers R,G,B via splitters/mirrors combine into one white-ish beam (additive). Demonstrates additive mixing + splitter logic.
7. Maybe Periscope / Porro: two right prisms TIR bouncing beam. Could fold into preset 2. Keep 6 presets.

Source types: 'point' (single ray per λ) and 'beam' (aperture of parallel rays per λ). White = 10 λ × rays.

Segment cap: white beam source with aperture 9 rays × 10 λ = 90 initial rays × avg 6 segments ≈ 540 + ghosts... cap 2200, fine.

Interaction details:

• Raycast pointer→table plane (y=0). Pick element under cursor (test 2D contains with inflated bounds, choose topmost/closest). Hover highlight: edge glow brighter + HUD info text. Drag: move (clamped to table).
• Rotate: hover + wheel rotates element (and sources aim). Also drag with Alt? Wheel is fine + keys [ ].
• Click source: cycle λ (only when click without drag; implement click vs drag threshold).
• Double-click element: remove (except sources? allow removing anything; presets restore).
• Buttons: Add ▸ Prism / Lens / Mirror / Splitter / Grating / Slab / Laser. Preset chips 1-6. Clear. Sound. Snapshot. Help.
• Keyboard: 1-6 presets, Del/X remove selected, [ ] rotate, H help, M mute, S snapshot, Space? maybe "pulse": brief intensity boost? skip.

HUD spectrum analyzer: 26 bars (400→700nm). Each rebuild, accumulate intensity×length per λ → smooth in JS (lerp), render DOM div heights & bg colors. Label "scene spectrum". This ties to audio chord too (band gains).

Audio implementation:

• ctx on first gesture. Master → compressor → destination. Room noise: looped brown noise buffer, gain 0.015, lowpass 400Hz.
• Spectral pad: 8 bands spanning 400-700; each band: two detuned triangle osc at f=300*(700/λc)*2? Choose pleasant register: f = 165 * (700/λc) → 700nm→165Hz(E3), 400→289Hz(~D4). Add slight chorus via LFO on detune. Per-band gain target = bandPower normalized (max 0.06 each), smooth with setTargetAtTime tau 0.15. Lowpass per band 1200Hz.
• Clink on add/rotate-end: buffer-less: osc sine at 1800±, exp decay 0.08 + noise burst hp filtered.
• Tick when photon hits wall? Too frequent; skip.
• Slider for volume? Mute toggle + small volume range. Keep mute only.

Adaptive quality: tiers: high (dpr min(devicePixelRatio,2), λ samples 10, photons 1500, bloom on), med (dpr 1.5, λ 8, photons 900), low (dpr 1.15, λ 6, photons 500, bloom lower res). Measure avg frame time over 2s windows; drop tier if >20ms sustained; raise if <10ms for a while? Only auto-drop, plus manual Quality button cycling Auto/High/Med/Low. Keep simple: auto-drop only.

Snapshot: composer.render then toDataURL, download link.

Tour/idle: after 20s idle, slow camera orbit drift resumes; any input stops. Subtle.

Title: "Prismworks". Number 037. Folder 037-prismworks.

Now write the code. It'll be ~1500 lines. I'll write in chunks via read_write_file (create file progressively with append via shell cat? The write tool replaces whole file; better: build locally in /tmp with multiple appends using execute_shell_command heredocs, then verify, then copy to /space. Writing via heredoc risks quoting issues; use cat >> file <<'EOF' with single-quoted delimiter — safe for JS including backticks and $.

Plan chunks:

1. HTML + CSS + body + importmap + script open + imports + constants/spectral utils.
2. Renderer/scene/camera/composer/post.
3. Table/room/dust.
4. Element model + meshes (glass shader etc.).
5. Ray tracer.
6. Beam ribbons + glow spots + photons.
7. Audio.
8. UI/presets/interaction.
9. Main loop + quality + resize + snapshot + boot.

Let me be careful with the physics code. Write core helpers:

Dispersion boost: n' = 1 + (n-1) * (1 + boost*(refDelta)) hmm. Simpler: compute n at λ, and exaggerate: n' = n_ref + (n - n_ref) * dispScale where n_ref = n(550). dispScale default 2.5 (slider 0..6? maybe a slider "Dispersion" 0.5–5). Add slider in HUD bottom-right panel. Good educational.

Wavelength→RGB: standard approximation (Bruton). Implement.

Spectral samples: white → λs = linspace(405, 680, N). Colors sum to ~white when combined: scale each sample intensity by 1/N * norm.

Ray gen per source:

Trace returns segments[] and spots[] and also updates spectrum bins.

Segment: {x0,z0,x1,z1,r,g,b,i, n} where n = medium ior for photon speed.

Trace recursion iterative with stack to avoid call depth issues. Pseudo:

sceneIntersect loops elements:

• element.types:
  • prism/slab: edges array; intersect ray with each edge segment: solve o + t d = p0 + s (p1-p0). t>eps, 0<=s<=1. normal precomputed outward. Keep nearest.
  • lens circle: standard.
  • mirror/grating/splitter: single segment (double-sided).
• walls: room half-size RW=26: t candidates where |o+td| hits ±26 in x or z; pick smallest positive; normal inward. Actually treat walls as kind 'wall' always terminating.

For circle: solve |o+td-c|²=r² → t = -b ± sqrt(b²-...) with b=d·(o-c), qc=|o-c|²-r². If outside (qc>0): need t1=-b-sqrt>0 (entry). If inside: t2=-b+sqrt>0 exit. Normal at hit: (p-c)/r outward.

Medium determination: ray.med element or null. For glass edges: if ray.med===el → exiting else entering. Robust enough since mediums only change at boundaries.

Grating direction math (reflective):

λw = λ in world units. World: 1 unit = 25mm. spacing = 1/600 mm → /25 = 6.667e-5 units. λ 550nm=5.5e-4mm → 2.2e-5 units. ratio m=1 → 0.33.

Order efficiencies: m0:0.28, ±1:0.16, ±2:0.07, transmit0: 0.18. Times parent intensity.

Mirror: reflect with 0.96. Splitter: reflect 0.42, transmit 0.42 (rest absorbed), both children (no medium change, it's coated air-side; treat as thin).

Fresnel Schlick. Absorb in glass: Beer: transmit = exp(-kpathLen) with k small 0.01 → need path length: segment length inside glass — apply when ray.med!==null at segment completion: cur.i = exp(-0.015len). Nice realism.

Cutoff: 0.012. Max depth total segments fine.

Spot list: {x,z,y?, r,g,b, i, size}: at each glass/mirror hit (small), wall hits (bigger, elongated?). Points with radial-gradient sprite texture (canvas-generated) additive. Also at source aperture (emitter glow).

Photon system: after rebuild: segs available; build cumulative weight array over segments for spawn: w = i * len. Photon: {seg, t, speed}. Update: t += dt*speed/len; if t>1 → respawn (also small chance jump to another segment mid-way? no). Speed: v0 / (seg.n||1) with v0 ~ 6 units/s. Render Points geometry with position & color attributes, size attr by seg.i. Update positions each frame (CPU, 1500 pts fine). Additive.

Actually photons "flow from source outward" — since segments form a tree from source, spawning photons on random segments weighted by intensity looks like continuous flow; fine (they teleport at segment ends — acceptable at density, reads as sparkle flow).

Better: bias spawn toward early segments? Fine as-is.

Now meshes for elements — mapping 2D shapes to 3D:

• All glass elements: custom ShaderMaterial 'glassMat' (per element, uniforms: tint, opacity, glowBoost for hover). Geometry: prism → ExtrudeGeometry from triangle shape depth 1.5, rotate to stand on table (extrude along z then rotateX? ExtrudeGeometry extrudes along +z; rotate -90° about X to make depth vertical). Or build manually with side+top+bottom faces — extrude easier. Center geometry at (0, 0.75, 0) so position.y=0.
• Lens: CylinderGeometry(2,2,1.5,48).
• Slab: BoxGeometry(5,1.5,1.6).
• Mirror: group: box(4,1.5,0.12) 'mirrorMat' (bright silver with soft vertical gradient + fresnel), plus base cylinder(0.5,0.6,0.12), plus post? Simple base.
• Splitter: box(3.2,1.5,0.08) 'splitterMat' semi-silver-blue + base.
• Grating: box(4,1.5,0.1) grating shader (rainbow fine stripes) + base.
• Source: group: body cylinder(0.35,0.45,1.2) dark metal, aperture disc emissive (color by mode), ring torus emissive, small label? no. Plus base disc. Beam origin at (x, 0.75, z) forward direction.

Edges highlight: for prism/slab add THREE.EdgesGeometry LineSegments with additive material color tint*1.5, opacity uniform for hover.

Table: PlaneGeometry 56×56 (visual extends to walls), shader: grid + sheen; plus a subtle round central protractor engraving? Keep grid + vignette. Also a physical rim: box frame around bench 52×0.5×52 dark frame. Simple: big plane + 4 rim boxes.

Room walls: 4 planes at ±28 facing inward, height 12, shader: vertical gradient dark navy→black, tiny noise, plus faint glow uniform? Endpoint spots provide splashes. Ceiling skip. Floor = table surface extends? Table is the floor essentially (bench fills view). Make table 56 wide walls at ±28 → table edge meets walls; beams terminate at wall spots which appear just above table edge — visually fine (beams at y=0.75 hit wall, spot sprite there).

Hmm, table 56×56 with element clamp radius ~ 22. Walls at ±28. OK.

Post chain identical to 036: RenderPass, UnrealBloomPass(0.9, 0.55, 0.55), gradePass (vignette/grain/CA), OutputPass.

Camera: fov 42, pos (0, 16, 26) looking at origin; OrbitControls damping, minDistance 8, maxDistance 60, maxPolarAngle 82°? For top-down bench viewing allow near-top: maxPolar 85°, minPolar 15°. Pan enabled (screen space). Touch: 1-finger rotate, 2-finger dolly/pan. Dragging elements uses left-button; conflict with orbit rotate! Solution: if pointerdown hits an element → drag it (disable controls during drag); else orbit. Standard pattern: controls.enabled=false while dragging element.

Pointer events on renderer.domElement: pointerdown/move/up + wheel (rotate hovered, preventDefault), dblclick (remove), click vs drag threshold 5px & 300ms → source cycle.

Hover: pointermove raycast to table plane, test elements by 2D hit (element.pick(x,z)): point-in-polygon/circle/dist-to-segment with margin 0.35. Set hovered, update cursor (pointer/grab), update info line.

Selected? Use hovered for wheel rotate. Also keyboard rotates hovered. Info panel shows hovered element physics blurb.

Now sources cycling modes list: ['white', 650, 610, 580, 532, 500, 460, 405]. Display name: 'White' or '650 nm'. Aperture: lasers aperture 0; "beam" source type separate button? Add two source kinds: 'laser' (aperture 0) and 'beam' (aperture 3, collimated). Add buttons: "＋ Laser" and "＋ Beam". Beam default white; click cycles same.

Element list management: array elements; each has id, kind, x,z,rot, plus kind params (radius for lens, size for prism...). rebuild2D() recomputes edges/normals. rebuildBeams() traces & rebuilds ribbon geometry, spots, photon pool, spectrum, audio targets. Called on any transform change (throttled during drag: rebuild on move is fine — tracing ~2k segments with ~20 shapes is sub-ms... let's verify: 2200 segments each testing ~40 primitives ≈ 90k segment tests ≈ trivial. OK realtime every frame even.)

During drag we can just call rebuildBeams() each pointermove; smooth.

Also beams should animate subtly even when static: photon flow + slight flicker (bloom handles). Ribbon shader uniform uTime for gentle intensity shimmer (sin(t*2+phase)*0.03). Also a "power" global uniform for fade-in on rebuild (beams grow from 0 → 1 in 150ms on rebuild? might flicker during drag; skip grow, just cross-fade subtle).

Let me also add small "flux meter": total light power readout in HUD (sum intensity) with unit "lm" playful. And element count. FPS meter. Quality badge.

Presets implementation: functions clearing elements and adding configured ones; set camera? no. Also each preset sets info banner text (educational note) shown ~6s in toast area.

Toast: div bottom-center, fades.

Help overlay: grid of controls & physics notes, toggled.

Sound design details (compact but rich):

• ensureAudio() on first pointerdown.
• master gain 0.8 → compressor.
• noise: 2s brown noise buffer looped, lowpass 320Hz, gain 0.02.
• pad: 8 bands: for i in 0..7: λc = 400 + i*(300/7); f = 140*(700/λc) ≈ 245..140? compute: λc 400 → 245 Hz; 700 → 140 Hz. Slightly low; ×2 → 490..280. Use f=330*(632.8/λc)? HeNe reference: f=330 at 632.8 → 400nm→522, 700→298. Range ~300-520Hz pleasant. Two osc per band (sine + triangle detuned +4 cents), bandpass? lowpass 900. gain node per band.
• updateAudio(spectrum): for each band, target = clamp(power/maxP,0,1)*0.05; setTargetAtTime(0.2).
• clink(): on add/remove/preset: sine 2200*exp + noise hp 6k, gain 0.08, 90ms.
• thock on rotate end? skip.
• wall ping when strong beam first hits new spot? skip (too stateful).

Snapshot button: render, toBlob, a.download='prismworks.png'.

Quality manager: track EMA frame dt; every 2.5s evaluate: if ema>21ms and tier>0 → tier--, apply: renderer.setPixelRatio, bloomPass.enabled always (res via setSize handles), SPECTRUM_N = [6,8,11][tier]? define tiers: 0 low {dpr:1, Nλ:6, photons:600}, 1 med {dpr:1.5, Nλ:8, photons:1000}, 2 high {dpr:min(2,device), Nλ:11, photons:1600}. Changing Nλ → rebuildBeams. Start tier by device memory/mobile heuristic: mobile→1.

Boot flow: init scene, preset 1 (Dark Side), fade-in overlay div that dissolves, toast with welcome hint.

Edge cases:

• Element overlap: fine physically? Overlapping glass = weird medium logic (ray inside two elements). Accept (demo).
• Grating with white: orders fan per λ automatically since per-λ traced.
• Splitter + mirror loops: cap bounces handles.
• NaN guards: normalize checks.

Wheel rotate: hovered.rot += e.deltaY sign * 0.04; fine rotate with shift (0.005).

Double-check ribbon shader math: segment dir3 = normalize(p1-p0) in world (y const). side offset = normalize(cross(dir3, viewDir)) — cross(dir, view) perpendicular to both — good for camera-facing ribbon around axis dir. Width w. vertex world = p + offwside. uv.y = side for profile. Fragment: d=abs(uv.y); a = exp(-dd6.0); core = exp(-dd24.0)1.6; color(a*0.6+core)*uI. Additive blending, transparent.

For the flat "pool" copy: same geometry, uniform uFlat: when 1, worldPos.y = 0.03, width ×3.5, alpha ×0.22. Do in shader branch.

Spots: Points geometry, attributes pos/color/size; shader: size attenuation gl_PointSize = size * (300/ -mvPosition.z); circular soft sprite via distance to gl_PointCoord center; additive.

Photons: Points similar, smaller, brighter; slight pulsing size by time+seed attr.

Dust motes: 300 points drifting slowly in volume above table, faint.

Now, UI layout:

• #hud top-left: title "PRISMWORKS", subtitle, stats (fps, segments, elements, quality).
• #panel top-right: buttons: Sound, Help, Snapshot, Quality(auto).
• #presets bottom-left: chips 1..6 with names.
• #add bottom-right: buttons Prism/Lens/Slab/Mirror/Splitter/Grating/Laser/Beam + Dispersion slider + Clear.
• #spectrum bottom-center: 26 bars + label.
• #hint above spectrum: contextual hint text.
• #toast center-top? bottom-center above hint.
• #help overlay modal.
• #info left-middle? Hovered element info card top-left under hud.
• #fade boot overlay.

Mobile: buttons wrap; pointer events unified; wheel absent → rotate via two-finger? Add on-screen rotate buttons when element hovered? Provide "⟲ ⟳" small buttons appearing near bottom-center when hovering (also good desktop). Simplest: two small buttons in #add row enabled when hovered/last-touched element exists.

Total scope is large but manageable. Let me also keep code organized & commented.

Let me now write the file. I'll build it in /tmp/prismworks/index.html via successive heredoc appends, then node --check the extracted JS? Extracting module JS from HTML: use sed to pull between and then node --check with --input-type=module? node --check works for files; for module syntax need .mjs extension. I'll extract to /tmp/check.mjs and node --check it. Imports of 'three' won't resolve but --check only parses.

Then structural checks: tag balance, duplicate ids, ids referenced exist (quick greps), then deploy to /space/demos/037-prismworks/index.html, update index.html card, done.

Physics correctness tests I can run in node: extract the tracer into a test harness? The tracer code is embedded; I can copy the pure-math part into a test file: wavelength→rgb sane, iorBK7 values (n(486)=1.5224? known BK7: n_d(587.6)=1.5168, n_F(486.1)=1.5224, n_C(656.3)=1.5143). Test refraction through prism: deviation angle for 60° prism at ~550nm minimal deviation ≈ 38-45°... check beam bends toward base. TIR test: angle 45° inside glass n1.51 hits boundary → TIR (critical ≈ 41.5°). Grating: m=1 order angle > 0 and red>violet. I'll write a small node test replicating the functions (copy-paste core math into test file, not import from HTML) to validate formulas, ensuring the same code is what I embed (I'll write the core file first, test it, then embed identical code into HTML chunk).

Actually smarter: write core physics as a string in a JS file /tmp/physics.js; test with node; then cat it into the HTML at the right place during assembly. The HTML assembly: multiple files concatenated: head.html, physics.js content, rest... The physics sits inside the module script — I can assemble: partA + physics.js + partB... Clean approach:

/tmp/pw/01_head.html — doctype.. imports /tmp/pw/02_physics.js — spectral & tracer core (testable standalone with minor guards — it references only locals; I'll design it pure: functions + constants, element factory used by scene code. It can reference THREE? Avoid THREE in physics file → pure JS, node-testable.) /tmp/pw/03_scene.js — three scene, meshes, beams rendering (uses physics) /tmp/pw/04_ui.js — audio, ui, presets, interaction, loop /tmp/pw/05_tail.html — closing script/body/html

Then cat 01 02 03 04 05 > index.html. And test 02 with node directly (needs export? just require via eval in test: eval(fs.readFileSync) inside a function scope, then access via returned? Simpler: append module.exports = {...} guarded by typeof module!=='undefined'. But then that line would land in browser too — guard works in browser (module undefined) fine. Actually in ES module scope, module is undefined → typeof check false → skipped.

But careful: 02 runs inside browser module scope — top-level const etc fine.

Let me get started. Chunk 1: head + CSS + DOM.

CSS should match series vibe: dark, glassy panels, indigo/violet accents.

DOM ids: hud, stats, panel, btns (btnSound, btnHelp, btnSnap, btnQuality), presets, addbar, spec, hint, toast, help, info, fade, rotL, rotR, disp slider (id disp, dispVal).

Let me write chunk files now. I'll aim for quality and correctness over brevity but keep the total reasonable (~1700 lines).

Key geometry params:

• Table: 58×58 plane at y=0; walls at ±29, height 14.
• Prism: equilateral side 3.4 (radius circumscribed R=3.4/√3≈1.963). Vertices angle offset so one face vertical facing left for preset 1 (apex up in plan view). I'll orient: flat face normal pointing -x at rot=0? For Dark Side: beam from left hits left face, exits right face dispersing. Equilateral with apex pointing +z? Standard prism orientation: apex up, base down, beam enters lower-left face exits right face. I'll define triangle vertices (plan): angles 90°, 210°, 330° (apex top). Then rot parameter spins it.
• Lens: r 2.1.
• Slab: half extents (2.6, 1.0) rotatable.
• Mirror length 4.4, splitter 3.4, grating 4.4.
• beamY = 0.78; element height 1.56.

Trace in 2D at y=beamY plane. Fine.

Room walls: square half 29.

Camera near 0.1 far 200.

Bloom threshold ~0.5, strength 0.95, radius 0.55. Emissive colors will exceed 1 via intensity multipliers (HDR). Renderer toneMapping ACESFilmic, exposure 1.05. Note: with OutputPass after grade.

One more consideration: additive ribbons with ACES tone mapping — bloom picks >threshold. Beam core color ~ color*(1.5-3). Good.

Now writing. Chunk A (head/CSS/DOM/importmap + module open + imports + boot fade):

I'll write CSS carefully. Fonts: system-ui. Accent: #8ab4ff / #c084fc.

Also note previous demos include a small "series" header link back to ../index.html. Check 036 for header/nav conventions? Probably each demo standalone with own HUD; include a "⌂ demos" link top-left in title for navigation — check quickly what 036 does (grep "index.html" in 036).

Good, I have the style conventions. Now let me build the new demo. I'll create the working directory and write the physics core first (pure JS, node-testable), test it, then build the rest.

Let me write the physics core file now.

The physics core loads. Now let me write a test harness to verify the physics:

1. IOR values for BK7 (n_d ≈ 1.5168 at 587.6nm, n_F ≈ 1.5224 at 486nm, n_C ≈ 1.5143 at 656nm).
2. Prism deviation: 60° prism, beam at near minimum deviation → check deviation ~40°+ and dispersion: violet deviates more than red.
3. TIR: ray inside glass at 45° incidence → reflects, stays inside.
4. Lens: parallel rays converge to focus; blue focus shorter than red (CA).
5. Grating: orders exist, red bends more than violet for m=1.
6. Mirror/splitter basic.

Several failures to investigate:

1. Prism: ray exits with angle 0.0° — the beam goes straight through undeviated? exit angle 0 means the last segment direction is (1,0) — the beam missed the prism entirely or... wait, the prism at rot=18° — maybe the ray at z=-1.35 missed. Prism size 3.6 → circumradius R=3.6/√3≈2.078. Apex up at rot: vertices at angles rot+90°, +210°, +330°. At rot=18°: 108°, 228°, 348°. Vertex positions: (2.078·cos108°, 2.078·sin108°) = (-0.64, 1.98); (cos228°, sin228°)·2.078 = (-1.39,-1.54); (cos348°,sin348°)·2.078 = (2.03,-0.43). Ray from (-8,-1.35) going +x. At x range -1.39..2.03, z=-1.35: is it inside? The bottom edge from (-1.39,-1.54) to (2.03,-0.43): at z=-1.35, that's near the bottom-left. Parametrize: t where z=-1.35: t=(−1.35+1.54)/(−0.43+1.54)=0.19/1.11=0.171 → x=-1.39+0.171·3.42=-0.80. Edge from (-1.39,-1.54) to (-0.64,1.98): crosses z=-1.35 at t=(−1.35+1.54)/3.52=0.054 → x=-1.39+0.054·0.75=-1.35. So ray at z=-1.35 enters at x≈-1.35... it should hit. Hmm, but exit angle 0.0 means final direction unchanged.

Wait — bug candidate in hitEdge:

Let me verify: ray o+t·d = p0+s·e. o + t d = p0 + s e → t d − s e = p0 − o = (dx,dz). In components: t·d0 − s·e0 = dx; t·d1 − s·e1 = dz. Solve: multiply first by e1, second by e0: t(d0 e1 − d1 e0) = dx·e1 − dz·e0 → t = (dx·ez − dz·ex)/(d0·ez − d1·ex). ✓ matches. s: from first: s = (t d0 − dx)/e0. Alternatively: t(d0 d1 − d1 d0)=0... multiply first by d1, second by d0: −s(e0 d1 − e1 d0) = dx·d1 − dz·d0 → s = (dx d1 − dz d0)/(e1 d0 − e0 d1) = (dx·d1 − dz·d0)/(d1·ex − d0·ez) = -(dx d1 − dz d0)/den...

I wrote s=(dxd[1]-dzd[0])/den but correct is s=(dxd[1]-dzd[0])/(e1d0−e0d1) = (dxd1−dzd0)/(−(d0·ez−d1·ex)) = −(dx d1−dz d0)/den.

So my s has a sign error! s should be (dzd[0]-dxd[1])/den. That's why prism/lens tests fail — intersections detected at wrong s (s range check may pass spuriously or reject valid hits).

Wait but some tests passed (TIR had 6 internal segments, lens focused rays, pick works (doesn't use hitEdge)). The grating also used hitEdge but produced orders — because for symmetric cases sign error cancels... Anyway fix: s = (dzd[0] - dxd[1])/den? Let me double check with a concrete: ray o=(0,0), d=(1,0). Segment p0=(5,-1), p1=(5,1): e=(0,2). den = d0·ez − d1·ex = 1·2−0=2. dx=5,dz=-1. t=(5·2−(−1)·0)/2=5 ✓. s_correct: hit at (5,0), p0 + s e: z: −1+2s=0 → s=0.5. Formula mine: (dx·d1 − dz·d0)/den = (5·0 − (−1)·1)/2 = 0.5 ✓. Hmm mine gives 0.5 too. Another check: ray o=(0,0) d=(0,1) (up); segment p0=(-2,3), p1=(4,3): e=(6,0). den = d0·ez−d1·ex = 0·0−1·6=−6. dx=−2,dz=3. t=(dx·ez−dz·ex)/den = (−2·0−3·6)/−6=3 ✓. s should be: hit (0,3): p0+s·(6,0): x: −2+6s=0 → s=1/3. Mine: (dx·d1−dz·d0)/den = (−2·1−3·0)/−6 = 2/6=1/3 ✓. Hmm, mine matches both. Let me redo the algebra: −s(e0 d1 − e1 d0) = dx d1 − dz d0 → s = (dx d1 − dz d0)/(e1 d0 − e0 d1). With numbers: e1 d0 − e0 d1 = 0·0 − 6·1 = −6; numerator −2 → s=1/3 ✓. And den = d0 ez − d1 ex = 0·0 − 1·6 = −6 = e1 d0 − e0 d1? e1d0−e0d1 = ez·d0? wait e1 means e[1]=ez? I mixed notation: e=(ex,ez). e1 d0 − e0 d1 with e0=ex,e1=ez: = ez·d0? no: e1·d0 = ez·d0? Indices: e=[ex,ez] so e0=ex, e1=ez. e1·d0 − e0·d1 = ez·dx? Let me just recompute symbolically.

Equations: t·d0 − s·e0 = dx ... (1); t·d1 − s·e1 = dz ... (2). From (1)·d1 − (2)·d0: −s(e0 d1 − e1 d0) = dx·d1 − dz·d0 → s = (dx·d1 − dz·d0)/(e1 d0 − e0 d1). den (as I defined) = d0·e1 − d1·e0 = e1 d0 − e0 d1? d0·e1 − d1·e0 = d0·ez − d1·ex. And e1 d0 − e0 d1 = ez·d0 − ex·d1 = same ✓. So s = (dx·d1 − dz·d0)/den — exactly what I wrote. OK hitEdge is correct!

Then why did the prism test fail with exit angle 0.0? Let me debug directly: maybe the ray entered and the "last segment" is a Fresnel reflection going straight? No — I take segs[last] which may be any branch (stack order!). The segments list isn't a single path; the LAST segment in the array could be a weak Fresnel ghost. My test is wrong-ish; should pick the strongest final segment. Also possible the ray never hits the prism due to my edge normal/winding. Let me debug with prints.

Also splitter: dirs shows only '0' — reflection missing. Ray o=(-6,0) d=(1,0), splitter at 0 rot=0: p0=(-1.7,0), p1=(1.7,0) — the bar lies ALONG the x-axis, parallel to the beam! The beam travels along the bar, never crosses (or hits degenerate). My test setup error: rot=0 means the segment along x; beam along x → parallel. Should rotate splitter 45°. Test bug, not code bug.

Lens CA: focus red 2.18 vs blue 2.15 — blue IS shorter but margin 0.03 < 0.05 threshold. Real BK7 lens: Δf/f ≈ (n_blue−n_red)/(n_d−1) ≈ 0.0086/0.5168 ≈ 1.7%. At f≈2.2 that's 0.037. My threshold 0.05 too strict — and the crossing estimate is crude. But visually with dispScale=2.6 it'd be ~0.1. Lower threshold to 0.01, and/or compute more carefully. Fine.

TIR leak: ray enters slab at −24° below horizontal; inside glass refracted angle sin θ_g = sin(24°)/1.51·... incidence at left face (normal = x-axis): 24° from normal → inside θ_g = asin(sin24/1.51)=15.6° from horizontal. Hits top face (normal = z): incidence vs normal = 90−15.6 = 74.4° > critical 41.5° → TIR should hold, no leak. But test found a segment with n<1.01 (air) with |z1|>1.05 and x1<5.5 — an escape? OR it's the Fresnel reflected ghost at ENTRY going off into air (reflected at left face, R≈5%, direction mirrored). That segment starts at the entry point (x=-6) heading back left/down in air with z decreasing... z1 < -something, |z1|>1.05 possibly, x1 < -6 <5.5 → matches my escape criterion. It's the entry-face Fresnel reflection — physically correct! Test criterion too naive: check that no AIR segment starts at |z|≈1 (the long faces) heading outward. Better: check no segment with n<1.01 whose start point has |z0| between 0.9..1.1 AND direction carrying it further out (|z1|>|z0|).

waveRGB 410/532: my bracket: 380-440: r=-(nm-440)/60 → at 410: r=0.5, b=1, g=0. Then factor f at <420: 0.35+0.65·(410-380)/40=0.8375 → v=(0.42,0,0.84). Test expects v[2]>0.9 — with factor it's 0.8375. Test threshold too strict; but also 532: bracket 510-580: r=(532-510)/70=0.314, g=1 → r=0.31 not <0.2. 532 green laser should be pure green-ish (real 532 is green). Bruton formula gives r=0.31 at 532 — acceptable visually but my test threshold was strict. Relax tests: 410: b>0.8 && r>0.2; 532: g>0.9 && r<0.4.

So real code issues: possibly none! Just test issues, but I must verify the prism path actually bends. Let me write a focused debug for the prism.

Also one REAL bug spotted in trace(): pushSeg references r._lam — leftover garbage (const bin=... line is dead code referencing undefined vars — actually r is not defined in pushSeg scope... wait pushSeg=(o,d,t,r,g,b,i,n)=>{...; const bin=Math.min(23,Math.max(0,Math.floor((r._lam||550-400)/12.5)));} — r here is the red channel parameter; r._lam is undefined → undefined||550-400 → precedence: 550-400=150, undefined||150 → 150; floor(150/12.5)=12 → bin=12 unused. Dead code, harmless but remove it.)

Let me debug the prism case.

The prism works correctly! The beam enters, bends, has an internal reflection (segment 3 at 40.1° is an internal bounce — that's fine, the ray inside hit the second face at an angle... wait, look: segment 2 enters at (-1.35,-1.35) heading -4.1° in glass, travels to (-0.89,-1.38) — that's only 0.46 units away — it hit the bottom edge there (the bottom edge from (-1.39,-1.54) to (2.03,-0.43)). At that hit, the ray in glass hits the bottom face at near-grazing → reflects internally (TIR) upward at 40.1°, crosses the prism, exits at (1.16,0.35) with angle 36.0° — a proper dispersed exit with deviation 36°.

So the physics is correct — this particular aim just includes one TIR bounce inside, which is real prism behavior. My earlier test simply picked the wrong "last segment" (the array ends with the weak Fresnel ghost branch at 156° and my filter read a 0°-angle segment... it read segs[length-1] = the 156° ghost... reported 0.0 though? whatever — the exit beam exists with deviation 36°).

For the test, better approach: find the strongest segment ending at the +x wall. Also for a cleaner minimum-deviation config, adjust aim/rotation so the ray passes through the two upper faces without the bottom TIR bounce. Classic: aim at the left face a bit higher. Let me tune: prism rot=18°, apex at (-0.64,1.98)... hmm the apex is up-left. For the classic "enter left face, exit right face" I want the left face (edge from apex (-0.64,1.98) to (-1.39,-1.54)) and right face (edge (2.03,-0.43)→(-0.64,1.98)). Ray horizontal at z=-0.4, x from -8: enters left face: left face spans z from 1.98 to -1.54 — crosses z=-0.4 at t=(−0.4−1.98)/(−1.54−1.98)=(−2.38)/(−3.52)=0.676 → x=−0.64+0.676·(−0.75)=−1.15. Then travels inside, hits... let's just test numerically with several aim heights and pick one with single-pass (no internal bounce): try z=-0.2, 0.0, 0.2.

Also update the tests:

• Prism: pick strongest wall-hitting segment, deviation>15°, and violet deviation > red + 0.3°.
• TIR: leak check refined (air segment starting near long faces heading outward).
• Lens CA: threshold 0.01, and also verify with dispScale... the elements use makeIor(2.6) fixed; CA at scale 2.6 → Δf ≈ 0.037·2.6 ≈ 0.1. Test got 0.03 with dispScale 2.6? It got fR=2.18, fB=2.15 → Δ=0.03. Hmm expected larger with 2.6× dispersion... The measured "focus" via axis-crossing average is crude (spherical aberration of a ball lens is huge — marginal vs paraxial rays cross at very different points, and average mixes them). Ball lens f = nR/(2(n-1)) = 1.5168·2.1/(2·0.5168) ≈ 3.08 from center; measured 2.18 (spherical aberration pulls marginal rays shorter). Blue: n=1.5308·? with dispScale 2.6: n_blue = 1.5168+(1.5308−1.5168)... wait dispScale pivots about 550: n'(450)=n550+(n(450)−n550)·2.6; n(450)≈1.5252, n(550)≈1.5185 (Sellmeier: let me not hand-verify); n'(450)−n'(650) = 2.6·(n450−n650) ≈ 2.6·(1.5252−1.5143)=2.6·0.0109=0.028. Δf/f≈0.028/0.52≈5.4% → Δf≈0.16 at f≈3. Measured Δ=0.03 because averaging mixes aberration. Just relax threshold to 0.005 and check sign; the qualitative physics is right. Actually better: use only near-axis rays for the CA test: aperture 0.6 (paraxial). Then crossing should be near 3.0 and Δf cleaner.
• Splitter: rotate 45°.
• waveRGB: relax thresholds.
• Remove the dead bin line in pushSeg (leftover referencing r._lam).

Also improve prism test to use a clean single-pass config; find it numerically.

Time check: 51% of max time used already?! I need to move much faster. Let me prioritize: fix the prism orientation (apex toward source), patch the tests quickly, then assemble the full demo HTML efficiently in fewer, larger chunks, syntax check, deploy, update index, done.

The geometry fix: make prism vertices angles rot−90°, rot+30°, rot+150°? Standard: apex toward −x (source side). Apex at angle π (i.e., (−R,0)) at rot=0: angles π, π+120°, π+240°. Then the two refracting faces face left/up and left/down, base on the right. For the classic minimum-deviation look with horizontal beam: rotate slightly.

Actually simpler: keep apex-up (rot+90°) as-is but rotate the whole prism so a face is toward the source. Face normals at rot=0: edge0 normal ≈ (−0.866,0.5) — face midpoints at angles 150°, 270°, 30°. So the face at 150° (upper-left) and 30° (lower-right) are the refracting pair for a beam entering upper-left face... horizontal beam from left at z>0 hits the 150° face? Face at angle 150° direction from center, i.e., upper-left — beam from −x at z≈+1 hits it. Enter there, exit through the 30° face (lower right) → deviation downward ~ classic. Or flip sign: beam at z≈−1 hits the 270° face (bottom, normal −z)? no.

Easiest: aim beam at z=+1.0 horizontal from left. It enters the upper-left face, exits the right face (30° face) bending downward. Deviation ≈ 40°.

Let me just numerically scan z from 0.2..1.6 and rot to find single-pass paths, then fix the test. But time is short — instead, simply make the test robust: shoot at z=+1.0, rot=−12°, accept any path whose strongest wall-bound segment deviates >20°, with violet deviating more than red. Verify quickly.

I must be economical now: patch test, run, then immediately write the big HTML in 3-4 chunks.

rot=−12°..−24°, z=+0.8: clean single internal segment (enter, exit), deviation ≈ 40° — textbook minimum deviation. I'll use rot=−18°, z=+0.8 in test and the "Dark Side" preset (mirrored: I'll place beam entering upper-left face, fan bending downward-right).

Now update the test file quickly (prism: strongest final segment; TIR leak check refined; CA paraxial; splitter 45°; waveRGB relaxed) and rerun. Keep it fast.

All physics tests pass. Violet at −120° though — violet (450nm, n≈1.53) at this geometry hits the exit face beyond critical angle → TIR → exits through the base at −120°. That's physically real (it's how a prism can act as a dispersive TIR element), and with dispScale 2.6 the spread is dramatic: red exits at −49°, violet bounces out the base — a spectacular, physically-honest rainbow explosion. But for the hero preset, I want the classic clean fan. Let me check what happens with a slightly different prism rotation so violet also exits the second face: rot=−24 gave −39.1 for 550. Try violet at rot=−24, z=0.8... I'll fold this into preset tuning in the browser code; physically either is fine and interesting. For preset 1 I'll pick rot=−24° to give violet more headroom (lower incidence at exit face). Quick numeric check now to avoid a broken-looking hero preset.

I have a typo in the CSS: #fade span{...color:#4d6painter88;color:#4d6888;...} — the first invalid declaration will be ignored, second valid one wins. It's ugly though; fix it with sed quickly.

Now chunk 03: scene setup + element meshes + beam rendering. Then chunk 04: audio + UI + presets + interaction + loop + tail. Let me write chunk 03.

There's a stray scene.add(new THREE.Mesh(new THREE.BoxGeometry(60,15,60),wallMat)).position.y=7.4; — scene.add returns the scene (this), not the mesh! scene.add(x) returns this (the scene) in three.js. So .position.y=7.4 sets the SCENE's position.y=7.4 — bug! Fix: create mesh var first.

Also syncMesh for source: messy lines; clean up: aperture should face along dir. Circle geometry faces +z; to face along dir (dx,dz): rotation.y = atan2(dx,dz). Torus same. The nose cylinder: cylinder along Y; rotate z by 90° makes it along X; then rotate y by -rot? rotation order default XYZ... rotation.set then modifying .y then .z — assignments to euler components. I set rotation.set(0,0,0); then .z=PI/2; then .y=-el.rot. Euler order 'XYZ' means applied Z then Y then X? THREE Euler XYZ order: R = Rx·Ry·Rz? Actually applied as R = R_x R_y R_z in intrinsic? Extrinsic order... whatever: combined rotation.y then rotation.z on a cylinder: with order 'XYZ', the matrix is computed as Rx(x)·Ry(y)·Rz(z) — vector v' = Rx·Ry·Rz·v. So Rz applied first, then Ry. Cylinder axis Y → Rz(90°): Y→X-ish (Y axis rotates to -X? Rz(90°) maps +Y→−X? Rz(θ): x' = x cosθ − y sinθ, y' = x sinθ + y cosθ. +Y=(0,1,0) → (−sin90, cos90,0)=(−1,0,0) = −X. Then Ry(-rot) rotates −X to direction... Ry(φ): x' = x cosφ + z sinφ, z' = −x sinφ + z cosφ. (−1,0,0) → (−cosφ, 0, sinφ). With φ=−rot: (−cos rot, 0, −sin rot)·? = −(cos rot, 0, sin rot) → points opposite beam dir. Nose is symmetric anyway (cylinder), so fine.

Aperture: ap.rotation.set(0,-el.rot+Math.PI/2,0); then overwrite .y=atan2(dir[0],dir[1]) — the second assignment wins; fine: circle +z normal rotated by Ry(atan2(dx,dz)) → normal = (sin(atan2(dx,dz)),0,cos(...)) = (dx,dz) normalized. ✓. Remove the first confusing line. Also remove the no-op g.children.forEach(c=>{}).

Also prism rotation sign: physics rotates plan CCW by el.rot (in XZ plane, math angle). In three.js, rotation.y=θ rotates counterclockwise when viewed from +Y looking down... mapping: three rotation.y positive rotates +X toward −Z (right-hand rule about +Y). My physics plan: [x,z] with angle measured atan2(z,x), CCW in the XZ plane viewed from... looking from +Y down at XZ, +X right, +Z down (screen) — orientation flips. I use rotation.y=-el.rot for meshes — need consistency check: physics vertex v_k = (x + R cos a, z + R sin a), a=rot+90°+... Mesh geometry built with shape (x, y=-R sin a)?? I wrote prismGeo with const a=Math.PI/2+k*2*Math.PI/3, x=R*Math.cos(a), y=-R*Math.sin(a); then rotateX(-90°): shape (x,y) plane → after rotateX(-π/2): (x, y) → (x, 0, y)? rotateX(-90°): y→z mapping: point (x,y,0) → (x, 0·? ...). Rotation about X by −90°: y' = y cos(−90) − z sin(−90) = z... let me compute: R_x(θ): y'=y cosθ − z sinθ; z'=y sinθ + z cosθ. θ=−90°: y' = y·0 − z·(−1) = z; z' = y·(−1)+0 = −y. So (x,y,0)→(x,0,−y). So shape point (R cos a, −R sin a) → world (R cos a, 0, R sin a). So geometry plan coords = (cos a, sin a) — matching physics v_k with rot=0.

Then mesh.rotation.y = -el.rot: three Ry(−rot) applied to (cos a, 0, sin a): Ry(φ): x'=x cosφ + z sinφ; z' = −x sinφ + z cosφ. φ=−rot: x' = cos a cos rot − sin a sin rot = cos(a+rot); z' = cos a sin rot + sin a cos rot = sin(a+rot). → gives (cos(a+rot), sin(a+rot)) = physics rotated by +rot ✓.

For slab BoxGeometry(hw2, H, hh2): box local axes x,z align with physics halfwidth hw along local x. Physics slab rotates vertices by +rot in plan. Mesh rotation.y=-el.rot: as derived, Ry(−rot) maps local (lx,lz) to (lx cos rot − lz sin rot, lx sin rot + lz cos rot)... using formula above with (x=lx,z=lz): x'=lx cos(−rot)? wait recompute: Ry(φ) with φ=−rot: x' = x cosφ + z sinφ = lx cos rot − lz sin rot? cos(−rot)=cos rot, sin(−rot)=−sin rot: x' = lx cos rot + lz·(−sin rot) = lx cos rot − lz sin rot; z' = −lx sin(−rot)+lz cos(−rot) = lx sin rot + lz cos rot. Physics slab vertex: [x + p0 c − p1 s, z + p0 s + p1 c] with c=cos rot, s=sin rot ✓ matches. Good — rotation.y=-el.rot is correct for all plan elements.

Mirror/splitter/grating boxes: BoxGeometry(len, H, 0.1): long axis = local X. Physics: p0=(x−h c, z−h s), tangent (c,s) with rot. Mesh Ry(−rot) maps local +X=(1,0,0) → (cos rot, sin rot) ✓.

Source body: cylinder at center, nose along dir ✓ via positions computed directly in world-plan coords inside group at (x,0,z) without group rotation (g.rotation.y set to −el.rot for sources too — then nose position (dir·0.45) would be double-rotated! In syncMesh, for source I set g.rotation.y=-el.rot (since kind!=='lens') AND position children by dir — conflict! Fix: for source, set g.rotation.y=0 and place children by dir. Or keep group rotation and place children along local +X. Simplest: source group rotation.y=0; children positioned by explicit dir. Adjust code: in syncMesh, handle source first and return.

Also edges for slab (box): I didn't add edge lines for slab/lens — fine, glass fresnel reads ok. Prism got edges. Add edges to slab too? skip for time.

scene.add(...).position bug — must fix.

Let me patch 03_scene.js: fix wall mesh creation; clean syncMesh source branch.