Phantom Jam — Traffic Wave Laboratory

The task is "Wake up and do as you please." This is a free-form task. Based on my purpose, I should create cool Three.js demos in my space under /space/demos/. Let me check what demos already exist, then create a new impressive demo.

Let me start by installing shell tools and checking the current state of the demos folder.

Let me check the current state of the demos folder.

There are 54 demos already. The last one was 054-domino-rally. Let me look at the index to see the most recent demos and their descriptions, and also check a recent demo's structure to keep consistency. Then I'll create demo 055.

Let me see the full list of demo cards in the index to understand what topics have been covered (so I don't repeat). Let me grep the titles/descriptions.

There are 54 demos. The last one was 054-domino-rally. I need to create demo 055 with a fresh, impressive concept that hasn't been done yet.

Topics already covered:

1. Spinning cube
2. Nebula galaxy (particles)
3. Mandelbulb explorer (raymarching fractal)
4. Fluid dynamics
5. Gravity sandbox (n-body)
6. Event horizon (black hole)
7. Sonic reactor (audio)
8. Void runner (game)
9. Azure odyssey (flight?)
10. Abyssal bloom (deep sea)
11. Physarum garden (slime mold)
12. Powder alchemy (falling sand)
13. Clockwork nebula
14. Neon rain
15. Aurora borealis
16. Skitter (insects?)
17. Coral resonance
18. Threshold
19. Attractorium (strange attractors)
20. Murmuration (boids/flocking)
21. Terraforge (terrain)
22. Cloudsea (clouds)
23. Frostline (ice/frost)
24. Koi pond
25. Ferrofluid
26. Synchrony (coupled oscillators presumably)
27. Cymatics
28. Teslasphere
29. PyroSymphony (fireworks)
30. Morphogenesis (reaction-diffusion probably)
31. Galton cascade (galton board physics)
32. Wavefront
33. Gossamer (spider silk?)
34. Magnetosphere
35. Cloud chamber (particle physics)
36. Wavefunction ψ (quantum)
37. Epicycle (orbital mechanics/gears)
38. Sandpile (abelian sandpile)
39. Kinetic theory (Maxwell-Boltzmann)
40. Lumen lab (optics?)
41. Squish lab (soft body)
42. Neon tilt (marble game?)
43. Hyperfold (hyperbolic?)
44. Photon garden (caustics?)
45. Critical point (percolation/Ising?)
46. Bridge works (bridge building)
47. Primordial (Lenia)
48. Coasterworks (roller coaster)
49. Sakura grove
50. Voxelia (voxels)
51. Neon district (procedural city)
52. Supercell (tornado)
53. Caldera (volcano)
54. Domino rally

New ideas for 055:

• Ant colony / termite simulation — could be similar to physarum.

• Mycelium network — similar-ish to physarum.

• Origami / paper folding simulation

• Kaleidoscope shader

• Tide pool / ocean waves with Gerstner — cloudsea already covers water-ish

• Double pendulum chaos garden — pendulum physics playground with trails. Could be nice but maybe simple.

• Solar system Orrery — epicycle covers orbits partially.

• Spider web / thread simulation — gossamer covered silk.

• Mandelbox / raymarched kaleidoscopic IFS fractal flythrough — mandelbulb done, but could do "Kleinian" fractals.

• Electrostatic field lines / Faraday cage

• Voronoi crystal growth / ice crystals — frostline done.

• Starling murmuration — done (020).

• Pendulum wave machine — a "pendulum wave" is a classic mesmerizing physics demo with 15 pendulums at different frequencies creating traveling waves, standing waves, chaos patterns. That could be gorgeous with glowing bobs, bloom, trails. Not done yet. Synchrony (026) might be pendulum-ish... "Synchrony" is likely about coupled oscillators (Kuramoto). A pendulum wave is uncoupled harmonic oscillators with linearly-varying frequencies — different. Could work but let me think of something more distinct.

• "Aurora" done. "Thunderstorm"? Supercell covers tornado.

• Musical / generative: a "Harmonograph" — drawing with coupled pendulums, beautiful Lissajous-like curves, glowing ribbons. Harmonograph with 3D ribbons, bloom, could be beautiful and unique. Not covered yet. Combined with audio.

• Spider/insect — skitter done.

• "Kaleidoscopic honeycomb"

• Braids / knot theory: torus knots morphing, parametrized knots gallery with bloom. Could be "Knot Garden". Nice but maybe plain.

• Water strider / ripples: koi pond covers ripples.

• "Night Market" — too similar to neon district.

• Rail/physics marble run — galton cascade is kind of that; neon tilt is marble labyrinth.

• Pufferfish? Deep sea — abyssal bloom done.

• "Ink in water" — fluid sim done (004).

• Fire/flame — pyrosymphony is fireworks; caldera is volcano (fire-ish).

• Snow globe / winter — frostline is frost crystals; sakura is spring. A winter snow simulation with wind and accumulation could be charming but frostline may overlap.

• "Butterfly effect" — attractorium covers Lorenz presumably.

• Electric circuit / current — teslasphere covers plasma ball.

• "Tide" — ocean wave sim with Gerstner waves, floating buoys, sea foam, underwater... Azure odyssey (009) might be a sailing/flight demo. Cloudsea is clouds over ocean. Hmm.

• Cellular automata 3D — "Voxel automata"? Voxelia is voxel wilderness; morphogenesis is reaction diffusion. A 3D cellular automaton (like "Life in 3D" / rule-based crystals) could be neat but maybe close to voxelia/morphogenesis.

• "Rain on window" — neon rain done.

• "Gravity wells / spacetime fabric" — gravity sandbox and event horizon cover gravity.

• "Gyroscope / spinning top" — physics of tops, precession. Could be combined with Braitenberg vehicles.

• Braitenberg vehicles — light-seeking/avoiding robots with sensors, emergent behavior, trails. Fun and unique! But skitter might be agent-based critters already.

• "Fireflies" — swarm of fireflies with synchronization (Kuramoto!) — but synchrony probably covers that.

• "Origami koi" no.

• "Carpet / cloth weaving" — cloth sim: a waving flag, or fabric draping. "Squish lab" is soft body; cloth might be too close.

• "Planetarium / constellation explorer" — star map with real constellations, draw lines, mythological figures. Not done! Could be nice: procedural starfield with actual bright stars (Hipparcos subset), constellation lines, click to focus. But rendering quality might be less "wow".

• "Asteroid mining / space" — event horizon, gravity sandbox cover space.

• "Rube Goldberg machine" — domino rally covers chain reactions.

• "Lava lamp" — metaballs! A metaball lava lamp with ray marching, colorful blobs, bloom. Actually could be beautiful: 3D metaballs marching cubes or raymarched SDF blobs, gravity-driven rising/falling blobs, glossy. Not covered explicitly. Ferrofluid (025) might be metaballs-ish though — ferrofluid is likely SPH or metaball spikes. Hmm.

• "Chladni" — cymatics covers that.

• "Sun clock / analemma" — meh.

• "Maze generation + solver" — 3D maze, procedural generation, A* solver visualization, first-person walk. Could be cool: "Labyrinth" with growing maze algorithms (recursive backtracker, Prim's), animated generation, then a glowing path solve. Not covered! Bridge works (046) might be structural. A maze demo could be visually striking with neon walls and bloom, plus a minotaur?? Could make it a mini-game: first-person maze runner. But void runner (008) is likely an endless runner game. A maze game is different enough.

• "Topiary / bonsai" — sakura grove covers trees.

• "Turing patterns" — morphogenesis covers reaction-diffusion.

• "Double pendulum chandelier" — chaos pendulums with beautiful trails. Simple but can be made gorgeous: "Chaos Chandelier" — an array of double pendulums with glowing bobs, ribbon trails, slight perturbations showing divergence, symplectic integrator, bloom. Not covered (synchrony is coupled identical oscillators → order; this is chaos → divergence). Hmm, might feel thin.

• "Space elevator / orbital ring" no.

• "Rainbow optics" — lumen lab likely covers prisms/lenses.

• "Beach / sandcastle" — sandpile done; powder alchemy done.

• "Wind chimes / generative music" — sonic reactor covers audio-reactive; a generative wind chime garden with physics pendulums colliding, producing pentatonic tones, visual ripples. Could be lovely: "Wind Garden". Hmm.

• "Jellyfish" — abyssal bloom is deep sea bloom (probably jellyfish-like). Skip.

• "Saturn rings / Roche limit" — gravity covered.

• "Light echoes / supernova" — pyrosymphony is fireworks; a supernova remnant with shockwave might overlap.

• "Terrain erosion" — terraforge likely covers procedural terrain, maybe erosion.

• "Cave / stalactites" — spelunking with procedural cave, glow worms! "Glowworm Grotto" — like Waitomo caves: dark cave with hanging glow-worm threads (sticky silk lines with glowing dots), camera drift, water drips, reflections. That's atmospheric and unique. Gossamer (033) covered spider silk threads though. Hmm.

• "Monsoon / rain forest" no.

• "Spider" — skitter done.

• "Ant mill / traffic" — traffic flow simulation! A microscopic traffic sim with car-following models (IDM), traffic waves (phantom jams), lane changes, ring road + highway with on-ramps. Visualize brake lights, shockwaves. That's really interesting and unique: "Phantom Jam" or "Rush Hour". Interactive: add cars, change density, see stop-and-go waves emerge. With bloom-y taillight trails. I like this. But is it "wow"? Could be styled like a neon night highway from above, headlight/taillight streams, long-exposure light trails. Very pretty with bloom and motion.

• "Pinball" — neon tilt (042) likely is pinball ("tilt"). Yes, Neon Tilt is probably pinball. Skip.

• "Flock of paper planes" no.

• "Quantum double slit" — wavefunction covers quantum.

• "Electromagnetic wave / antenna" — magnetosphere covers fields.

• "Steam / locomotive" meh.

• "Boids predator-prey" — murmuration done.

• "Spring lattice / trampoline" — squish lab is soft body.

• "Origami" — folding simulation of origami crane? Hard but doable: paper folding along crease patterns. Might be too complex to do well quickly.

• "Dune / sand ripple" — sandpile done.

• "Star forge / stellar nursery" — nebula galaxy done.

• "Whale song" no.

• "Kaleidoscope" — a real-time kaleidoscope reflecting a particle scene through N-mirror symmetry with draggable mirrors. Pretty but maybe thin.

• "Heat equation / metal forging" — blacksmith: heat a metal rod, glow colors (blackbody), hammer it (deform), quench in water (steam particles). "Smithy"! Unique and tactile. But deformation physics might be heavy.

• "Tensegrity" — tensegrity structures physics. Bridge works covers structures.

• "Zen garden rake" — draw in sand (heightfield), ripples, rake patterns, koi pond covers water zen.

• "Norse / runes" meh.

• "Ballet of the planets — orbital resonance" — epicycle covers orbital gears.

• "Geyser / hot spring" — caldera covers volcano.

• "Bioluminescent tide" — koi pond / abyssal bloom adjacent.

• "Clock escapement" — clockwork nebula covers clocks-ish.

• "Marble machine / kinetic sculpture" — galton cascade is a marble run basically. Skip.

• "Aerodynamics / wind tunnel" — wind tunnel with streamlines over airfoils, smoke particles, lift/dag readouts, interactive angle of attack, stall visualization. "Wind Tunnel"! Unique, educational, and can look gorgeous with smoke streamlines + bloom. Wavefront (032) might be waves though — wavefront could be about wave propagation. A wind tunnel with smoke is distinct. Interactive: choose airfoil shapes (or draw your own?), adjust angle/speed, see separation/stall, particle smoke. That's a great demo! Drawing your own airfoil could be extra cool — trace a closed curve, compute flow via panel method? Full CFD is heavy; use potential flow with conformal mapping (Joukowski transform!) — flow around a cylinder → Joukowski airfoil with Kutta condition and circulation for lift. That's mathematically elegant and real: show streamlines of potential flow around Joukowski airfoils, with adjustable angle of attack and camber/thickness, plus smoke particles advected through the field, pressure coefficient coloring, lift readout, stall warning beyond critical angle. Joukowski transform gives exact analytic solution! Very cool and doable in shaders or JS.

Hmm, but "smoke particles advected through field" is basically what fluid dynamics (004) does with a full Navier-Stokes sim. This would be streamline/potential flow, different enough, but visually similar-ish (particles flowing around an obstacle).

Let me reconsider the traffic idea ("Phantom Jam") — emergent stop-and-go waves on a ring road, IDM car-following model, night highway aesthetic with light trails. It's emergent, interactive (click to brake a car and watch the jam propagate backward), with a density-flow fundamental diagram chart. It's genuinely fascinating physics (traffic waves) and looks like long-exposure night photography with bloom. I think that's a winner: visually distinct from everything above.

Alternatively, "Pendulum Wave" machine — classic, mesmerizing, and very pretty with glowing bobs. But simpler.

Another idea: "Cell division / mitosis" — no.

"Origami" too hard. "Harmonograph" — actually a harmonograph + spirograph style with ribbons could be super pretty and musical. Epicycle (037) may already cover spirograph-ish epicycles — yes, "Epicycle" is likely Fourier epicycles drawing shapes. So harmonograph might overlap slightly but harmonograph is pendulum-decay drawing, different look (glowing ribbons in 3D, decaying Lissajous). Hmm, risk of feeling similar.

Traffic waves it is. Let me design it properly:

Demo 055: "Phantom Jam — Traffic Wave Laboratory"

Core concept: Microscopic traffic simulation using the Intelligent Driver Model (IDM) on a ring road (and maybe a second mode: highway with lane closure). Emergent stop-and-go waves propagate backward. Night-time aerial aesthetic: cars as glowing light streaks (white headlights ahead, red taillights behind) with bloom, long-exposure trails. Interactive tools: click on road to place a slow vehicle / brake pulse; sliders for density, desired speed, truck share; heat map of speed under the road; fundamental diagram (flow vs density) plotted live; time-lapse space-time diagram! A space-time (position vs time) diagram with speed coloring is THE classic traffic visualization and looks stunning (waves visible as backward-propagating streaks). That could be the centerpiece: a scrolling space-time heatmap strip.

Rendering: Top-down night aerial view of a circular ring road (annulus), cars as elongated glowing sprites (headlight cone forward + red glow rear), bloom post-processing. Under the ring, a subtle heat-glow indicating speed (shader on ring mesh sampling a 1D texture of speeds). Side panel: live space-time diagram (position along road vs time, colored by speed) drawn on a canvas or as a texture; fundamental diagram scatter plot (flow vs density); stats (avg speed, throughput, wave count, jam density).

Interactions:

• Click/tap on road: trigger a brake pulse at that point (the nearest car brakes hard for a moment) → watch phantom jam form.
• Drag a "cone/slow zone" onto the road? Maybe simpler: click sets brake disturbance; shift-click places a temporary roadblock (stopped car for a few seconds) — or tools palette: "Brake pulse", "Roadblock (5s)", "Rogue slowpoke".
• Sliders: number of cars (density), desired speed v0, truck fraction (slower, larger), politeness/lane? (ring is single-lane, keep single-lane for pure IDM waves), time scale.
• Presets: "Free flow", "Phantom jam" (density near critical + small perturbation), "Gridlock", "Stop-and-go".
• Buttons: Reset, Pause, presets.

Also add a second view mode: straight highway with on-ramp merge (bottleneck)? Might be too much; keep the ring road which guarantees periodic boundary and clean waves. Maybe include an optional "lane drop" bottleneck on the ring: a section where speed limit is reduced — creates a standing jam at bottleneck vs moving phantom jams. Nice toggle.

Audio: subtle generative city-night ambience + Doppler-ish whooshes? Keep light: a low ambient hum whose pitch/loudness follows average speed, plus soft brake sounds when jams form. WebAudio generative. Keep subtle with mute toggle. Sonic reactor was audio-heavy; here audio is a bonus.

Physics: IDM per car: a = a_max * (1 - (v/v0)^delta - (s*/s)^2), s* = s0 + vT + vΔv/(2sqrt(ab)). Per-vehicle parameters (cars vs trucks). Ring circumference L, N vehicles. Integrate with fixed dt (e.g., 0.25 s sim steps, substeps), time scale up to 8x.

Space-time diagram: canvas 2D, each animation frame (or every sim tick) draw a vertical column: x = position along road (0..L), color = speed colormap (e.g., inferno-like: black/red = jam, bright = fast). Scroll left. Actually standard space-time: horizontal axis = space, vertical axis = time (time increasing downward). I'll do a canvas where each new sim tick adds a row of pixels at top and shifts down (or draws at bottom and scrolls). Waves appear as diagonal streaks moving opposite to traffic.

Fundamental diagram: sample each car's local density & flow... simpler: global density ρ = N/L fixed; measure average flow q = mean(v)*ρ; plot points over time, showing the equilibrium curve emerging plus hysteresis loop during stop-and-go. Draw on small canvas with axes.

Heat ring under road: build a custom shader for an annulus mesh where color depends on a 1D texture (speed along angle). Update texture each frame from car data (splat car speeds into Float32Array of, say, 512 bins with smoothing kernel). Use additive blending glow: red where slow, cyan/white where fast. Plus faint road surface with lane markings.

Cars rendering: InstancedMesh for car bodies (rounded boxes?) — but top-down night view, maybe better: each car = pair of glow sprites: headlight splash (white-blue) projected forward on road, taillight (red) at rear. Plus a subtle dark car body rectangle so it reads as vehicles. Use instanced quads with custom shader for soft glows, additive blending; bloom via UnrealBloomPass. Trails: motion blur via AfterimagePass for long-exposure feel! AfterimagePass gives nice light trails. Combined with bloom = gorgeous long-exposure night highway. Damp parameter adjustable.

Camera: OrbitControls, default top-down slightly tilted; auto-slow-rotate toggle.

HUD: left panel with controls (styled like previous demos presumably), space-time diagram + fundamental diagram canvases at bottom or right, stats readouts, tool buttons. Keyboard shortcuts: Space pause, B brake at random?, R reset, etc. Click on road = brake pulse (raycast to ring, get angle → find nearest car → set brakeTimer). Tool selection: 1 = brake pulse, 2 = roadblock. Esc back to pan.

Let me check how previous demos structure their HTML/UI to remain consistent. Let me look at a recent one, e.g., 054-domino-rally or 052-supercell, to copy the general structure (import map, UI panel styles, bloom pipeline). Let me peek at one quickly (head of file + key parts).

Also I must update /space/demos/index.html — add new card at top of the list after the "" comment.

Let me read parts of the domino rally demo for style reference.

I understand the structure. Now let me design and build demo 055: "Phantom Jam — Traffic Wave Laboratory".

Key features:

1. Ring road (single lane) with N vehicles simulated by the Intelligent Driver Model (IDM).
2. Emergent stop-and-go waves; backward-propagating jams.
3. Night aerial aesthetic: glowing headlights (white) forward, taillights (red) rear, bloom + afterimage for long-exposure light trails.
4. Speed heatmap ring under the road (custom shader sampling 1D texture).
5. Live space-time diagram (canvas) — the signature traffic visualization.
6. Live fundamental diagram (flow vs density scatter).
7. Interactive tools: click road = brake pulse; roadblock tool; presets (free flow, phantom jam, gridlock); sliders (density/N, v0, truck share, time scale); lane-drop bottleneck toggle.
8. Generative ambient audio tied to mean speed (soft hum + whoosh), mute toggle.
9. Stats: avg speed, throughput, jam count, wave speed estimate.
10. Keyboard shortcuts, pause, reset, touch support.

Physics details (IDM):

• a = amax * (1 - (v/v0)^δ - (s*/s)^2)
• s* = s0 + max(0, vT + vΔv/(2sqrt(amaxb)))
• δ = 4 typical.
• Cars: v0 = 33 m/s (120 km/h), T=1.2s, s0=2m, amax=1.5, b=2.0, length 5m.
• Trucks: v0 = 25 m/s, T=1.6, s0=3, amax=0.9, b=1.5, length 12m.
• Ring circumference: let's use radius R=120m → L ≈ 754m. Hmm, for good waves we want maybe 60-100 vehicles: density 80-130 veh/km. L=750m, N=80 → 107 veh/km. Good.
• Sim dt = 0.2s per step, with substeps; timeScale up to 6x.

Actually let me think about scale: R=120m ring, cars 5m long. Visually on screen that's fine (top-down). Car gaps at jam: s0 + vehicle length. Jam density ~ 1/(len+s0) ≈ 140 veh/km for cars. Critical density for IDM with these params where instabilities appear: around 30-60 veh/km. So N from 20 (free flow) to 120 (gridlock). Default ~65 → 87 veh/km → strong stop-and-go. Good.

Rendering the ring: RingGeometry (annulus) inner radius R-laneW/2, outer R+laneW/2, laneW = 8m. Plus a wider heat-glow annulus (radius ±14m) using custom shader with 1D speed texture, additive.

Space-time diagram: canvas 512 wide (space bins) × 180 tall (time). Every sim tick of, say, 0.5s, splat speeds into bins, draw row at bottom, scroll up via drawImage(canvas, 0, -1). Color map: inferno-ish — black (0) → dark red → orange → yellow → white (fast). Traffic moves right → waves move left-up diagonals.

Fundamental diagram: small canvas 220×160, x=density (0..150 veh/km), y=flow (0..2400 veh/h). Each 1s sim, compute q = ρ * v̄ * 3.6 (veh/h), ρ = N/L1000. Plot fading points. Also theoretical equilibrium curve? Could draw approximate equilibrium curve from IDM: v_e(ρ) solving... The IDM equilibrium: v = v0 * (1 - (s(v,0)/s)^2)^{1/4} with s = 1/ρ - len. Solve numerically per density point offline-ish (few iterations) and draw curve. Nice touch.

Car visuals:

• Body: instanced rounded box (dark, slight metallic) — visible as silhouette.
• Headlight: additive sprite pair (two small bright dots) at front + a forward "beam splash" quad on road (cone) — maybe too much; do: bright white-cyan glow quad at front, red glow quad at rear, plus soft ellipse glow under car. Use a single InstancedMesh of quads with per-instance color, positioned/rotated on ring. Simpler: 2 instanced meshes (heads, tails) of plane quads with radial gradient texture, additive blending, scale pulsing slightly with braking (brake lights brighten when decelerating < -0.5 m/s² or v < 0.5: brake glow intensity up).
• Long exposure trails: AfterimagePass (damp ~0.92). Afterimage + bloom both; order: render → afterimage → bloom → output. Note: AfterimagePass with additive blending can accumulate to white; choose damp 0.9.

Bottleneck toggle ("Lane drop"): a section of ring (e.g., 40° arc) with local v0 reduced (say to 12 m/s) → standing queue upstream, discharge downstream. Implement per-vehicle effective v0 = min(vehicle v0, zone v0 if inside zone). Visually show cones / hatched marking + "ROAD WORKS" glow sign? Add simple striped glow segment on road edge + orange warning lights (blinking sprites).

Interactions:

• Raycast click to ring: compute angle → position s. Tool "Brake": nearest vehicle brakeTimer = 1.2s (strong decel applied). Tool "Block": insert a temporary stopped "incident" at s for 6s (treated as virtual leader with v=0 at that position for the car behind) — implement as a list of blockers {s, until}. Vehicle's gap/leader computation must consider blockers: for each vehicle, the effective leader is min over (next vehicle ahead, nearest blocker ahead). Gap to blocker = distance to blocker minus half lengths... treat blocker as zero-length obstacle; gap = dist - veh.halfLen - 1.
• Also tool "Slowpoke": mark a vehicle with v0 = 10 m/s permanently (until reset) — creates moving bottleneck. Fun!
• Keyboard: Space pause, R reset, B brake at random point, 1/2/3 select tool, X toggle bottleneck, M sound, H hide UI?, C camera auto-orbit.
• Sliders: Vehicles N (20–120), Speed limit v0 (60–140 km/h), Trucks %, Time × (0.25–6), Trail damp? maybe not.
• Presets: Free Flow (N=32), Phantom Jam (N=66, v0=120), Gridlock (N=105), Convoy (N=50, trucks 30%)?

Audio: WebAudio: low filtered noise hum (wind), engine drone oscillator (sawtooth through lowpass) with frequency mapped to mean speed (e.g., 40Hz + v̄*4), a soft "whoosh" noise burst when a jam forms? Detect new jam via jamCount increase. Plus subtle click on interactions. Mute toggle (default on but gentle; previous demos default sound on).

Camera: OrbitControls, initial position above ring, tilt ~55°; autoRotate slow; damping. minDistance/maxDistance limits.

HUD layout (following domino style):

• Top-left: title panel "PHANTOM JAM" / sub "TRAFFIC-WAVE LABORATORY · DEMO 055".
• Top-right: control buttons: Pause, Reset, Preset cycle?, Bottleneck toggle, Trails toggle, Sound.
• Left panel (below title): tools (Brake pulse, Roadblock, Slowpoke) + sliders (vehicles, speed limit, trucks, time).
• Bottom-left stats: AVG SPEED km/h, FLOW veh/h, JAMS count, WAVESPD km/h (estimated), DENSITY veh/km.
• Bottom-center: space-time diagram canvas with axis labels (space →, time ↑), plus fundamental diagram small canvas to its right. Or put diagrams right side. Space-time should be wide-ish (520×180). On small screens hide diagrams? Provide toggle "Charts".
• Bottom bar: hints.

Wave speed estimation: track jam centers (bins with speed < threshold), count connected clusters; estimate wave speed by cross-correlating the bin speed array between consecutive ticks: shift that maximizes correlation → speed = shift*binSize/dt. Waves move backward relative to traffic so correlation shift will be negative. Show as km/h. That's a nice "lab" stat. Simpler alternative: use autocorrelation lag-1 of the speed field between ticks: find integer shift k in [-8..2] bins maximizing dot(v_t, v_{t+1} shifted). bins=256, binSize=L/256≈2.9m, tick=0.25s → 1 bin/tick ≈ 11.8 m/s ≈ 42 km/h. Range covers typical wave speed ~15-20 km/h backward. OK.

Jam count: bins with v < 3 m/s; count runs (transitions from ≥3 to <3) after smoothing; that's number of jams.

Throughput: count vehicles crossing a fixed detector line (s=0) per sim time → veh/h. Implement: each vehicle tracks its s; when wrap from >L-ε to <ε increment counter. Flow over sliding 30s window.

Also a speedometer arc? Skip, keep clean.

Road details: asphalt dark ring with subtle noise (canvas texture), dashed center line (texture on ring? easier: dashed line as separate small ring segments — or draw dash via shader on annulus using angle fract). I'll draw lane dashes in the heat shader? Cleaner: separate thin ring mesh with dash pattern texture (canvas-generated, repeated around). Ground: big dark plane with subtle grid/stars? Night: very dark blue ground + faint stars in sky (Points) + distant city glow silhouette? A faint skyline of glowing rectangles around horizon could be pretty but heavy; do simple: dark ground, subtle radial gradient fog, few "city light" point sprites far away, plus a star field. Actually since view is mostly top-down, ground plane with slight noise + vignette is enough. Add a couple of decorative glowing ring markings (start/finish detector line across road at angle 0).

Trucks: longer body, amber marker lights, different tail glow color slightly. Slowpokes: magenta glow outline. Braking vehicles: brighter red tail + show brake event ring flash (expanding ring sprite at brake location).

Sound design:

• master gain 0.5, mute toggle.
• Ambience: brown noise through lowpass 200Hz, gain 0.05.
• Engine drone: two detuned saws (detune ±6 cents) through lowpass (cutoff mapped to mean speed 120..600Hz), base freq 30 + v̄*2.5 Hz, gain 0.05.
• Whoosh on new jam: bandpass noise sweep down, 0.8s, gain 0.12.
• Click on tool apply: short square blip.
• Keep all gentle.

Performance: N ≤ 120, trivial. Space-time canvas ops cheap. Splats into 256 bins each tick. All good. Quality: pixelRatio clamp 2; if devicePixelRatio low-power? Fine.

Structure the code cleanly with comments (previous demos ~900-2100 lines; aim ~1000-1300 lines). Single index.html in /space/demos/055-phantom-jam/.

Let me now also decide the exact math for IDM and update loop.

Constants:

Vehicle params:

IDM accel:

Clamp acc to [-9, amax]. v = max(0, v + acch). s += vh (mod L).

Order vehicles by position for leader lookup: keep array sorted by s each step (N small; just insertion sort since nearly sorted).

Blockers: {s, until}; leader for vehicle i: scan blockers, find nearest blocker ahead within wrap distance; effective gap = min(gapToNextVehicle, distToBlocker - halfLen - 0.5), with vLead = 0 for blocker.

Brake pulse: vehicle.brake = 1.0s; while brake>0, apply extra decel −6 m/s² (min v 0), brake -= h. Also brighten brake light.

Slowpoke: vehicle.v0factor = 0.3 → effective v0 = carV0*0.3, and max speed capped; mark color.

Bottleneck zone: [sA, sB]; v0eff = min(v0eff, zoneV0=11 m/s) inside zone.

Density slider N changes: rebuild vehicles evenly spaced with v = min(v0*0.8, equilibrium?) — start with small random perturbation to speed (±2%) and positions jitter — seeds instability. For "Free flow" preset start near equilibrium speed.

Space-time diagram update: every 0.25s sim time (accumulate), splat: binIndex = floor(s/L*BINS); write speed into bins smoothing: for each vehicle, distribute to its bin and neighbors weighted. Then colormap → putImageData row; scroll. Implement with an offscreen 1px ImageData row, drawImage scaling to canvas width, then ctx.drawImage(canvas, 0, -1) shift. Mark detector line? not needed.

Colormap (inferno-ish, compact function):

I'll use a simple 4-stop gradient: #000 → #3b0f2e(0.25) → #b1332a(0.5) → #ff9e3d(0.75) → #fff7c0(1). Precompute 64-entry LUT.

Heat ring shader:

Build DataTexture BINS×1 LuminanceFormat? Use RedFormat in r160 with float or unsigned byte. Use UnsignedByteType, update each tick.

Cars:

• body InstancedMesh (BoxGeometry 1×1×1 scaled per instance: len×2.2 wide×1.2 high), MeshStandardMaterial dark (#0b0d12, roughness .6 metalness .3) — with night ambient low + a dim directional so silhouettes read.
• head/tail glow quads: PlaneGeometry 1×1 with generated radial-gradient canvas texture; InstancedMesh with MeshBasicMaterial (blending additive, depthWrite false). Per-instance color via instanceColor. Head quads: size ~3×3 at front offset (len/2+0.5), color near-white #cfe8ff (trucks slightly warmer); Tail: #ff2a1e, brake → #ff5040 *1.8 brightness (use instanceColor scale). Orient quads facing up (rotationX -90°) slightly above road (y=0.6).
• Under-glow ellipse: another instanced quad, softer, color bluish-white for cars / amber trucks, alpha low. Maybe skip if busy — keep, it grounds vehicles.
• Beam splash: elongated quad in front, additive, faint blue, length ~10m scale with speed? Nice: shows "headlight cone" from top. Keep faint (alpha 0.15) so road texture visible. This sells "aerial night highway". Include.
• Brake flash ring: pool of 12 ring sprites that expand/fade when brake pulse applied.

Trails: AfterimagePass damp 0.9 — note it applies to whole frame incl. UI? No, UI is DOM, fine. AfterimagePass affects entire scene; dark scene + additive glows = nice trails. But heat ring + road will also smear — with damp 0.9 the persistent bright ring may bloom out? The static elements get "trails" too but since they're static, afterimage just converges to same image (steady state same as original, slight boost of brightness ~1/(1-damp) for constant color! Actually AfterimagePass blends newFrame with olddamp → steady state = new/(1-damp?) hmm: acc = mix(new, acc, damp) = new*(1-damp) + acc*damp → steady = new. Good, it converges, not blows up (it's lerp). Moving bright dots leave fading trails. Static scene unchanged.

Bloom: UnrealBloomPass strength 0.9, radius 0.6, threshold 0.25.

Also add subtle "city glow" horizon: a big ring of faint warm point sprites at radius 400-800, y≈0, plus star Points sphere top. Simple.

Detector line at angle 0: thin glowing bar across lane + tiny label? Just bar, cyan.

Space-time & fundamental canvases: put in bottom-right panel:

Careful with width on smaller screens: max-width 44vw; hide via toggle. I'll set canvas internal 512×168, CSS width min(46vw, 560px). Fundamental diagram canvas 220×168.

Labels on charts: draw axis text inside canvases at init (density axis, flow axis; space/time arrows) — simpler: small HTML captions above/below.

Time to also handle resize: renderer + composer + camera; canvases fixed internal size.

Edge cases: timeScale changes; pause; N rebuild; presets set sliders; reset clears diagrams (fill black), blockers, flashes; sound init on first user gesture (create AudioContext lazily on first interaction — attach to pointerdown once; but demos usually autostart muted? They default sound on and create context on first click. I'll init audio on first pointerdown/keydown; Sound button toggles enabled).

Let me write the file now. I'll write it in one go — it'll be long (~1100 lines). Let me be careful with GLSL and JS syntax.

Key pieces:

Vehicle spawn:

Hmm wait: starting v — if N high (gridlock), starting everyone at 24 m/s with tiny gaps → immediate crash avoidance (IDM handles by braking hard, no collisions since IDM is collision-free for reasonable params). OK.

IDM step:

Wait: gap should be from front bumper of veh to rear bumper of leader: leader front? Standard: gap = (lead.s - lead.len/2) - (veh.s + veh.len/2). Yes as written. But if gap<0 due to wrap add L. With n vehicles evenly spaced this works.

Careful: when vehicles sorted ascending, leader of last is first (+L). Handled by wrap on gap. But lead.s could be less than veh.s; gap += L fine.

Blockers list filter expired in step.

Sort vehicles: insertion sort by s.

Sorting each h step 120 vehicles — trivial.

Detector: track crossings of s=0: store prevS before move; if prevS > 300 && veh.s < 100 → crossing++ (since wrap). Actually simpler: if veh.s < prevS → wrapped → crossing. prevS stored after.

Flow: crossings per simSecond; keep rolling sum over 30s window: array of per-second counts.

Space-time tick every 0.25s: binsFloat: zero; for each vehicle: bi = floor(s/LBINS)%BINS; bins[bi] accumulate speed and count → avg. Then smooth: out[i] = 0.25prev + 0.5cur + 0.25next. Then draw.

Heat texture: same bins → byte texture; but texture needs to be smooth in time too: lerp with previous byte values (heat[i] = heat[i]0.7 + new0.3).

Wave speed estimation: keep prevBins Float32Array; cross-correlate current vs prev for shifts k in [-10..4]: sum over i of (cur[i]-mean)(prev[i-k]-mean). Choose best k → waveSpeed = -kbinSize/tick (negative = backward). bins units m/bin = L/256 ≈ 2.946. tick 0.25s → bin/tick = 11.78 m/s. k=-2 → -23.6 m/s? Hmm typical wave −5 m/s (−18 km/h) → k ≈ −0.42. Sub-bin resolution needed: parabolic interpolation on correlation around best k. Or use tick 0.5s and bins 128: bin=5.9m, bin/tick(0.5)=11.8 m/s same. k fractional via parabola. Fine: waveSpd = -(k + parabolaOffset)*binM/tickDt. Display km/h. Clamp sanity to [-30, 5] km/h else show "—".

Jam count: threshold bins < 2.5 m/s; count rising edges (circular, require run length ≥1); smooth over time (EMA). Display integer.

Mean speed: avg v *3.6 km/h.

Now colors/colormap LUT:

64 entries, lerp between stops. t = clamp(v/30). Note jam=blackish, fast=warm white. On space-time, waves = dark streaks on bright background.

Heat ring colors: same LUT but multiplied; additive over dark road.

The road annulus: radius inner R-4.5, outer R+4.5, RingGeometry(inner, outer, 256, 1) rotated -90° X. Canvas texture asphalt: dark #10131a with noise speckles + slightly lighter center line? The center dashes: separate ring texture... Simplest: bake everything into one canvas texture wrapped around: create canvas 2048×64 where x = around ring, draw asphalt noise, draw dashed white center line (x-periodic dashes), draw edge lines solid. UV of RingGeometry: by default RingGeometry UVs are planar (based on position / (2*outerRadius)) — not angular! So texture wraps like a disc map — dashes would distort. Options: custom UV generation: iterate geometry.attributes.uv, set u = angle/2π, v = (r - inner)/(outer-inner). Positions known → compute angle = atan2(z?, x). RingGeometry lies in XY plane (before rotation): positions (x,y). angle=atan2(y,x). Do that.

Heat annulus: separate RingGeometry(R-9, R+9, 256,1), custom ShaderMaterial with uv.x = angle fraction (same UV fix), uniform uTex (DataTexture 256×1, RedFormat UnsignedByte, LinearFilter? LinearFilter on R channel works in WebGL2; three r160 defaults WebGL2 — fine), fragment:

LUT in shader via if-chain? Use small 1D DataTexture as LUT sampler (64×1 RGB byte). Pass uLUT. col = texture(uLUT, vec2(sp, .5)).rgb.

Also add a soft outer glow ring (radius R±14) with very low alpha to spread light? The heat annulus at R±9 with edge fade is enough plus bloom.

Detector bar: thin box across lane at angle 0, emissive cyan, pulsing slight.

Brake flash: expanding ring mesh pool (RingGeometry(0.8,1.0,32)) additive magenta/red fade.

Slowpoke marker: magenta ring above vehicle? Use its tail color to magenta and head to pink — simpler: tint underglow magenta. Slowpokes rare. Underglow instanceColor per vehicle works.

Bottleneck zone visuals: hatched orange strip along zone edges: two thin rings segments + blinking amber sprites at zone start; plus a floating "⚠" sprite? Build: TorusGeometry? For arc segment: RingGeometry(inner,outer, 32, 1, thetaStart, thetaLength) with orange stripe texture repeating → MeshBasic additive low alpha, y=0.05. Blinking lights: 4 sprites at zone start/end, blink via time-based alpha in update (scale/opacity). Also a sign: small plane with canvas texture "WORKS" — maybe skip sign, lights + hatch suffice. Add orange cones: instanced small cones (ConeGeometry) along zone center every 6m with emissive orange tips — cute and easy: instanced cone mesh ~20 cones, static when zone enabled.

Skyline: skip; add stars Points (800) on dome + faint city glow: 60 warm sprites scattered at radius 500–1500 ground level, additive, alpha 0.05–0.15. OK cheap.

Ground: CircleGeometry radius 2000, MeshBasicMaterial color #05060c; plus subtle radial grid? Add polar grid lines via GridHelper? A faint PolarGridHelper (radius 600, sectors 24, rings 8, color #10131f) could look techy-nice. Add opacity low.

Lighting: ambient #223 dim + DirectionalLight (0.4) from above-side so car bodies shade; bodies Standard. But mostly additive glows — lighting minor.

Camera initial: ring R=120 → camera pos (0, 190, 150), target 0. OrbitControls maxDistance 700, minDistance 60, maxPolarAngle 85°.

Auto-rotate: controls.autoRotate = true speed 0.5; toggled by any user drag? Keep on until user interacts (controls 'start' event → autoRotate=false), button to re-enable.

UI Panels: title, controls (buttons), lab panel (tools+sliders), stats, charts, hints, banner (jam alert? "PHANTOM JAM FORMED" flash when jamCount rises 0→≥1? Might spam; do first-time toast only per reset, plus whoosh). Also toast messages for tool applications ("Brake pulse applied", "Roadblock active 6s", "Slowpoke deployed").

Let me define presets:

• free: N=30, v0=120, trucks=10
• jam: N=66, v0=120, trucks=10 (critical-unstable)
• grid: N=105, v0=90, trucks=20
• convoy: N=48, v0=100, trucks=35 (mixed platoons) Preset button cycles; also auto-applies brake pulse 0.5s after preset jam? No — let user play. Actually for instant gratification, on "Phantom Jam" preset, schedule one automatic brake pulse at t=+2s. Good demo hook.

Sliders: vehicles 24..110 step2; speed 60..140 step5; trucks 0..40 step5; time 0.5..6 step0.5 (display ×).

Note changing N respawns (jams collapse) — acceptable; label "traffic rebuilds on change".

Buttons: Pause (Space), Preset (P), Bottleneck (X), Charts (G), Trails (T), Sound (M), Reset (R).

Tools buttons: Brake (1), Block (2), Slowpoke (3) — radio behavior; default Brake.

Stats: AVG SPEED, FLOW, DENSITY, JAMS, WAVE spd. Update 4×/s.

Now audio specifics:

Sound enabled flag gates whoosh/blip and master gain ramp 0/0.6.

Autostart audio: browsers block; init on first pointerdown. If Sound button shows "on" but AC null → init on first gesture then resume.

Now write the whole HTML. Also meta description. Title "Phantom Jam — Traffic Wave Laboratory". Demo number 055.

Charts panel:

Time direction: newest at bottom, label "time ↑"? I'll draw newest row at bottom and scroll up: so time increases downward... Standard traffic space-time has time vertical increasing upward with newest at bottom. I'll put newest at bottom → "now ↓" caption: chart-x right label "time → up"? Keep caption "scrolls upward · newest at bottom".

Wait scrolling: draw row at bottom (y=h-1), then shift entire image up by 1 (drawImage(c,0,-1)), so newest at bottom, time increases downward?? If newest at bottom and old rows move up, then going up = older = past. Time increases downward toward bottom (now). Vertical axis: top = past, bottom = now. Vehicles move in +s (right). A stopped jam stays at fixed x → vertical line; backward-propagating wave moves to smaller x as time advances → as we go down (time advancing) streak drifts left → diagonals lean left going down. Good, classic look.

Fundamental diagram drawing: axes border, grid lines faint; equilibrium curve precomputed numerically: for ρ in 5..150 step 3: solve v_e via fixed point iteration: v_{k+1} = v0*(1-(s*(v_k)/s)^2)^{1/4}? At equilibrium dv=0: s* = s0 + vT; condition (v/v0)^4 + (s/s)^2 = 1, s = 1000/ρ - lenAvg (m). Solve bisection on v in [0,v0]. Use car params (len 5, T1.2, s0 2, v0 from slider, a irrelevant). q = ρv3.6. Draw polyline cyan dim. Live point: dot (global ρ, q measured) amber with fading trail (store last 200 points, alpha fades). Also free-flow line q=ρv03.6 up to capacity? The IDM eq curve covers it.

Bisection: f(v) = (v/v0)^4 + ((s0+v*T)/s)^2 - 1. f(0) = (s0/s)^2 -1; if s<=s0 → jam v=0. f(v0) = 1 + big -1 >0. If f(0)>=0 → v=0 else bisect.

Sim time tracking: simT accumulates h each step.

Space-time tick: tickAcc += h; while tickAcc>=0.25: tickAcc-=0.25; drawRow(). Also update heat texture there.

One more consideration: The number of bins 256, canvas width 512 → 2px per bin. Row drawn via ImageData 256×1 then drawImage scaled to 512×1. Use temp canvas rowCanvas 256×1; then ctx.drawImage(rowCanvas,0,0,256,1,0,h-1,512,1). Smoothing disabled (imageSmoothing false) for crisp pixels? Smooth looks nicer: leave smoothing on for slight blend. OK.

Also draw faint vertical detector line marker at x=0? skip.

Heat texture: DataTexture 256×1 RGBA (use RGBA to be safe with filtering): bytes [r,g,b,a=255]. I compute LUT in JS anyway → write RGB directly. Shader just samples and multiplies edge fade & intensity pulse. So no second LUT texture needed. Alpha channel not used (additive). Update: tex.needsUpdate=true per tick.

Now car instancing counts: MAXV = 120. Create InstancedMesh with MAXV, set count = n. Per frame update matrices: position on ring: angle θ = s/R (since arc s = R*θ). x = R cosθ, z = -R sinθ? Choose orientation so increasing s goes counterclockwise viewed from above → θ increasing CCW: pos=(Rcosθ, 0, R sinθ) with θ=s/R. Heading tangent = (-sinθ, 0, cosθ). For CCW when viewed from +Y looking down... In three.js, +Y up, looking down -Y, x right, z toward viewer. CCW on screen (x right, z down-screen toward viewer)... whatever — just consistent: quaternion from matrix lookAt with forward=tangent. Compose matrix: make rotationY(-θ + π/2)? Let me define: forward vector f = d(pos)/ds = (-sinθ, 0, cosθ). Yaw angle φ = atan2(f.x, f.z)?? For object whose forward is +Z? BoxGeometry length along X? Let me make car geometry length along Z (BoxGeometry(width X=2.2, height Y=1.1, length Z=len)) — but per-instance len differs (car 5 vs truck 12): scale Z per instance. Base BoxGeometry(1,1,1); scale matrix (2.2, 1.1, len). Forward = +Z. Yaw φ such that R_y(φ) * (0,0,1) = f → (sinφ, 0, cosφ) = f → φ = atan2(f.x, f.z) = atan2(-sinθ, cosθ) = -θ. So φ=-θ. Matrix: compose(position y=0.55, quaternion from Euler(0, -θ, 0), scale(2.2,1.1,len)).

Glow quads: PlaneGeometry(1,1) rotateX(-π/2) so plane lies flat facing up; but instanced per-quad yaw also needed for beam orientation. For head/tail circular glows yaw irrelevant (radially symmetric) — keep same matrix anyway, scale (sx, 1, sz)? After rotateX(-90°), plane's local X stays X, local Y becomes -Z? Plane XY → after rotX(-90): x→x, y→ -z? For symmetric gradient doesn't matter. Beam quad: elongated ellipse gradient texture, scale (5, 1, 14) with length along Z (forward), positioned at front offset. Works with same yaw quaternion.

Simplify: one InstancedMesh "glowMesh" with 4 slots per vehicle? InstancedMesh index = veh4 + slot? Update all each frame — 1204=480 matrix composes per frame, fine.

Slots: 0 head glow (scale 4,4 → after plane rot: x-scale 4 z-scale 4? plane is 1×1, scale (4,1,4)? plane rotated flat: scale applies in local space before rotation? Matrix compose handles rotation then scale in local axes: local X stays world-ish X rotated by yaw; local Z is forward. Plane geometry rotated via geometry.rotateX(-π/2) at creation: its local coords: X width, Z = former Y. So scale (w,1,l) stretches width & length. Good.

Slots:

• 0: head glow: pos front (s + len/2 + 1.2) → offset along tangent: offsetM = len/2+1.2; pos = ringPos(θ + offsetM/R)... simpler: pos + f*offsetM. y=0.7. scale (5,1,5). color: white-blue (truck: warm). intensity via color multiplier (use Color setScalar? instanceColor supports RGB; use color values >1? instanceColor is float, can exceed 1 for bloom pop: set (1.6,1.8,2.2)).
• 1: tail glow: offset -(len/2+0.6), scale (3.6,1,3.6), color red (2.2,0.25,0.12); brake → (3.2,0.5,0.3); slowpoke → magenta (2.4,0.4,2.0).
• 2: underglow: y=0.25, scale (len1.15? can't exceed... fine (3.4,1,len1.25)), color dim cyan (0.10,0.16,0.24) or truck amber (0.22,0.14,0.06).
• 3: beam: offset len/2 + 7, y=0.3, scale (4.5,1,13), color (0.10,0.14,0.22)*(speedFactor 0.6..1). Beam texture: elongated gradient fading forward — use separate material? Same radial texture stretched is okay-ish: radial gradient stretched 13 long → ellipse, fine.

All in one InstancedMesh with additive material + radial texture.

Colors via setColorAt each frame (or only when changed: brake state changes each frame during brake; fine to update always).

Body instanced mesh count = n.

Detector bar: at θ=0: position (R, 0.1, 0), thin BoxGeometry(10,0.15,0.8) rotated yaw -0 → spans across lane (width along X = radial direction at θ=0). Emissive material cyan, pulse via emissiveIntensity = 1.2+0.6sin(t3).

Brake flash pool: 10 meshes RingGeometry(0.7,1,24) flat, additive red; on brake apply: activate at position, life=1 → scale = 1+life*30, opacity (1-life). Update.

Zone cones: InstancedMesh cone (ConeGeometry(0.5,1.2,8)), emissive orange material; place every 6m along zone arc at center radius; count = floor(zoneLen/6). Static matrices when enabled; visible flag.

Zone hatch: RingGeometry(R-4.5, R+4.5, 48, 1, θ0, θlen) with stripe texture (canvas diagonal stripes), additive alpha 0.25, y=0.06. UVs default planar — stripes will look skewed but "construction hatch" acceptable; or fix UVs angular like road. I'll fix UVs same way.

Blinkers: 6 sprites (SpriteMaterial additive amber) at zone both ends on edges; blink: material opacity can't per-sprite individually (shared). Use 2 materials alternating phases, or scale pulsing per sprite via userData phase in loop. Sprite scale pulse works.

Now — code size. Let's write it. Also the "toast" element for messages.

One more feature for wow: "long-exposure" is core aesthetic — name the Trails toggle "Long exposure". AfterimagePass damp: trails on = 0.92, off = 0 (pass disabled → set pass.enabled).

Composer passes order: RenderPass → AfterimagePass → Bloom → OutputPass. Check AfterimagePass shader: it lerps between current and history: color = max? Actually Unreal's afterimage in three: gl_FragColor = max(texelNew, texelOld * damp)? Let me recall: three's AfterimagePass fragment:

Yes it's max-based → bright dots leave decaying trails, static scene stable, no runaway.

That's ideal for lights: headlight dot moves → comet trail. damp 0.9 default; but with timeScale 6, motion per frame large → dotted trails; acceptable.

Note: max-based afterimage keeps UI? UI is DOM — unaffected. Canvas diagrams are DOM too. Good.

Stars: Points with additive small white dots at y 300-600 dome; they'll smear slightly with afterimage when camera rotates — fine/pretty.

Also faint moon? skip.

Stats update 4 Hz: avgSpd km/h; flow veh/h (rolling 30s); density veh/km = n/0.754; jams; wave km/h.

Reset: respawn with current slider values, clear diagrams, blockers, flashes, toasts, simT=0, crossing window clear.

Pause: stop sim & clock accumulation but keep rendering (camera orbit).

Time slider: timeScale.

I think I also want an initial auto brake pulse so first-time visitors see a jam form within ~10 s: schedule brake at t=4s on random vehicle (once after each reset? just on load & when preset=jam). Add toast "auto brake pulse @ t=4s — watch the wave". Nice onboarding.

Let me also add heat legend? skip.

Write CSS consistent with previous demo (monospace, neon cyan/magenta/amber).

Panel-lab: tools row + sliders; place left below title:

Sliders compact.

Bottom hints bar: "click road: apply tool · 1/2/3 tools · space pause · P preset · X bottleneck · T trails · G charts · R reset".

Banner center for big events: first jam: "PHANTOM JAM FORMED" with sub "no crash · no bottleneck — just physics". Once per reset.

Toast stack bottom-left above stats? Use single toast line in lab panel? Simpler: small fixed toast bottom-center above hints, auto-hide.

Mobile: panels shrink; charts hidden by default on <700px? media query hide charts panel; sliders width smaller.

Alright — also update /space/demos/index.html adding card after the marker comment:

Check existing card format for 054: <div class="num">Demo 054</div><h2>Domino Rally &mdash; Chain Reaction Playground</h2><p>...</p>. Let me view the exact block to replicate formatting. Also note the index likely has full demo list with descriptions. Let me grep the 054 card block.

Good. Now I'll write the full demo. Let me create the directory and write the index.html file. This will be a long file (~1100+ lines). I'll write it in parts to avoid a single huge write failing — actually a single write should be fine, but let me split into 2-3 appends for safety.

Let me draft the complete code carefully.

Let me write out the module JS in full:

Vehicle management, IDM step, sorting, blockers, detector crossings, stats, bins & splat, diagrams, audio, three scene, instancing, input raycast, UI wiring, main loop.

Order of definitions: helpers → params → audio → scene build → sim → diagrams → UI → loop.

Careful points:

• sortVehicles insertion sort each step.
• Blockers: array {s, until}.
• Detector: prevS before moving.
• crossings: array of {t: simT}; filter older than 30s → flow = count/303600? crossings per 30s window → veh/h = count * (3600/30) = count120. Smooth EMA.

Bins update each TICK:

Empty-bin handling: with N=30 on 256 bins, most bins empty. For space-time & heat we want speed field = local speed of nearest cars. Simple approach: splat each vehicle's speed with a triangular kernel of width ~ (L/N)/BIN_M bins (adaptive: kernel half-width kw = clamp(Math.round(L/vehicles.length/BIN_M/2), 1, 6)). Weighted accumulation; normalize by weights. Empty remaining → use previous frame value * 0.995 (persistence). Then temporal smoothing binV = binV0.65 + new0.35. Good enough visually.

Wave speed: cross-correlation of binV vs binPrev (both stored per tick) over shifts k in [-10..4]:

Hmm sign: if pattern moves backward (decreasing s) at w bins/tick: binV[i] ≈ binPrev[i - w] (content of bin i now was at bin i-w one tick ago). Correlating c(k) = Σ binV[i] * binPrev[i+k] peaks when i+k = i - w → k = -w. So w = -k. waveSpeed m/s = w * BIN_M / TICK = -bestK*BIN_M/TICK. Traffic direction positive; jam wave negative. km/h = ×3.6.

Parabolic: y1=c(bestK-1), y2=c(bestK), y3=c(bestK+1) → offset = 0.5*(y1-y3)/(y1-2y2+y3), clamp [-1,1]. Need c stored per k. Fine.

Only update displayed wave speed if |w| within [1, 30] km/h and correlation strength decent; else decay toward previous. Keep simple: EMA 0.7 old + 0.3 new, clamp [-35, 10].

Jam count: bins with binV < 2.5: count transitions (i from 0..BINS-1 circular). Merge jams within 3 bins? Simple count of runs; EMA.

meanV: direct average over vehicles.

Now scene build:

Ground circle radius 1800 at y=-0.3 color 0x05070e. PolarGridHelper radius 500? PolarGridHelper(radius, sectors, rings, divisions, color1, color2): new THREE.PolarGridHelper(420, 24, 8, 64, 0x0d1120, 0x0d1120) material transparent opacity .35, y=0.02.

Road: RingGeometry(R-LANE_W/2, R+LANE_W/2, 220, 1); rotateX(-π/2); fix UVs: uv.x = atan2(pos.y, pos.x)/(2π) → since geometry pre-rotation in XY: angle from (x,y); after rotateX(-90), y→z? We compute before rotation or use original attributes. Approach: create geometry, compute uv from position.x, position.y (ring in XY), then geometry.rotateX(-Math.PI/2). u = (atan2(y,x)+2π)%1... u = (Math.atan2(y,x) / (2π) + 1) % 1. v = (r - inner)/(outer-inner), r = hypot(x,y).

Asphalt canvas texture: 1024×32 (wrap around 220 segments → dash length consistency: texture repeats 1× around ring; make dashes: 60 dashes around → each dash ~12.5m: draw in canvas width 1024: dash every ~17px width 9px). Also edge lines: solid near top/bottom rows. Noise speckle. RepeatWrapping on x. Use for MeshBasicMaterial map, color multiplied? Basic material with map is unlit — good for night (we control brightness). Dim colors (#161a22 base).

Center dashed line: at v=0.5 row draw white-ish (#9aa4b8) dashes alpha .5.

Heat annulus: RingGeometry(R-10.5, R+10.5, 220, 1) same UV fix; ShaderMaterial:

Additive blending, transparent true, depthWrite false. uBoost ~0.9. Heat tex: DataTexture RGBA 256×1, LinearFilter, wrap ClampToEdge (x wraps? angle wraps! set wrapS = RepeatWrapping).

Detector bar, zone visuals, cones, flashes, stars, city glows, car bodies, glow quads.

Car body: BoxGeometry(1,1,1), translate y +0.5 so base sits at 0? We'll compose with y=0 and geometry translated so box from y0..y1: geometry.translate(0, 0.55, 0). MeshStandardMaterial({color:0x11141c, roughness:0.45, metalness:0.6}). InstancedMesh MAXV. Directional light (0.5) position (200,300,100); ambient (0x1a2338, 1.2?) Use AmbientLight 0x2a3450, 1.0. Fine.

Glow texture: canvas 128×128 radial gradient white center → transparent. Beam uses same.

glowInst = new THREE.InstancedMesh(planeGeo, glowMat, MAXV*4). planeGeo = PlaneGeometry(1,1); planeGeo.rotateX(-Math.PI/2). Material: MeshBasicMaterial({map: glowTex, transparent:true, depthWrite:false, blending:THREE.AdditiveBlending, side:DoubleSide? not needed facing up but camera can go low... set DoubleSide}).

Per-frame update loop for instances:

Wait yaw: forward f = (-sinθ, 0, cosθ). Earlier: φ = atan2(f.x, f.z) = atan2(-sinθ, cosθ) = -θ. But also need to double check with position: pos=(Rcosθ, 0, Rsinθ), d/ds pos = (1/R)(-R sinθ, 0, R cosθ) = (-sinθ,0,cosθ). Yes f. Yaw about Y: rotation Y by φ maps +Z=(0,0,1) to (sinφ, 0, cosφ). Set equal f: sinφ = -sinθ, cosφ = cosθ → φ = -θ. Good. Q.setFromEuler(E.set(0,-θ,0)).

Body: compose(pos(px, 0, pz), Q, scale(2.2, 1.1, v.len)). Note geometry translated +0.55 so body sits on ground. setMatrixAt(i, M). instanceColor for body? Truck vs car tint: set color at spawn only (body tint cars #1a1f2b trucks #241d16). MeshStandardMaterial with instanceColor works (vertexColors not needed; instanceColor supported). Set once per spawn; mark needsUpdate.

Glow slots at gi = i*4:

• head: pos + f*(v.len/2 + 1.1), y 0.85, scale (4.6, 1, 4.6), color: car (1.5,1.75,2.3), truck (2.2,1.7,1.1)
• tail: pos - f*(v.len/2 + 0.5), y 0.8, scale (3.4,1,3.4), color brake? brakeIntensity = v.brake>0 || v.accPrev < -2 ? bright : normal; normal (1.9,0.16,0.08), brake (3.4,0.42,0.2); slowpoke overrides (2.6,0.5,2.2).
• under: y 0.22, scale (3.6,1,v.len*1.2), color car (0.09,0.14,0.22), truck (0.2,0.13,0.05), slowpoke (0.2,0.06,0.2).
• beam: pos + f*(v.len/2 + 7.2), y 0.3, scale (4.2,1,13.5), color scale by speed: k=0.25+0.75*min(1,v.v/20); (0.11,0.16,0.26)*k.

glowInst.count = n*4; bodyInst.count = n; needsUpdate flags.

Flashes pool update: life -= dt; scale/opacity.

Blinkers: scale pulse.

Detector pulse.

Zone visibility toggles.

Space-time drawing:

drawImage(canvas, 0, -1) with self-copy — allowed (stc as source). Yes.

LUT build via gradient stops.

Heat texture update in same tick:

Store heatTex as RGBA bytes. Also mark zone tint? In heat shader, could tint zone arc orange: pass uZone (a,b) and mix stripe color when uAngle in range & zone enabled. Add: uniform vec3 uZone; (a,b,enabled). In shader: if enabled and u in [a,b] fraction: c = mix(c, vec3(1.0,0.55,0.1), 0.35*(0.5+0.5sin(time6)))? Blink. Simple mix. Do it: uniform float uTime.

Fundamental diagram:

Eq curve compute via bisection described. Use car params & len 5.

Flow measurement: crossings timestamps; window 20s → q = count/20*3600. ρ = n / (L/1000).

Live dot: amber; trail: rgba(255,195,87, alpha fade).

Audio module as planned.

UI wiring: buttons & sliders & keyboard & pointer.

Pointer: raycaster on pointerdown (with 'click' vs drag distinction: record downPos, on pointerup if moved <6px → treat as click apply tool). Use raycast to an invisible math plane y=0: ray.intersectPlane. Compute θ = atan2(z, x) normalized [0,2π); s = θ*R. Check radial distance |r - R| < 14 else ignore (clicked outside road). Apply tool:

• brake: find nearest vehicle by circular distance to s → v.brake = 1.1; flash at s; blip; toast.
• block: blockers.push({s, until: simT+6}); flash orange; toast.
• slow: nearest vehicle → v.slow = true (toggle off if already); toast.

Also whoosh when jamCount EMA crosses ≥1 rising (and banner once per reset).

Auto brake: at simT crosses autoBrakeAt (once): apply brake to random vehicle + flash + toast "auto brake pulse — watch the wave grow".

Main loop:

Careful: simT increments inside idmStep? Put simT += H inside while loop after step. tickDiagrams uses binPrev = copy of binV before computing new.

Blocker expiry check each step: filter in idmStep start: blockers = blockers.filter(b=>b.until>simT).

Detector crossings: in move loop: if(v.s < prevS) crossings.push(simT). prevS captured before move.

Note: vehicles sorted but we mutate s; sort at start of next step anyway.

Presets:

Cycle button; applyPreset sets sliders UI, respawns, banner shows preset name. Phantom Jam preset sets autoBrakeAt = simT+2.5.

Default on load: preset index 1 (PHANTOM JAM) with autoBrakeAt=4.

Sliders update P and respawn only for n/trucks changes (speed v0 updates live v0m per vehicle: recompute v0m = v0*(truck?0.78:1)*(het) — store het factor per vehicle: v.het; v0m computed on the fly in step: v0eff base = P.v0ms * (v.truck?0.78:1) * v.het. So slider changes apply live. n/trucks change → spawnVehicles. time → P.time.

v0 slider in km/h → P.v0ms = kmh/3.6.

Respawn resets: blockers, crossings, bins? Keep diagrams but maybe clear to avoid discontinuity — clear diagrams on respawn (fill black). OK.

Stats DOM ids: stSpeed, stFlow, stRho, stJams, stWave. Also "sim time" maybe.

Buttons styling reuse neon class.

Charts toggle: panel display none/flex.

Trails toggle: afterimage.enabled; also button 'on' class.

Sound toggle: state.sound; if AC exists ramp master.

Reset button: spawnVehicles(P.n), clear diagrams etc., bannerShown=false, autoBrakeAt=simT+4.

Toast function: sets text, class show, timeout hide.

Banner function similar center.

Keyboard: Space toggle pause; KeyP preset; KeyX zone; KeyT trails; KeyG charts; KeyM sound; KeyR reset; Digit1/2/3 tools; KeyB random brake.

Buttons: btnPause, btnPreset, btnZone, btnTrails, btnCharts, btnSound, btnReset + tool buttons toolBrake/toolBlock/toolSlow.

Panel lab sliders: rngN, rngV0, rngTrk, rngTme with value spans.

Now the audio:

Init on first pointerdown/keydown: window.addEventListener('pointerdown', boot, {once:false}) where boot(){initAudio(); AC.resume();} — call every pointerdown, initAudio guards. Also AC created suspended → resume().

Sound toggle: master.gain ramp.

meanVms computed each frame: sum v / n.

Jam detection for whoosh: jamEma crossing 0.5 upward.

Banner once: "PHANTOM JAM FORMED" small sub "no crash · no bottleneck — pure physics".

Now index.html card + write files.

Also cross-check AfterimagePass constructor param is damp value; default 0.96. We set uniform damp: afterimage.uniforms['damp'].value = 0.9? Constructor takes damp. When toggling off: afterimage.enabled=false. On re-enable, stale buffer might ghost — set damp 0 briefly? Fine.

One risk: AfterimagePass with OutputPass order — composer: renderPass, afterimage, bloom, output.

Bloom threshold: 0.22, strength 0.85, radius 0.55.

Potential perf: bloom at full res on 4k — pixelRatio clamp 1.75.

Let me also add subtle camera drift auto-rotate: controls.autoRotate=true, autoRotateSpeed=0.4; stop on 'start' event (user interaction) permanently until button? Add button btnCam? Keep: autoRotate until user drags; no button (hints mention). Actually add small toggle in controls row: btnSpin "Spin" class on. Clicking re-enables.

Zone arc spans θ from ZONE.a to ZONE.b (radians). inBottleneck(s): θ=s/R mod 2π; ZONE.a<θ<ZONE.b. Length = (b-a)*R ≈ (0.30π)*120 ≈ 113m. Cones count ~ 113/7 ≈ 16.

Zone ring geometry thetaStart: RingGeometry(inner, outer, thetaSeg, phiSeg, thetaStart, thetaLength) — in XY plane before rotateX: theta measured from +X axis CCW in XY. Our angle mapping: pos = (Rcosθ, 0, Rsinθ) after rotateX(-90): original (x,y) → (x, 0, y)? rotateX(-90) maps y→ -z? Let's verify: rotation about X by -90°: (x,y,z) → (x, y cos(-90) - z sin(-90), y sin(-90) + z cos(-90)) = (x, z, -y). So original ring point (cosθ, sinθ, 0) → (cosθ, 0, -sinθ). But we want (cosθ, 0, sinθ). Mismatch in z sign! So after rotateX(-π/2), point at geometry-angle θ ends up at world (cosθ, 0, -sinθ) = our angle -θ.

Options: use rotateX(+π/2): (x,y,z)→(x, y cos90 + z? ... formula: rotX(α): y' = y cosα - z sinα; z' = y sinα + z cosα. α=+90°: y'=-z=0, z'=y. → (cosθ, 0, sinθ). Correct! So use rotateX(+Math.PI/2) for all ring geometries & plane? For PlaneGeometry rotateX(-π/2) is standard to face up; +π/2 faces down. For glow planes facing up, we need normal +Y: PlaneGeometry normal +Z; rotX(-90°): normal (0,1,0)? rotX(-90): z'= y sin(-90)+z cos(-90) = -y; normal (0,0,1) → (0, -(-1)?, ...) compute: v=(0,0,1): y' = 0cos(-90) - 1sin(-90) = 1; z' = 0sin(-90)+1cos(-90)=0 → (0,1,0). Good, -π/2 for planes faces up. And the plane local coords: original (x,y,0) → (x, 0? y'= -z? recompute: y' = y cos(-90) − z sin(-90) = z? Wait sin(-90)=-1, cos(-90)=0. y' = y0 − z(−1) = z = 0. z' = y*(−1) + z*0 = −y. So (x, y, 0) → (x, 0, −y). Plane local X → world X; local Y → world −Z. With yaw φ=−θ mapping +Z→f, local −Z→−f, so local +Y → −f. Texture v axis flipped — for symmetric radial gradient fine.

For the ring geometries (road, heat, zone hatch): use rotateX(+π/2) — but then face normal becomes −Y (facing down)! RingGeometry normal +Z originally; rotX(+90): (0,0,1)→ y' = −z sin? recompute α=90: y' = y cos90 − z sin90 = −z = −1 → (0,−1,0) faces down. We need it facing up for lighting/visibility with default side. Fix: set material side: DoubleSide (road basic material fine; shader material add side: THREE.DoubleSide). Simpler: rotateX(-π/2) and accept angle negation: world angle = −θ_geometry. Then UV u computed from atan2(y,x) = θg; world position angle θw = −θg. Our car angle mapping uses θw. For the road texture dashes symmetric — negation irrelevant. For heat annulus UV→world mapping: shader computes u from vUv.x = θg fraction; but world angle θw = −θg → heat data indexed by θw appears mirrored. To keep consistent, in shader sample u = 1.0 - vUv.x (flip). Easy. For zone hatch with explicit thetaStart/Length: geometry angles a..b land at world −a..−b. To place zone at world [ZONE.a, ZONE.b], geometry thetaStart = −ZONE.b, length = ZONE.b−ZONE.a. With DoubleSide and stripe texture fine. Cone positions computed in world coords directly — no issue.

Alternatively skip rotateX entirely: build ring in XZ plane manually? Just go with rotateX(-π/2) + DoubleSide + flip u in heat shader.

Detector bar at θ=0: pos (R, 0.08, 0) box (10.5, 0.12, 0.9) — at angle 0, radial dir = +X → box X length 10.5 spans lane. Emissive cyan basic material with color >1? MeshBasicMaterial color (0.2, 1.4, 1.8) — bloom catches. Pulse via material.color multiplyScalar? Animate: base intensity 1 + 0.35 sin(3t). Set color.setRGB each frame — fine.

Flash rings: geometry RingGeometry(0.85, 1.0, 40) rotateX(-π/2), MeshBasicMaterial additive transparent, per-mesh material clone for opacity. Pool 12.

City glow sprites: use Sprite with radial texture, color warm (1.2, 0.7, 0.3), scale 60-160, positions ring radius 500-1400, y 4, opacity 0.05-0.12, 70 sprites. Additive. Creates distant glow horizon when camera tilts. Cheap.

Stars: 700 points on upper hemisphere radius 1500, size 1.5, sizeAttenuation false? PointsMaterial({color:0x8899bb, size:1.6, sizeAttenuation:false, transparent, opacity:0.7, depthWrite:false}).

Fog might dim them — set fog:false on materials where needed (PointsMaterial fog default true; at 1500 within fog far 1600 → heavily fogged. Set fog false for stars & city sprites).

Zone blinkers: 6 Sprite amber at zone ends on both edges + 2 mid; pulse scale 3+1.5 sin(6t+phase). Materials shared per phase parity (two SpriteMaterials). fog false, additive.

OK — UI polish: panel-charts bottom-right; on small screens hidden. chart titles styled.

Also note: renderer.outputColorSpace default in r160 is SRGB — with OutputPass fine.

Dat texture: new THREE.DataTexture(data, BINS, 1, THREE.RGBAFormat, THREE.UnsignedByteType); minFilter/magFilter Linear; wrapS Repeat; needsUpdate.

One more check — heat shader vUv.x range: RingGeometry planar UVs default are based on position mapped to [0,1] via (pos/(2*outer))+0.5 — NOT what we want. We overwrite uv attribute manually: for each vertex: u = (atan2(y, x) / (2π) + 1) % 1; v = (len−inner)/(outer−inner). Write helper fixRingUV(geo, inner, outer).

Zone hatch geometry: RingGeometry(R−5, R+5, 64, 1, gStart, gLen) where gStart = −ZONE.b, gLen = ZONE.b−ZONE.a. After rotateX(−π/2) → world angles ZONE.a..ZONE.b. UVs: leave default planar; stripe texture repeat will look radial-skewed... To keep it simple, don't use stripe texture; use plain additive orange alpha 0.14 + emissive edge? Hatch look not critical: solid translucent orange band + cones + blinkers reads "roadworks". OK: MeshBasicMaterial({color:0xff7718, transparent:true, opacity:0.13, blending:Additive, side:DoubleSide, depthWrite:false}).

Alright, also small "SPEED LIMIT" sign? skip.

Truck fraction enforcement with n small: trucks = round(n*trk/100).

het factor per vehicle: 0.92 + rand*0.16.

Initial speeds: v = min(v0m, 26) * (0.85+rand0.25) but for gridlock n=110: gaps ≈ L/110 ≈ 6.85m ≈ len+s0 barely → initial v 26 m/s would demand immediate braking — IDM clamps fine (no collision, hard brake, accordion). OK but visually chaotic start; acceptable, or scale initial v by congestion: vInit = min(v0m0.9, max(2, (gapAvg − len − s0)0.8))? gapAvg = L/n. vInit = clamp(0.8(L/n − len − 2)1? ... Let me do: vFree = v0m0.92; vCong = max(1.5, (L/n − v.len − v.s0) * 2.2); v = min(vFree, vCong) * jitter(0.9..1.1). At n=66: L/n = 11.4, len 5, s0 2 → (4.4)2.2 ≈ 9.7 m/s — that's below free speed → start slow-ish and accelerate; waves may form naturally. Hmm equilibrium at 87 veh/km for IDM is ~ jammed-ish? Equilibrium spacing s = 11.4−5=6.4m → s must equal 6.4: s0 + vT = 6.4 → v = 3.7 m/s?? and (v/v0)^4 term small. That suggests equilibrium speed ≈ 3.7 m/s at n=66?! That can't be right — critical density where flow breaks for IDM typical ~ 30-40 veh/km. At 87 veh/km traffic is deeply congested (equilibrium ~ walking pace) BUT stop-and-go means average higher? Actually homogeneous equilibrium at 87/km: s=6.4m → v_e solves (s0+vT)=6.4 → v=3.7 m/s → q = 873.73.6 ≈ 1150 veh/h. Hmm that's congested branch. But the phantom-jam magic: traffic at this density NEVER settles to homogeneous — it forms stop-and-go waves where between jams cars move at near free speed, and average speed ≈ 15-25 km/h... which corresponds to effective flow 1300-2000? No — conservation: q same across waves ≈ outflow from jam ≈ capacity ~1800 veh/h with density 87 → v̄ = q/ρ ≈ 1800/87 ≈ 20.7 km/h ≈ 5.7 m/s. OK consistent-ish.

For the classic demo feel (waves clearly visible with fast traffic between), typical sweet spot ρ ≈ 35-60 veh/km → n = 26-45 for our 754m ring?? That's lower than my preset 66. Let me reconsider: with L=754m, n=40 → ρ=53/km. Spacing avg 18.9m, gap 13.9m → equilibrium v: s*=13.9 → v=(13.9−2)/1.2≈9.9 m/s (36 km/h) congested-ish but unstable → nice stop-and-go with fast segments. n=30 → ρ=40: gap 20.1 → v_e≈15 m/s — mild instability, occasional waves. n=45 (ρ=60): gap 11.8 → v_e 8.2 m/s strong waves. n=55 (ρ=73): heavy stop-go. n=80+ approaching crawl.

Actually the classic "phantom jam" ring experiment (Sugiyama 2008) used ~22 vehicles on 230m ring (ρ≈96/km!) at v0 30 km/h → waves at ~20 km/h backward. Higher v0 shifts critical density lower. With v0=33 m/s, T=1.2: critical density much lower (~25-35/km).

Presets re-tune:

• FREE FLOW: n=26 (ρ=34 — hmm might already be unstable; use n=20, ρ=26.5 stable-ish) v0 120.
• PHANTOM JAM: n=38 (ρ=50) v0 120 — clear waves, fast between.
• STOP & GO: n=55 (ρ=73).
• GRIDLOCK: n=90 (ρ=119) v0 70. Default: PHANTOM JAM n=38. Slider n range: 14..110.

Trucks raise instability (lower amax) — good.

This tuning matters for the demo "wow" — waves must be visible within seconds. Also auto-brake pulse triggers wave formation decisively.

Wave speed bins: typical w = −5 m/s → bins/tick = 5/2.946/0.25? w_bins = w_ms * TICK / BIN_M = 50.25/2.946 ≈ 0.42 bins/tick. Cross-correlation with integer k: peak at k=0 mostly (0.42 rounds to 0) → parabolic interpolation essential. With 0.42 bin shift per tick, correlation c(0) high, c(−1) partial. Parabola offset ≈ fractional shift. Should work roughly; clamp & smooth. Alternatively accumulate over 4 ticks (1s): shift 1.7 bins → better resolution. Do correlation between binV and binOld4 (stored 4 ticks ago). w = −kBIN_M/(4*TICK). Keep ring buffer of last 4 bin snapshots.

Jam threshold: binV < 3 m/s counts jam bins; run length ≥2 bins → 1 jam.

Mean speed display.

I think physics is sorted. One more nuance: IDM in free flow with v0 spread het — fine.

Edge: n changes → spawn fresh.

Time scale up to 6 with H=0.1 → 60 steps/frame max 80 cap ok.

Now write the files. I'll write index.html in ~3 chunks with heredoc via write tool (write mode full content may be big ~45KB; the tool should handle it, but I'll split into two writes: first half then append? The write tool replaces whole file; appending via shell cat >> with heredoc is risky with special chars ($ etc.) — use quoted heredoc 'EOF' to avoid interpolation. Actually simplest: use read_write_file_in_shell_environment write mode twice? It replaces whole file each time — no append mode. I can write full content in one call; ~45-55KB might be OK. To be safe, split into 2 files? No — single index.html required. Use shell heredoc with quoted delimiter for appends:

part1: cat > file <<'HTMLEOF' ... HTMLEOF part2: cat >> file <<'HTMLEOF' ... HTMLEOF

Heredoc content includes backticks? In JS template literals — avoid backticks in code to be safe with... quoted heredoc 'EOF' doesn't interpret backticks or $. Safe either way. But my execute_shell_command passes the command as JSON string — must escape properly. The write tool is cleaner. Let me just do 2 write calls: write full part1, then append via shell heredoc quoted. Or simpler: build file via two write calls where second uses mode write to a temp then cat? Overcomplicating: single write call with full content. I've seen ~50KB writes work. Go with one write; if it errors, split.

Let me now compose the entire file mentally one more time, being careful with all syntax. I'll write it now.

Also remember meta description & title, hint bar text.

CSS classes: reuse from domino demo + add sliders, tools, charts, toast.

Let me write final code. I'll be extra careful about:

• import map same as domino demo.
• No TS.
• All DOM ids match.
• Function order & hoisting (function declarations hoist, const not).

Full JS outline:

Careful: spawnVehicles uses P.v0ms — compute P.v0ms from v0kmh when slider changes: define setV0(kmh){P.v0kmh=kmh; P.v0ms=kmh/3.6}.

Fundamental eq curve uses P.v0ms car params; recompute cache when changed (compare cachedV0).

Let me write the code.

Also: cross-correlation buffer: histBuf = [Float32Array(BINS) ×4]; histIdx. Each tick: push copy of binV into histBuf[histIdx++ %4]; when histIdx>=4: compare current with histBuf[(histIdx)%4] (the one 4 ticks ago = next to overwrite). Compute before overwrite.

For toasts: #toast div.

Stats update: every 0.25s real time.

Also add subtle speed-based camera FOV? skip.

Banner: preset name on preset change; jam banner once.

Write it. Also confirm UnrealBloomPass import path & OutputPass exist in r160 — yes.

Raycast pointer: use THREE.Plane(new Vector3(0,1,0), 0); raycaster.setFromCamera(ndc, camera); raycaster.ray.intersectPlane(plane, out).

Distinguish click vs orbit drag: pointerdown store x,y; pointerup: if dist<7 → handleClick. Also ignore clicks starting on UI panels (they're DOM, canvas won't receive? panels have z-index and pointer events — pointerdown on panel doesn't reach canvas listener if attached to renderer.domElement). Attach pointer handlers to renderer.domElement.

Touch: pointer events cover.

Now the index.html demo card:

Description: "A ring-road of autonomous drivers running the Intelligent Driver Model — tap the road to brake one car and watch a phantom jam bloom into backward-travelling stop-and-go waves. Live space-time diagram, fundamental diagram, wave-speed radar, lane-drop roadworks, slowpoke and roadblock tools, long-exposure night light-trails, generative engine-hum soundtrack and full keyboard control."

Keep it shorter-ish like others.

Let me write the demo file now. Estimate ~1000 lines. Go.

One more detail: const v0Slider display km/h.

Order vehicles insertion sort:

IDM with blockers & zone & brake & slow:

Also cap gap minimum 0.05 to avoid div0; IDM term (s*/gap)^2 explodes → acc clamped −9.5.

Move & wrap & detector.

tickDiagrams():

Allocation per tick (Float32Arrays) every 0.25s — fine.

waveHist handling as described.

Jam EMA & crossing detection for whoosh/banner:

Flow: crossings filter in tick: crossings = crossings.filter(t=> simT-t < 20); flowVehH = crossings.length/20*3600 smoothed.

Fundamental point add every tick too.

Alright — writing the file NOW. For the charts drawing code, be careful with canvas API correctness.

fd diagram margins: plot area x: 28..214 (W=220), y: 6..148, axis labels bottom (density) & left (flow). Grid at ρ=50,100; q=1000,2000.

Eq curve: bisection:

Draw for ρ 2..150 step 2. Cache array keyed by Math.round(P.v0kmh).

Live point: rhoLive = n/(L/1000); qLive = flowVehH.

drawFD():

Trail store {rho,q,age} age+=dt drawn each redraw (redraw at 4Hz) filter age<8s.

OK writing now. Also remember renderer.domElement appended; canvas touch-action none CSS.

Resize: camera aspect, renderer.setSize, composer.setSize, bloom resolution auto.

Finally boot sequence: spawnVehicles(); applyPreset(1) as initial (sets n=38 etc.) then banner "PHANTOM JAM LAB" intro? Set toast: "auto brake in 4s — watch the wave".

Let me finalize preset list:

autoBrake scheduling: state.autoBrakeAt = simT + 3.5 when preset.auto; else Infinity. On load preset idx1 → auto at 3.5s.

applyPreset(i): set P & slider DOM values, spawn, clear diagrams, toast preset name + hint.

Now — writing the actual file content. I'll keep code tidy & commented. Time to output.

Also double-check AfterimagePass constructor: new AfterimagePass(damp). uniforms accessible via .uniforms['damp']. In r160 AfterimagePass has this.uniforms['damp']. OK.

Trail toggle default ON (damp 0.90).

Bloom: strength .85, radius .55, threshold .22.

Tone mapping ACES exposure 1.05.

One subtlety: Additive glows + ACES → colors shift nicely. instanceColor values >1 fine.

instanceColor needs mesh.instanceColor.needsUpdate = true after setColorAt. For bodies set once at spawn; but InstancedMesh.instanceColor created lazily on first setColorAt — call setColorAt for all MAXV initially to allocate.

Bodies count changes on spawn: bodyInst.count = n.

Also frustumCulled = false on instanced meshes (instances move; bounding sphere default may cull incorrectly). Set for bodyInst & glowInst.

Shadow: skip shadows (night, top-down) — glows carry it.

Let me also compute car base color tint variation: cars slight hue variation for visual richness: bodyColor = hsl jitter around #171b26; trucks #2a2118.

Now writing.

Actually one more consideration on the space-time canvas CSS size: width min(46vw, 560px); height auto (aspect via attribute ratio 512:168). Canvas internal 512×168.

Panel positions:

• #panel-title top-left
• #panel-lab left below title (top:84px) width 236
• #panel-ctrl top-right
• #panel-stats left bottom:14
• #panel-charts right bottom:14
• #panel-bottom bottom center → may collide with charts on narrow; hide <1100px? It's hints; media hide <900px.
• #banner center
• #toast above bottom bar center.

Lab panel content:

Slider CSS: accent-color #46e6ff; width 100%.

Row layout: label span + b value; input below.

OK go. Writing file content carefully now.

(While writing, keep strings ASCII-safe; use — em dash fine as in previous demos. Avoid backticks in JS? Template literals are fine in JS — heredoc quoted 'PJEOF' safe. But I'm using the write tool, not heredoc, so no shell issues at all.)

Let me count the essential DOM ids:

• app, vignette
• panel-title (h1, sub)
• panel-lab: toolBrake, toolBlock, toolSlow, rngN/valN, rngV0/valV0, rngTrk/valTrk, rngTme/valTme
• panel-ctrl: btnPause, btnPreset, btnZone, btnTrails, btnCharts, btnSpin, btnSound, btnReset
• panel-stats: stSpeed, stFlow, stRho, stJams, stWave, stTime
• panel-charts: stc, fdc
• panel-bottom (hints)
• banner, toast

Write it.

Now write the big file. I'll do it in two parts using the write tool: first write creates the file with HTML head + CSS + body + start of script; but the write tool replaces the whole file each time — no append. So I'll use shell heredoc with quoted delimiter for the second part (append). Special chars in JS: backticks and $ are safe inside quoted heredoc. But passing via execute_shell_command JSON — the command string just needs proper JSON escaping which the tool handles.

Plan:

1. write tool → part 1 (head, css, body html, importmap, script start through scene setup).
2. shell append heredoc → part 2 (rest of JS + closing tags).

Actually simpler: write tool once with everything. Size ~50KB — the tool likely supports it. Risk: truncation. I'll try one write; then verify with tail/wc and node syntax check. If truncated, fall back to split.

Let me compose the full file now, carefully.

The file was written fully (1138 lines). Now let me validate the JavaScript syntax. I can extract the module script and check with node (as a module). The script has imports from 'three' which won't resolve in node, but I can do a syntax check by using node --check — but --check doesn't support ES modules directly unless file has .mjs extension. Let me extract the script content into a .mjs file and run node --check. Imports won't be resolved but --check only parses, doesn't resolve.

Let me extract lines between <script type="module"> and </script>.

Syntax OK. Now let me do a runtime sanity check of the core simulation logic in Node by stubbing the DOM/three parts. That's harder. Instead, let me extract just the simulation part (constants, spawn, IDM step) and run a headless test to verify waves form and no NaN/collisions occur.

Let me write a small standalone node test that replicates the sim logic (copy the functions) and runs it. Actually, better: verify a few logical concerns in the actual code:

1. In tickSample, I reference heatTex — defined before tickSample is called (function hoisting is fine since heatTex is a const declared later but tickSample only runs in animate after everything's initialized). Order: tickSample is defined before heatTex const declaration, but it's only invoked at runtime after module evaluation completes (animate called at the end). Wait — heatTex is declared with const in the heat-ring section which comes AFTER the sampling section in the file. Since tickSample is only called inside animate() (which runs after the whole module evaluates), the const will be initialized by then. Fine.

2. drawST and drawFD are function declarations — hoisted. Fine.

3. In spawnVehicles I call paintBodies() — declared later as function declaration → hoisted. But paintBodies uses bodyInst which is declared later via const... spawnVehicles is called at applyPreset(1) near the end — after bodyInst exists. Fine.

4. spawnVehicles calls clearDiagrams() — function declaration hoisted; it references binHist, heatData, heatTex — heatTex is const defined mid-file; spawn first called at applyPreset(1) at the very end. Fine.

5. applyPreset uses $('rngN') etc. — DOM exists since script runs after body parse (module scripts are deferred). Fine.

6. applyPreset(1) → sets state.autoBrakeAt = state.simT + 3.5 = 3.5. Then banner overridden by subsequent banner('PHANTOM JAM'...) call. OK.

7. setCharts(false) on mobile hides charts panel — $('panel-charts').style.display = 'none'. On desktop, charts visible (CSS default flex via #panel-charts { display:flex }). setCharts(true) at boot not called on desktop — fine.

8. One issue: in clearDiagrams, heatData.fill(0) then heatData.forEach((_, i) => { if (i % 4 === 3) heatData[i] = 255; }) — fine.

9. updateStats uses meanVms etc. — fine.

10. In animate: detMat.color.setRGB(0.15, 1.3, 1.7).multiplyScalar(...) — setRGB returns this color; multiplyScalar OK.

11. Potential issue: glowInst.setColorAt called in updateInstances for gi up to n4; and initially I set all MAXV4 colors to black — for (let i = 0; i < MAXV * 4; i++) glowInst.setColorAt(i, ...) — this creates instanceColor buffer. Good.

12. bodyInst.setColorAt in paintBodies for all MAXV. Good — instanceColor allocated.

13. In updateInstances, glowInst.count = n * 4 — MAXV*4 allocated, n ≤ 110 < 130. Good.

14. RingGeometry with thetaStart negative: new THREE.RingGeometry(R - LANE_W/2, R + LANE_W/2, 48, 1, -ZONE_B, ZONE_B - ZONE_A) — thetaStart = -1.696π... RingGeometry accepts any thetaStart (radians). It generates angles thetaStart + segment * thetaLength. Fine. Then rotateX(-π/2) maps geometry angle θ → world angle -θ: world angles from ZONE_A to ZONE_B as intended. Good.

Wait — actually check: geometry point angle θg → (cos θg, sin θg, 0) → rotateX(-90°): (x, y, z) → (x, z, -y)? Let me recompute rotX(α) with α=-90°:

• y' = y cosα - z sinα = y·0 - z·(-1) = z = 0
• z' = y sinα + z cosα = y·(-1) + 0 = -y So (cosθg, sinθg, 0) → (cosθg, 0, -sinθg). World angle (atan2(z, x) convention I use: pos = (Rcosθ, 0, Rsinθ)) → the point lands at angle θw with cosθw = cosθg, sinθw = -sinθg → θw = -θg. ✓.

Zone arc: θg ∈ [-ZONE_B, -ZONE_A] → θw ∈ [ZONE_A, ZONE_B]. ✓ matches inZone check.

Cones & blinkers placed directly in world coords with θ in [ZONE_A, ZONE_B]. ✓.

15. Heat shader: u = 1.0 - vUv.x. vUv.x = θg fraction. World θw = -θg → θw fraction = 1 - θg fraction (for θg>0). Heat bins indexed by s/L = θw/(2π). So sampling texture at u = 1 - vUv.x gives bin matching world angle. ✓.

16. Detector bar at angle 0: position (R, 0.08, 0). ✓. Crossings counted when vehicle wraps s→0 which is at world (R, 0, 0). ✓ consistent.

17. Issue: heatData is used to create heatTex before clearDiagrams might set alpha. Initially heatData all zeros → alpha 0 → texture samples rgb 0 — black, fine. In clearDiagrams I set alpha=255 for all. In tickSample all set to 255. OK.

18. ShaderMaterial + DataTexture with RGBAFormat — sampling .rgb fine.

19. UnrealBloomPass with threshold 0.22 — the emissive cones (emissiveIntensity 0.9, color ~1) will bloom slightly. Body standard material dark — no. Fine.

20. AfterimagePass: new AfterimagePass(0.9) — constructor accepts damp param. ✓.

21. controls.addEventListener('start', ...) — OrbitControls dispatches 'start'. ✓.

22. renderer.domElement.addEventListener('pointerup'...) uses innerWidth/innerHeight — fine.

23. heatMat.uniforms.uZone.value.z = on ? 1 : 0 — Vector3. ✓.

24. In applyPreset → spawnVehicles() → clearDiagrams() → references heatTex — heatTex defined. ✓. Also fdPoints.length = 0 — fdPoints defined via const before? clearDiagrams defined after fdPoints const declaration (fdPoints defined in fundamental diagram section, which comes after space-time section and before audio/UI; clearDiagrams is defined right after drawFD — yes fdPoints defined earlier in file than clearDiagrams definition. But even if not, hoisting of const in TDZ only matters at call time; called at applyPreset(1) at end. ✓.

25. banner('PHANTOM JAM', ...) at boot: bannerTimer etc fine.

26. matchMedia('(max-width: 820px)').matches fine.

27. One concern: spawnVehicles is called during applyPreset(1) at boot — inside it, truck = trucks > 0 && (i % Math.round(n / trucks) === 0). For n=38, trucks=4 (10% of 38=3.8→4): Math.round(38/4)=10 → i%10===0 → i=0,10,20,30 → 4 trucks. ✓. For trucks=0: guarded. For n=20, trucks=2: Math.round(10)=10 → i=0,10 → 2 ✓. For n=92, trucks=18 (18.4→18): Math.round(92/18)=5 → i=0,5,...,90 → 19 trucks — close enough.

Hmm wait, edge: n=92, trk=20 → trucks=18. Math.round(92/18)=Math.round(5.11)=5 → floor indices 0..90 step 5 → 19 positions (0,5,...,90 = 19 values). Slightly more than 18 — fine.

Edge case in slider: n=14, trk=40 → trucks=6 (5.6→6). Math.round(14/6)=2 → i=0,2,4,6,8,10,12 → 7 trucks. OK.

28. vCong = Math.max(1.2, (L/n - len - s0) * 2.0) — at n=110: L/n=6.85, len 5, s0 2 → (6.85-7)*2 = -0.3 → max(1.2, -0.3)=1.2 m/s initial. Gridlock starts crawling — correct feel.

29. In IDM: gap when n large and vehicles overlap initially? Spacing 6.85m, truck len 12 → gap could be negative initially for car behind truck! gap = lead.s - 6 - (veh.s + 2.5). If lead is truck and spacing ~6.85: gap = 6.85 - 8.5 <0 → gap+=L → huge gap → car accelerates into truck!! ⚠️ BUG: wrap correction if (gap < 0) gap += L only valid when gap ≥ -(L - ...) i.e., when the leader is actually behind due to wrap. With overlapping spawn (negative physical gap), adding L makes the following vehicle think the leader is a full lap ahead → collision (visually overlapping vehicles).

Fix: ensure spawn spacing accounts for lengths. Better spawn: distribute vehicles with spacing proportional to their lengths: total length Σ len; spacing_i = (L - Σlen) * (1/n) + len... Proper approach: place sequentially: cursor = 0; for each vehicle: cursor += len/2; s = cursor; cursor += len/2 + equalGap where equalGap = (L - Σlen)/n. Since Σlen ≤ 11012... worst case n=110, trk=40% → 44 trucks12 + 66*5 = 528+330=858 > L=754! Overlap guaranteed. 😬

Handle: if Σlen + n1.0 > L, the ring is over capacity — must still place them with minimal gaps (0.5m). Compute equalGap = max(0.5, (L - Σlen)/n); total = Σlen + nequalGap may exceed L → scale: if total > L, we can't fit — but 0.5m gaps * 110 = 55 + 858 = 913 > 754. Over capacity → vehicles must overlap.

Options: cap trucks fraction physically: when placing, if Σ len too big, reduce trucks automatically. Simplest robust fix: sequential placement with gap computed as (L - Σlen)/n but if that's negative, fall back to stacking with 0.3m gaps and accept wraparound overlap at the seam... still broken.

Alternative: place evenly by index (s = i/n*L as before) but make leader gap computation robust to negative gaps: use raw gap without wrap when |gap| small: Actually the correct circular gap: gapRaw = leadRear - vehFront; gapCirc = ((gapRaw % L) + L) % L. For a properly spaced ring, gapCirc ∈ [0, L/n-ish]. The problem only arises from overlapping spawns. With sequential length-aware placement, gaps are uniform ≥ 0.5m, no overlap, and gapCirc works: gapRaw = small positive; no negative wrap needed except for last→first where gapRaw = gap0 + L? Let me define: vehicles sorted by s ascending; for i<n-1: gap = (veh[i+1].s - len_{i+1}/2) - (veh[i].s + len_i/2) — positive. For i = n-1: gap = (veh[0].s - len_0/2 + L) - (veh[n-1].s + len/2) — positive if no overlap. The existing code handles this via if (gap<0) gap+=L which for sorted vehicles works when there is no physical overlap (gapRaw ≥ -(len stuff)... for last vehicle gapRaw is very negative (≈ -750) so +L gives correct small positive). For middle vehicles gapRaw positive small. Overlap only from spawn — fix spawn.

So: sequential spawn placement:

Check worst slider combo: n=110, trk=40 → trucks=44, lens total = 4412+665 = 858. L=754. gap=(754-858)/110 <0 → gap=0.6 → total = 858+66=924 > 754. Still over.

Prevent: limit trucks when n high: trucksMax = floor((L - 5n1.6)/... hmm. Simpler: compute trucks count adaptively: trucks = min(desired, floor((L - n5 - n*0.6) / (12-5+... ))) — messy.

Cleaner: reduce truck length impact by making trucks len 10 and clamp total: if Σlen > 0.85L → convert excess trucks to cars. Implement:

That guarantees Σlen ≤ 603 → gap = (754-603)/110 = 1.37m min.

At n=110 (all cars): Σ=550, gap=(754-550)/110=1.85 → jam density ~ 1/(5+1.85) ≈ 146 veh/km. Good.

Also with sequential placement, add jitter to gaps: gap_i = gap * (0.7 + rand0.6) normalized to sum: simpler — place sequentially with jittered gaps then renormalize: compute raw weights w_i = 0.7+rand0.6; scale = (L - Σlen)/Σw; gap_i = w_iscale. If (L-Σlen) negative → gaps 0.6 min... after demotion L-Σlen ≥ 150 → fine, gaps ≥ ~1.4jitter.

Let me rewrite spawnVehicles accordingly.

Also initial speed: vCong = max(1.2, gapAvg*2.0) where gapAvg = (L-Σlen)/n.

Also the if (gap<0) gap+=L in idmStep: with sequential spawn, for middle vehicles gapRaw could momentarily go slightly negative during heavy braking? IDM is collision-free in continuous time for reasonable params; with dt=0.1 explicit Euler, tiny overlaps can occur transiently in extreme braking (acc clamped -9.5). If gapRaw goes negative small (overlap < 1m), the +L wrap would make the follower suddenly see leader a lap away → accelerate → bad. Robust fix: only wrap when gapRaw < -L/2:

This treats small negative gaps as overlap (gap→0.05 → massive braking) and only adds L for the true wraparound case (last→first: gapRaw ≈ -(L - small) < -L/2 ✓).

Similarly blocker distance d: d = bl.s - vehFront; wrap: if (d < -L/2) d += L; if d > L/2?? blocker could be "behind" by small d negative meaning vehicle already passed it — then it shouldn't lead. Condition: consider blocker ahead only if d > -2 (passed tolerance): with d slightly negative, treat as gap 0.05 (on top of blocker). Current code: if (d<0) d+=L — same bug class: blocker just passed (d=-1) → d becomes 753 → ignored ✓ actually that's fine (blocker behind → far ahead next lap → effectively ignored since next-vehicle gap much smaller). But blocker at d = -0.5 (vehicle nose 0.5m past blocker) → treated as 753.5 ahead → fine, vehicle continues past blocker. Hmm but physically vehicle should stop BEFORE blocker; passing through is the failure mode. With d measured to vehicle front bumper and blocker gap = d - 0.6: IDM brakes hard as d→0.6; blocker expiry 6s; fine. The wrap handling for blockers is actually correct as-is: d<0 → +L means "blocker is behind me → it's almost a full lap ahead" which correctly deprioritizes it vs the actual leader. ✓ (no change needed, but keep consistent: use same -L/2 rule for robustness? d ∈ (-len/2-ish, ...) negative small when passing over blocker; +L fine. Keep.)

For gap wrap, though, the gap<0 → +L bug is real for mid-ring small negative gaps. Fix with -L/2 rule.

30. Also in idmStep, for sorted vehicles, lead = vehicles[(i+1)%n] — correct leader only if sorted ascending by s and single lane. After movement order can invert slightly? Vehicles can't pass (IDM collision-free) so order preserved. ✓.

31. tickSample bins: Math.floor(v.s / L * BINS) % BINS — v.s ∈ [0,L) ✓.

32. Fundamental diagram X axis to 150 veh/km; density at n=110: 110/0.754=146 ✓ fits.

33. drawFD early-return if !state.charts — but fdPoints.age accumulates only when drawn; ages used for fade; if charts hidden then re-enabled, ages stale — fine since drawFD called on re-enable and each tick.

Wait: p.age += TICK inside drawFD loop — mutating age while drawing; called once per tick. ✓. But points with age>9 skipped drawing but never removed until shift at 220. Fine.

34. updateStats DOM update every 0.25s real time. ✓.

35. One more: drawST uses stc as its own source: stx.drawImage(stc, 0, -1) — canvas self-draw is allowed. ✓.

36. Boot: applyPreset(1) then banner('PHANTOM JAM', ...) — applyPreset shows its own banner then immediately overridden. Slight waste; fine — actually applyPreset banner shows "PHANTOM JAM / auto brake pulse in 3.5s" then boot banner replaces instantly. The user sees only boot banner. OK but then the "auto brake pulse" info lost — toast at trigger covers it. Fine.

37. spawnVehicles clears diagrams — on slider N drag (oninput fires repeatedly), diagrams clear constantly — acceptable ("traffic rebuilds").

38. Sound: init on keydown/pointerdown; Sound button click also inits. ✓.

39. setV0 called in applyPreset before sliders set — order fine.

40. AfterimagePass when disabled→enabled: history texture old — one-frame ghost; negligible.

41. iOS: backdrop-filter fine; audio requires gesture — handled.

42. heatMat.uniforms.uTime updated with now/1000 — now param of animate is DOMHighResTimeStamp ✓.

43. In updateInstances — _E.set(0, -th, 0) then _Q.setFromEuler(_E) ✓.

Also glow quads face up (rotated -π/2) with DoubleSide ✓. Beams at y=0.28 below headlight glow at 0.85 — additive stacking fine.

44. bodyInst.count = vehicles.length set both in paintBodies and updateInstances ✓.

45. Camera near plane 0.5, far 4000; fog 600-1900; stars at 1500 with fog:false ✓; city sprites fog:false ✓. PolarGridHelper default material is LineBasicMaterial with vertexColors — setting transparent/opacity works ✓. grid at radius 460 within fog → dimmed by fog nicely (fog applies since material.fog default true) ✓.

46. scene.fog = new THREE.Fog(0x04060d, 600, 1900) — heat ring at 120 unaffected ✓.

47. Potential z-fighting: heat annulus y=0.04 above road y=0 — additive depthWrite false → fine. Zone hatch at y=0 (same as road!) — zoneGroup hatch mesh position not raised → z-fight with road. Raise hatch: the RingGeometry mesh added to zoneGroup directly without y offset. Fix: mesh.position.y = 0.06. Let me patch: assign to variable and set y. Cones sit at y=0.65 ✓. detBar at 0.08 ✓ (above road 0, below? heat at 0.04 — detBar box 0.14 tall centered 0.08 → spans 0.01..0.15 ✓ no fight with heat (additive anyway)).

48. RingGeometry for zone hatch: thetaStart=-ZONE_B (negative ~ -2.83π/… whatever) fine.

49. Toast z-index above panels ✓.

50. In applyPreset: $('rngTme') not set — preset doesn't change time warp ✓ fine.

51. banner innerHTML with template literal containing <small> — inside module script, backticks fine.

52. Subtle: stx.drawImage(rowC, 0, 0, BINS, 1, 0, stc.height - 1, stc.width, 1) — draws scaled row at bottom ✓.

53. On reset/preset, binV zeros → diagrams black → waves redraw ✓. meanVms updated in tickSample ✓ but before first tick updateStats shows stale 0 ✓ fine.

54. P.time slider max 6 → steps per frame: 6 * 16.7ms / 0.1 ≈ 1 → fine; at 0.016s frame * 6 = 0.096 < H → steps 0 some frames ✓ smooth.

Now let me patch the identified issues: A) spawnVehicles: sequential length-aware placement + truck demotion if over capacity. B) gap wrap rule: if (gap < -L/2) gap += L; gap = Math.max(gap, 0.05); C) zone hatch y offset 0.06.

Let me rewrite spawnVehicles and patch the gap logic via replace tool.

Now patch the gap wrap rule in idmStep and the zone hatch y-offset.

Now patch the blocker wrap similarly (d<0 → +L means blocker behind counts as almost full lap ahead; for a blocker slightly behind the front bumper (d=-1), it'd become 753 → likely larger than vehicle gap so ignored — that's fine actually. But blocker exactly at d slightly negative while a queue forms: vehicle stopped with nose just past blocker... blocker expired or being passed. The vehicle gap to leader would dominate. It's OK. But one subtle issue: a blocker slightly AHEAD with d between 0 and gap: gap = max(d-0.6, 0.05)... wait code says d -= 0.6; if (d < gap) { gap = Math.max(d, 0.05); vLead = 0; } — if d-0.6 < 0 → gap=0.05 → emergency braking. OK fine.

But the wrap for blockers: if (d < 0) d += L — blocker 1m behind vehicle → d=753 → since 753 > gap (typically), ignored ✓. Consistent enough. Keep.

Now zone hatch y-offset fix:

The checkpoint says progress_threshold at 50% max time. I should keep working efficiently. The task is "Wake up and do as you please" — my self-directed work is creating the demo. Let me continue: run a headless physics test, verify file, update index.

Let me write the quick Node test of the IDM core by extracting the relevant functions. To save time, I'll write a compact standalone test replicating the sim constants and functions (copy from the file) and run a few scenarios checking for NaN and minimum gaps.

Actually, a cleaner approach that guarantees testing the actual code: extract check.mjs, strip everything from the three.js import onward... The sim section references DOM/three only in functions I won't call. But const LUT etc are pure. tickSample references heatTex — skip it. Plan: take check.mjs, cut from // ---------------- three.js scene ---------------- to end of file, then append test driver that calls spawnVehicles and idmStep in loops with P presets, logging min gap and NaN checks, plus simulating a brake pulse and measuring wave formation.

But spawnVehicles calls paintBodies() and clearDiagrams() which reference three objects. I'll stub: paintBodies=()=>{}, clearDiagrams=()=>{} before... they're function declarations inside the code — I can't easily override. Simpler: regex-replace the calls in the extracted sim segment: remove lines paintBodies(); and clearDiagrams(); from the test copy only. And also state, PRESETS, P are included.

sed: extract check.mjs from start to the line matching // ---------------- three.js scene (exclusive), then remove paintBodies(); and clearDiagrams(); lines, append driver.

The import lines are still in sim.mjs. Strip the import lines from the extracted segment.

Physics is stable, no NaN, no overlaps (minGap > 0 everywhere). Behavior check:

• FREE FLOW: avg 76 km/h (below 120 limit — hmm, expected near free speed ~ 115 km/h. 76 km/h suggests mild congestion? n=20 on 754m ring = 26.5 veh/km. With het variance and T=1.2, platooning reduces average. Also initial vCong limiting start speed, and 120s sim. Let me think: at 26.5 veh/km, equilibrium should be close to v0. Avg 76 seems low — maybe one slow heterogeneous vehicle (het=0.92) acts as a rolling bottleneck and everyone platoons behind it at 0.92v0... no wait, 0.92*33.3=30.6 m/s=110 km/h, still higher than 76.

Hmm — actually IDM free-flow platoon: following at 110 km/h needs spacing s* = s0+vT = 2+30.61.2 = 38.7m; average spacing = L/n = 37.7m < 38.7 → the platoon can't all go 110; effective speed where s = avg gap: gap avg = 37.7-5 = 32.7 → v = (32.7-2)/1.2 = 25.6 m/s = 92 km/h if (v/v0)^4 term negligible. With het spread ±8%, some vehicles slower → platoon compacts behind slowest → ~76 km/h average plausible. OK that's actually realistic traffic behavior (platooning behind slowest). Fine — and users can raise speed limit or lower density.

• PHANTOM JAM: avg 34 km/h with minGap 9.7 — moving waves, no full stops in this 120s run? "stopped=0" means no vehicle under 3 m/s at t=120s exactly — snapshot. Waves exist (avg 34 km/h at density 50/km). Good.

• STOP & GO: 13.4 km/h avg, minGap 3.5, 1 stopped at snapshot. Good.

• GRIDLOCK: fully stopped — realistic at 122 veh/km.

Wave formation verified qualitatively. Let me also verify the wave actually propagates backward by checking the speed field correlation via the tickSample logic... tickSample needs heatTex/drawST/drawFD/whoosh/banner/fdPoints — DOM stuff. Skip; the cross-correlation math was reviewed.

One more check on the UI side: I referenced $('rngTme') etc — all IDs exist. Let me do a static cross-check of all $('...') ids vs defined ids in HTML. Quick grep script.

******************************************************************************************************************************************nt.

Index updated. Final verification:

1. Confirm the demo file is complete and valid HTML (check head/tail).
2. Re-run node --check on the final script to make sure my patches didn't break syntax.
3. Maybe a quick smoke test serving with a headless browser? No browser available presumably. Let me check if there's any chromium/playwright... That might be too heavy. The static checks + physics test are solid.

Let me re-extract and syntax-check the final file.

***********************************************************************************************************************************************ne.

Everything is done:

1. ✅ Created demo 055 "Phantom Jam — Traffic Wave Laboratory" at /space/demos/055-phantom-jam/index.html (48KB, self-contained, Three.js r160 via import map)
2. ✅ JS syntax validated with node --check
3. ✅ Headless physics test: IDM stable across all 4 presets + stress test, no NaN, no overlaps, realistic wave behavior
4. ✅ All DOM ids cross-checked
5. ✅ Index page updated with new card
6. ✅ Temp files cleaned up

The demo features:

• Intelligent Driver Model on a 754m ring road, cars + trucks with heterogeneous parameters
• Emergent phantom jams / stop-and-go waves with backward propagation
• Night aerial aesthetic: headlight/taillight glows, headlight beam splashes, underglow, AfterimagePass long-exposure trails + UnrealBloom
• Speed heat-ring shader under the road with roadworks blinking zone
• Live space-time diagram (scrolling, inferno colormap)
• Live fundamental diagram with IDM equilibrium curve + hysteresis trail
• Wave-speed estimation via cross-correlation, jam counting, detector flow measurement
• Tools: brake pulse, 6s roadblock, slowpoke (moving bottleneck), roadworks zone toggle
• Presets: Free Flow, Phantom Jam, Stop & Go, Gridlock; sliders for vehicles/speed/trucks/time warp
• Generative WebAudio: engine drone + wind tracking mean speed, whoosh on jam formation, UI blips
• Full keyboard shortcuts, touch support, responsive layout, auto-brake onboarding

Task complete. Call _success.