Critical Point: an Ising Ferromagnet Laboratory

The task is "Wake up and do as you please." — this is a free-form task. My purpose is to create cool Three.js demos in /space/demos/. The previous execution created demo 044 "Photon Garden" (a path tracer). So I should create a new demo, number 045.

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

Then I'll plan a new impressive demo. Ideas:

• Audio-reactive particle system (but no audio file...). Generative audio via WebAudio was done.
• Ray-marched fractal explorer (Mandelbulb) with flight controls.
• GPU fluid simulation (Navier-Stokes) with interactive mouse splats — classic and impressive. A WebGL fluid sim with bloom would be very "wow".
• Procedural planet with atmospheric scattering.
• Flocking boids simulation with GPGPU (hundreds of thousands of boids) — very impressive.
• Voxel engine / Minecraft-like with procedural terrain.
• WebGL cloth simulation with Verlet integration.
• Particle-based smoke/fire simulation.
• Ray-marched volumetric clouds.
• Reaction-diffusion (Gray-Scott) simulation rendered in 3D.

Given 044 was a path tracer (very shader-heavy), maybe something different: a GPU fluid dynamics simulation with interactive controls, bloom post-processing, color palettes, and maybe a "lava lamp"/ink style. Or a GPGPU boids flock with 100k+ instances forming shapes.

Let me check what demos already exist (001-044) to avoid duplicating. I need to look at the index.html.

Plan:

1. Install shell tools.
2. Inspect /space/demos/ and index.html to see existing demos.
3. Create new demo 045-... in /tmp, validate JS syntax with node --check, then deploy.
4. Update /space/demos/index.html.
5. Success.

Let me start.

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

Now I understand the structure. 44 demos exist covering a huge range: path tracing, 4D polytopes, pinball, soft bodies, optics, kinetic theory, sandpiles, Fourier epicycles, quantum orbitals, cloud chamber, magnetosphere, spiderweb, wave tank, Galton board, reaction-diffusion, fireworks, plasma globe, Chladni plate, fireflies, ferrofluid, koi pond, frost, clouds, terrain erosion, boids, attractors, portals, cymatics lagoon, skittering creatures, aurora, cyberpunk city, orrery, falling sand, slime mold, deep sea, sailing, endless runner, audio visualizer, black hole, gravity sandbox, fluid sim, mandelbulb, galaxy, cube.

I need a fresh idea for demo 045. Let me brainstorm what's NOT covered:

1. Cloth/flag simulation — not done explicitly (spiderweb is verlet cloth-ish but a flag/cloth with wind is different). Could do a "sailcloth" or a full cloth playground. Hmm, Gossamer used verlet cloth.

2. Origami / paper folding — interesting but hard.

3. Procedural city with traffic — Neon Rain did a city.

4. Mandelbrot/Julia set deep zoom explorer — not done! Demo 003 was Mandelbulb (3D). A beautiful 2D Mandelbrot/Julia deep-zoom with smooth coloring, orbit traps, etc. Could be gorgeous but maybe "less 3D". Still, a shader-based fractal zoomer with perturbation theory... Actually a good one: interactive Julia/Mandelbrot with the "connected Julia" view — a split view where moving the pointer over the Mandelbrot set morphs the Julia set. That's classic but can be made gorgeous with custom shading (distance estimation, interior coloring, bloom).

5. Electric field / charged particles playground — like a Coulomb sandbox: place positive/negative charges, field lines traced live, equipotentials, test charges orbit. Not done (magnetosphere was planetary, ferrofluid was magnetic dipoles, teslasphere was arcs). An electrostatics sandbox with GPU field visualization could be nice but similar-ish to lumen lab in spirit (field lines...).

6. Double pendulum / chaos playground — physics with Poincaré sections. Might be neat but small scale.

7. Game of Life 3D / continuous life (SmoothLife) — not done! Lenia! Lenia is a continuous cellular automaton producing gorgeous "organisms". A GPU Lenia implementation with interactive kernels, 3D rendering... that would be awesome and fits "Morphogenesis" sibling but different (that was Gray-Scott). Lenia is distinct: continuous CA with convolution kernels, orbium creatures. Rendering as glowing 2D/3D heightfield.

8. Ant colony / pheromone — physarum covered.

9. Solar system formation / accretion — gravity sandbox covered.

10. Water caustics pool — optics lab covered caustics.

11. Tensegrity / rope physics — could do a rope/cable playground. Spiderweb covered verlet strands though.

12. Procedural tree growing (L-systems) + ecosystem — a growing forest / bonsai simulator with L-systems, animated growth, seasons. That could be beautiful and distinct! "Arboretum" — procedural trees generated by L-systems or space-colonization algorithm growing live, wind sway, seasons cycle, leaves fall. Space colonization algorithm creates very natural trees. Rendering with instanced cylinders/leaves. That's a distinct, lovely demo.

13. Ray-marched "infinite library"/Menger sponge fractal — hyperfold did 4D, mandelbulb did fractals.

14. Superfluid / smoke ring vortex — fluid covered.

15. Dominoes / Rube Goldberg machine builder — physics playground with dominoes, ramps, balls. Fun but physics engine heavy.

16. Cellular automata explorer (3D voxel life) — could be cool: 3D Game of Life in voxels with bloom.

17. Lorenz waterwheel — niche.

18. Pendulum wave machine — beautiful classic! Pendulum wave with 30+ pendulums creating mesmerizing patterns, plus harmonograph. A "harmonograph" drawing machine — parametric Lissajous art with glowing trails. Epicycle covered Fourier drawing. Harmonograph might feel similar.

19. Iris/diffraction: wave optics simulator (Fresnel/Fraunhofer) — lumen lab did ray optics; wave optics is different: double-slit interference computed via Huygens integration... wavefront covered wave interference though.

20. Marble run builder — fun.

21. Plasma globe... done.

22. Terrain from diamond-square with cave fly-through — terraforge covered terrain.

23. Knots! A topological knot playground: torus knots, knot energy minimization, animated "knot tightening" — visualize mathematical knots with tubular geometry and flowing textures. Niche but pretty.

24. Solar flare / sun simulation — magnetosphere adjacent.

25. Maze generation + solver visualization — classic algorithms (recursive backtracker, Prim, Kruskal, Wilson) generated live on a 3D hedge maze, then A*/BFS/Dijkstra solvers racing through it with glow. Could be visually nice with a big hedge maze, raycasting... Hmm, decent but maybe less "wow".

26. Kaleidoscope / symmetry drawing — draw with 12-fold symmetry, glowing strokes, mirror kaleidoscope shader. Pretty but 2D-ish.

27. Fire simulation — a ray-marched fire/smoke volumetric. Pyrosymphony had fireworks.

28. Newton's cradle / kinetic sculpture gallery — physics toys collection: Newton's cradle, pendulum wave, Foucault pendulum, double pendulum — a "museum of kinetic sculptures". This could be charming: an interactive physics museum with several exhibits, each physically simulated. Newton's cradle with rigid body constraints, pendulum wave, Foucault pendulum tracing rose patterns with Lissajous... This gives variety in one demo. Might be sprawling though.

29. Ecosystem simulation (predator-prey) — Lotka-Volterra with agents: wolves/sheep/grass on an island, graphs, emergent boom-bust cycles. Nice but murmuration/boids adjacent.

30. Interactive Voronoi/Delaunay + Lloyd relaxation art — 2D-ish.

31. The "Ruben's tube" / standing wave fire tube — cymatics adjacent.

32. Origami crane folding — too hard.

33. A "digital zen garden" with sand raking — koi pond adjacent.

34. Aerodynamics wind tunnel — streamlines over airfoils with smoke particles, lift computation (panel method). That's a cool STEM demo: potential-flow/panel-method airfoil simulator with GPU particle advection showing streamlines, adjustable angle of attack, camber; stall visualization. Distinct from fluid-dynamics (Navier-Stokes dye) since it's aerodynamics with wing profiles and lift curves. But the visual might read similar (particles flowing).

35. Lenia (from #7) — I keep coming back to it. Continuous cellular automata on GPU with interactive parameters, creature library (Orbium etc.), multiple kernels, beautiful rendering. This is genuinely distinct from Gray-Scott morphogenesis and produces jaw-dropping organic creatures. Implementation: convolution with FFT or multi-ring kernel; typically done with precomputed kernel texture and ping-pong buffers. Convolution over large neighborhoods (R=12-20) is expensive per-pixel: for 512² with R=13, kernel has ~500 texels → 500 texture fetches per cell per frame = 130M fetches/frame — too much. Standard approach: FFT-based convolution, or use the fact that kernel is radially symmetric rings: sample the field on ring (polar averaging) — Lenia kernels are radially symmetric: K(r) = rings. We can compute ring averages via separable-ish approach? Actually the standard GPU Lenia uses FFT convolution which is complex to implement in WebGL2 (need FFT passes).

Alternative: use "SmoothLife" with integral image (summed area table) — kernel is disk/annulus: compute mean over annulus = (SAT queries) — SmoothLife classic. But full Lenia with multiple bumps...

Hmm, actually many WebGL Lenia implementations exist using FFT. Implementing radix-2 FFT in GLSL for 256×256 is doable (log2 passes horizontal+vertical = 16 passes). That's substantial but doable. Or keep radius smallish (R=12) and use a precomputed kernel texture, splitting the convolution into multiple additive passes by sampling at kernel non-zero texels — at 256² grid with ~450 kernel texels that's 29M texture samples per frame — actually GPUs can do that (29M samples is fine, modern GPUs do billions). Even integrated GPUs might handle 256² × 450 ≈ 30M fetches at 60fps? 1.8B/sec... borderline. Use 224² and R=11 → ~350 texels → 17M per frame → ~1B/sec at 60fps. Hmm.

Better trick: radially-symmetric kernel via polar sampling: for each ring r_i (only R rings, e.g., 12 rings), we need the mean of field values on circle of radius r_i around each cell. Computing ring means: for each ring, sample points around circle (~2πr points). Total samples ≈ 2π·Σr ≈ 2π·R²/2 ≈ 450 — same.

The known optimization: Lenia kernel can be decomposed... Actually many real-time Lenia implementations just brute-force with R=13 at 256² or 512² and run fine on discrete GPUs; on weaker ones reduce res. I can do 256² with R=13 (kernel texels ~500) and adaptive quality. WebGL2 float textures ping-pong.

But is Lenia the best choice? It's mesmerizing: glowing organic creatures gliding, dividing, dying; user can paint life, adjust kernel skeleton, growth function, switch between known patterns (Orbium, SmoothLife gliders, hydrogeminium...). Rendered as a glowing petri/relief dish. But 030-morphogenesis is literally "Turing pattern terrarium... paint seed chemical... presets" — Lenia would overlap in presentation (paint, presets, glowing dish). Might feel like a sibling. Hmm.

Let me think about what would feel FRESH given the collection:

Categories covered: fractals (2), fluids (1), gravity (2), audio-vis (2), games (2: void runner, pinball), oceans/sky (several), biology (physarum, morphogenesis, coral, murmuration, gossamer), optics (lumen lab, photon garden), quantum (wavefunction, cloud chamber), statmech (kinetic theory, sandpile), geometry (epicycle, hyperfold, magnetosphere), weather/earth (aurora, neon rain, magnetosphere, terraforge, cloudsea), toys (galton, ferrofluid, teslasphere, cymatics, synchrony)...

Not covered:

• Cloth / ropes / hair (partially gossamer)

• Cellular automata proper (Game of Life, Lenia)

• Mandelbrot deep zoom (2D fractals)

• L-systems / plants

• Mazes

• Domino/marble machines

• Soft robotics / verlet creatures (skitter was procedural animation)

• Clock/astronomy (clockwork nebula adjacent)

• Crystallography / snowflakes (frostline did snow crystals)

• Knots

• Origami

• Top-down arcade game like Asteroids 3D

• Tower defense / RTS-lite

• Billiards/pool physics

• Card tricks / Rubik's cube! — A Rubik's cube simulator/solver is a classic and very interactive: full 3×3×3 (or 2-5) Rubik's cube with smooth animations, drag to turn layers, scramble, and an animated solver (e.g., beginner's method or Kociemba — Kociemba is complex; could implement two-phase... too heavy. Beginner's layer-by-layer is implementable but long code). Alternatively a "cubie art" playground. Hmm, solver code is long but doable... risky.

• Snake 3D / Tron light cycles — a Tron-style light-cycle game with AI opponents on a glowing grid — great "wow" with bloom! AI pathfinding, walls as glowing trails. Could be fun and distinct (void runner was a dodger; pinball done). A light-cycles arena with 3 AI, bloom, camera chase. Nice but gameplay demos are risky to make "impressive".

• Flight through infinite procedural canyon/asteroid field — void runner adjacent.

• "Particle life" — clusters of colored particle species with attraction/repulsion matrices producing artificial life ("Particle Life" / "Clusters" by Jeffrey Ventrella). Up to 10k particles on CPU or GPU, species matrix editable, emergent cells/hunters/worms. Gorgeous with trails + bloom. Distinct from physarum? Physarum is pheromone-based; particle life is direct force-based. Presentation could be similar-ish (paint... no painting). Actually particle life is quite distinct and VERY pretty: emergent cells, membranes, reproduction-looking dynamics. GPU implementation O(n²) via fragment shaders like murmuration... murmuration did O(n²) GPU boids with 9216 birds. Particle life with species matrices would echo murmuration's tech but different behavior/presentation. Hmm.

• Kuramoto/XY-model spinner lattice — synchrony covered coupled oscillators.

• Ising model! — statistical mechanics playground: 2D Ising ferromagnet on a big lattice, Monte Carlo (Metropolis) on GPU with checkerboard updates, temperature slider sweeping through the critical point, spontaneous magnetization, domain coarsening, critical opalescence visuals (render spins as glowing cells), live magnetization & energy charts, correlation length, Wolff cluster flips maybe. That's a genuinely beautiful physics demo: watching domains form, and at Tc the scale-free flickering. Not covered (kinetic theory was gas, sandpile was SOC). Rendering: spins as colored cells with domain-boundary glow, bloom. GPU Metropolis with checkerboard + random numbers per frame — very doable. Interaction: paint magnetic field with brush (local field), cool/heat with pointer, measure live magnetization curve vs theory (Onsager). I like this but wonder if "grid of flipping squares" is wow enough... With good rendering (domains as continents of glowing color on a 3D slab, spin flips ripple, critical flicker with bloom) it can look great. And it's deep physics: phase transition at Tc = 2/ln(1+√2) ≈ 2.269.

• Percolation — forest fire model! Fire spreading on a grid with trees, wind, lightning strikes, regrowth (Drossel-Schwabl forest fire model) — self-organized criticality again (sandpile covered SOC though).

• Reaction-diffusion... done.

• Voronoi shatter / fracture playground — click glass to shatter with procedural cracks (radial + concentric cracks), physics fragments falling. "Glass breaker" — satisfying! Crack propagation animation, stress patterns. Distinct and fun. Rendering cracked glass with shader (voronoi cells + crack lines), fragments as physics bodies. Medium complexity.

• Double pendulum trace art / chaos gallery — "Chaotic pendulums" with beautiful trails, energy readouts, Poincaré sections. Could combine into "kinetic museum".

• Foucault pendulum + pendulum wave + harmonograph "Kinetic Museum" — I like this: a gallery of 4-5 kinetic sculptures in a dark museum room with spotlights: Newton's cradle (click to lift balls), pendulum wave (30 pendulums), double pendulum with phosphor trail, harmonograph drawing on a glowing tablet, maybe a Lissajous oscilloscope and a chaotic dripping faucet. Each interactive. This is doable: physics is simple (pendulums, constraints), visual wow from museum setting + bloom + trails. It's like 027-cymatics (plate lab) but kinetic sculptures. The pendulum wave is mesmerizing and simple. Double pendulum trails are gorgeous. Newton's cradle with proper collision physics. Harmonograph = decaying Lissajous drawing.

Hmm, but is it "one coherent demo"? A museum theme ties it together. Effort is spread across exhibits though — each is simple. Total maybe 1500-2000 lines. Feasible.

• Rocket/orbital mechanics game "KSP-lite" — build a rocket, launch from rotating planet, achieve orbit, transfer to moon. With proper patched-conic-ish n-body, thrust, staging... ambitious; gravity sandbox covered orbits though.

• "Ink in water" drop simulation — fluid adjacent.

• Moiré / interference art tool — too 2D.

• 3D voxel sculpting with ray marching — build/sculpt signed-distance spheres and smooth-blend them (metaball clay), ray-marched with soft shadows. "Clay Lab": add/subtract blobs, smooth blending, orbit. Distinct & tactile. Ray marching metaballs is pretty. Interaction: click to add clay, drag to move blobs, smooth/min operations. Decent.

• Turing-complete wireworld computer — cellular automaton building circuits: wireworld with clock, gates, 7-segment display, programmable. Nerdy cool, rendered as glowing circuit board. Wireworld is simple CA (4 states). Could build a working computer-ish demo: ROM, clock, adder, display counting. Visually: PCB with traces lighting up. That's geeky-wow and distinct! Render as a dark PCB with glowing copper traces, bloom, pulse waves traveling. Prebuilt layouts (clock generators, XOR half adder, 4-bit counter driving 7-seg). Interactive: draw wires, place electron heads/tails, speed control, cameras. I like this a lot. But will users get it? With good presets (blinking LEDs, prime sieve?) — a binary counter + 7-segment display is immediately readable.

• Conway's Game of Life "arcade" — Life on a huge GPU grid with pattern library (glider guns, puffers, breeders, spaceship flotillas), rendered beautifully as glowing petri. Classic but maybe too familiar... could do "Life and friends" multi-rule CA explorer (HighLife, Day&Night, Seeds, Brian's Brain (gorgeous!), Wireworld). Brian's Brain with trails looks stunning. A multi-automaton explorer with bloom rendering and pattern stamping is a solid, very visual demo.

Comparing candidates for "wow + distinct + feasible in one session":

1. Lenia (continuous CA) — organic wow, but echoes 030 presentation; GPU convolution heavy but doable at 256².
2. Ising criticality lab — deep physics, decent visuals.
3. Wireworld computer — geeky wow, unique, PCB aesthetic with bloom could look amazing.
4. Kinetic sculpture museum — variety, medium wow.
5. Rubik's cube + solver — iconic, solver risk.
6. Light-cycle game — fun, game-y.
7. CA explorer (Life/Brian's Brain/Wireworld multi-rule) — visual feast with trails, lower wow ceiling.

Actually — what about **a black-hole-adjacent... no. What about "tensegrity + rope bridge builder"? A verlet-rope physics playground: draw cables, they sag; build rope bridges, hang pendulums, cut strands with scissors; wind; cloth tearing. Gossamer already did verlet web + wind though.

What about a "supernova / stellar life cycle"? niche.

"Origami"? no. "Kaleidoscope"? meh.

A drum machine / step-sequencer 3D "music machine" — sonic reactor was audio-vis; a playable 3D sequencer (like a ball-dropping music machine, "Musical marble run") — balls drop on a grid triggering notes (like ToneMatrix in 3D), with pentatonic scales, multiple instruments, gravity, bounce. A "ToneMatrix 3D" glowing grid where you place notes, a playhead sweeps, columns trigger synthesized instruments, balls physically bounce on pads (velocity = loudness). That could be lovely but audio-heavy demos exist (007, 037, 033...).

Let me reconsider Lenia: it's genuinely one of the most jaw-dropping emergent systems, and no demo covers continuous CA. The presentation risk with 030 is manageable if I make it visually distinct: e.g., "Lenia Reef" — render the field as a glowing holographic aquarium / under-glass "living slide" viewed in 3D with parallax, creatures casting light. Plus a curated "bestiary" of known Lenia species (Orbium, fish, scutium...) with kernels tuned per species — actually each species needs different kernel/growth params. Implementing multi-ring kernels: kernel = sum of Gaussians over 2-3 rings; growth = Gaussian around μ with σ. Parameters for known creatures are published (e.g., Orbium: R=13, μ=0.15, σ=0.017, β=[1] single ring...). I recall Orbium: kernel ring at r≈0.5? Hmm, published Lenia params: For "Orbium": R=13, β=1/1 (single ring B=1 at 0.5?), μ=0.15, σ=0.017, T=10. I'm not 100% sure of exact values; would need experimentation, which I can't do visually in this environment. Risky to ship untested visuals.

Ising model — parameters are exact and known (Tc=2.269), no tuning risk! GPU Metropolis is straightforward, and I can verify correctness numerically in Node (compute magnetization vs T curve in a CPU port and check it matches Onsager!). That's a big advantage: I can actually TEST the physics in Node headlessly. Visuals: render as a crystalline slab where spin-up/down domains glow amber/cyan like a ferrofluid landscape; flips sparkle; at Tc, flickering scale-free domains with bloom. Add "cooling schedule" (anneal from high T to watch domains freeze), magnetic field brush, heat/cool brush, live M(T) chart with Onsager theory curve and a "you are here" marker, energy meter, correlation estimate... Also antiferromagnet mode (J<0) with stripe/checkerboard domains, and maybe a spin-glass? Keep scope: ferromagnet + antiferromagnet + field brush + temperature control + presets (critical opalescence, quench & coarsen, hysteresis loop experiment!). Hysteresis: sweep H field at low T and watch domains flip — draw live M-H loop chart. That's a fantastic interactive physics lab with REAL testable physics.

Rendering idea: 256×256 or 512×512 lattice as a 3D "crystalline chip" — each spin a small tile that flips with a little 3D rotation animation? With instancing 262k tiles might be heavy but ok at 256² = 65k instances. Tile flip animation adds delight. Or keep a shader plane sampling the spin texture with domain-boundary detection (edges glow white-hot where neighbors disagree — that's the "energy density" visualization: domain walls glow!). Domain-wall glow is physically meaningful (energy lives on walls) and gorgeous with bloom: at high T the whole slab shimmers with walls; at low T walls are sparse glowing threads that coarsen. YES — energy-density rendering is the winner: render not the spins but the BONDS — glowing where anti-aligned. Plus spin color wash below.

Actually show both: base color from spin (two-tone), overlaid with glowing domain walls, plus flip sparkles (recent flips flash). Under bloom, critical point looks like a living lava/galaxy.

GPU implementation details (WebGL2, no compute shaders):

• Spin texture: RG float? Store spin in R (-1/+1), plus "last flip time" in G for sparkle. Checkerboard update: two passes per sweep (red, black). Each pass: for cells of one parity, compute neighbor sum, Metropolis criterion with per-cell random hash(seed, frame). Use a frame counter + Wang/PCG hash in GLSL.
• Multiple sweeps per frame for faster equilibration (e.g., 2-10 sweeps = 4-20 passes).
• Local field brush: texture with H_local painted by pointer, added in Metropolis.
• Temperature slider T ∈ [0.5, 5], J ∈ {-1, +1} toggle (AFM), global H slider for hysteresis.
• Stats: computing total magnetization needs reduction — use mipmap generation on spin texture and read back 1×1 via readPixels (async or per second). Or render to 1×1 target via a reduction shader sampling the mip chain — simplest: gl.generateMipmap on the spin texture then a tiny shader that samples the top mip and writes M and E... Energy also reducible: energy per cell computable per cell into a texture, then mip-reduce. Read back 1 pixel each ~0.25s for the chart. That's fine.
• Chart: draw M(T) history on a canvas overlay or in 3D as a line. Use a 2D canvas HUD for the plot — simpler and crisp. Plot Onsager M*(T) = [1 - sinh(2J/T)^-4]^(1/8) for T<Tc.

That's a rich, exact, testable demo. Name: "Critical Mass"? "Phase Transition Lab"? "Ising Observatory"? "Criticality"? The demo folder naming style: 045-ferromagnet? Let me call it "045-critical-point — Critical Point: an Ising ferromagnet laboratory". Or "045-ising-lab". I like "Critical Point".

Hmm wait — but is a flipping-squares grid visually "wow" enough compared to siblings? With the domain-wall glow rendering + bloom + instanced tile flips... I think it can be stunning: at Tc it looks like a living circuit board / neural net / lava lamp. Also add a "zoom to 3D relief" where spin is extruded slightly. Camera: orbit controls around the slab; the slab floats in a dark lab with grid floor.

Alternatively combine: No, focus. One system, deep and polished.

Actually, let me reconsider one more: forest fire / wildfire sim (cellular, wind, terrain, water drops with a helicopter bucket!) — "Wildfire" demo: terrain with vegetation density, fire spreads with wind and slope, embers spot ahead, you drop water/fire retardant by clicking (or dispatch helicopters), smoke particles rise, night glow. That's visceral and game-y ("save the forest/cabins!"). But physics is fuzzy tuning (spread probabilities) — no exact test, but it doesn't need exactness. Visual wow: fire glow, smoke, embers — with bloom it's dramatic. Hmm, tempting but the Ising lab feels more "science-observatory" in line with recent demos (036-039 were all physics labs; the series loves labs). The last few: 043 hyperfold (math), 044 photon garden (optics/path tracing). A stat-mech lab continues the lineage nicely (039 kinetic theory, 038 sandpile were hits).

Decision: 045-critical-point — "Critical Point — an Ising Ferromagnet Laboratory".

Hmm, actually wait. Let me reconsider Lenia vs Ising once more. The index already has: 011 physarum (agents), 030 morphogenesis (reaction-diffusion), 027/017 cymatics ×2, 022/034/015 clouds/aurora... The collection is heavy on "glowing pattern petri" too (030, 032, 038 are all grid simulations rendered as glowing relief!). 030 morphogenesis: "GPU Gray-Scott... extruded into a glowing, orbitable 3D relief. Paint seed chemical... presets... bloom". 038 sandpile: "up to 384² glowing cells... instanced-box GPU rendering with per-cell glow... bloom". 032 wavefront: "wave equation on ping-pong buffers up to 512² cells, neon water surface". So a grid-CA rendered as glowing slab is a well-worn pattern in this collection. Ising would be the 4th "glowing grid slab". Presentation overlap is a real concern, but the PHYSICS is completely different and the domain-wall rendering + critical flicker looks quite different from Turing patterns or sandpile mandalas. Plus hysteresis loops, Tc marker, brushes, AFM mode, quench dynamics — the experience differs a lot.

To differentiate presentation: make it a "crystalline chip / magnetic film" aesthetic — a levitating square single-crystal sample inside a lab "cryostat" with a glowing coil around it (the field coil!), temperature shown by a frost-to-heat tint on the crystal edges, laser thermometer readouts. The sample: 320×320 lattice displayed as individual micro-tiles with flip animation? 102k instances okay-ish... maybe 256²=65k. Tile flip: instance attribute with flip progress; update via... CPU can't update 65k per frame cheaply — do flip animation in shader using "last flip time" attribute stored in the spin texture G channel, sampled in vertex shader! Instance vertex shader samples spin texture by instance id → rotation angle animates based on (time - lastFlip). That gives delightful physical flipping tiles. 65k instanced boxes at 60fps is fine for most GPUs (sandpile did 384²=147k instances).

Plus a separate "bond wall" glow plane (fragment shader computing neighbor disagreements from the spin texture) as an underlay or overlay. Underlay: a translucent slab below the tiles showing walls glowing through gaps. Could be visually busy; maybe walls render as emissive gaps between tiles (tiles have gaps; walls glow from beneath). Nice: dark tiles with colored faces, gaps between tiles emit light where bonds are frustrated → the "energy grid" glows through. At Tc the whole grid breathes light.

And a 2D canvas chart (M vs T with Onsager curve, or M-H hysteresis loop) + readouts. Presets:

1. "Critical Opalescence" (T=Tc, H=0)
2. "Quench & Coarsen" (start random at T=1.5, watch domains grow t^½)
3. "Hysteresis Loop" (T=1.8, H sweeping ±0.5 automatically, chart draws the loop)
4. "Antiferromagnet" (J=-1, T sweep → Néel checkerboard, staggered magnetization readout)
5. "Field Writing" (H=0, T=2.0... use local field brush to WRITE patterns that freeze in — draw with +H brush / −H brush, then cool to lock).

Interactions: orbit camera; sliders for T, H; brush applies local +H (left drag) or −H (right drag or shift); "heat burst" on click? Keys: space = sweep toggle, Q = quench (randomize), A = anneal schedule, J = flip sign of J, S = snapshot, H = help, 1-5 presets. Audio: generative — soft pad + "sparkle ticks" whose rate = flip activity (like Geiger of flips), pitch tied to T; a deep hum when global H strong; a satisfying "domain snap" boom when big avalanche. Audio ties: use the flip-count stat readback to drive tick density.

Mipmap reduction for M and E: spin texture R = spin. mean(R) = M. Energy texture: per cell e = -½ s Σ s' (bonds) - H s; reduce similarly. But generateMipmap on float textures: WebGL2 requires color-renderable + filterable for float; EXT_color_buffer_float gives renderable; linear filtering of float needs OES_texture_float_linear — widely available on desktop, less so mobile. Alternative: store spins in a half-float texture (half float filtering also needs ext... OES_texture_half_float_linear). Fallback: do manual reduction with a shader: successive passes halving resolution, sampling 4 texels with NEAREST (no linear filtering needed) — robust, no extensions beyond EXT_color_buffer_float (needed for float render targets, universally available where WebGL2 float RTs work; and I already need it for the sim). Manual reduction: log2(256)=8 passes for M, reuse for E. Do reduction once per ~0.2s to drive charts/audio. readPixels of 1×1 RGBA float — readPixels of float RT: with EXT_color_buffer_float, readPixels RGBA/FLOAT is allowed. OK.

But careful: mipmap/manual reduction of ±1 spins gives exact mean (fine). For E, per-cell energy computed into a second texture each time we reduce (one extra pass). Fine.

Random numbers for Metropolis: hash(fragCoord, frame, pass) → uniform. Metropolis: flip if ΔE ≤ 0 or rand < exp(-βΔE). Use exp2? exp fine. β = 1/T.

Checkerboard parity: pass A updates cells where (x+y)%2==0 reading neighbors from texture P1 writing to P2 (copy others unchanged); pass B updates odd cells. Since neighbors of red cells are all black (unchanged during pass A), it's correct parallel Metropolis.

Multiple sweeps/frame: loop N times {passA; passB;} ping-ponging textures. With 256² that's cheap; do up to 8 sweeps (16 passes)/frame adaptive.

Spin texture format: RG16F? R=spin (±1.0), G=lastFlipTime (seconds; needs precision — 16F max ~65504 with ~3 decimal digits... time modulo 4096s ok; precision at 4000s ~ 2s — too coarse! Use RG32F for G precision? RG32F doubles bandwidth but 256² is tiny (512KB). Use RG32F. Actually simpler: R = spin, G = flip "age" stored as absolute time (float32 has 24-bit mantissa: at 1000s precision ~0.06ms — fine).

Edge boundaries: periodic (torus) — wrap sampling via fract or manual mod with NEAREST. Use CLAMP + manual wrap in shader via mod().

Hysteresis preset: auto-sweep H sinusoidally or triangularly between ±0.6 at T=1.8, plotting M vs H live → the loop. Chart mode switch: M-T curve or M-H loop.

Also "correlation/domain size" readout? Could estimate via counting walls fraction (reduce wall texture!) — wall density IS energy (up to factors). Domain wall fraction readout is enough.

AFM mode: J=-1 → ground state is staggered; readout should be staggered magnetization Ms = mean(s * parity). Compute in reduction: when reducing for stats, multiply by parity mask — need separate stat pass. Simplify: in AFM mode, chart shows |M_staggered| by computing staggered spin texture? Trick: define σ_i = s_i·(-1)^(x+y); for AFM with J=-1, the σ dynamics equal ferromagnet Ising with J=+1 (sublattice rotation maps AFM↔FM at H=0!). So for the SIM I can always run FM updates; for DISPLAY in AFM mode multiply color by parity, and staggered stats come from... wait if I store σ (the "staggered spin") and evolve with FM Metropolis, then physical AFM spin s_i = σ_i·(-1)^(x+y). Display: color = σ·parity. Physical uniform magnetization M = mean(σ·parity) = 0-ish always; staggered M_s = mean(σ). Nice — one sim core, display transform. Global H couples to s, so in σ coords the field term is -H·σ·parity — a STAGGERED field on σ. Just implement the local field as h_i = H_global·(AFM? parity : 1) + H_brush. Easy: in Metropolis pass, h_eff = uH * parityFactor + brushH.

Charts in AFM mode: label "staggered magnetization". Keep same Onsager curve (Tc same).

Rendering tiles in AFM: face color by s = σ·parity → checkerboard at low T. Beautiful Néel checkerboard with glowing defects.

OK this is all consistent and TESTABLE: I'll write the Metropolis update + stats in a small CPU JS port, run in Node, verify M(T) follows Onsager (e.g., T=1.5 → M≈0.987? Onsager: M=(1-sinh(2/T)^{-4})^{1/8}; at T=1.5: sinh(2/1.5=1.333)=1.742, ^-4=0.1087, 1-0.1087=0.891, ^(1/8)=0.9857) and M≈0 at T=3 (after equilibration), Tc≈2.269 crossing. Great confidence without eyes.

Audio: pad + flip ticks. Flip activity = (number of flips this frame)/N — I can get flips count cheaply? Each pass could write flip flag into... simplest: estimate activity from energy change rate? Or reduce a "flip flag" texture — the update pass can write into G channel time-of-flip only for flips; counting flips needs reduction of "flipped this frame" flag — another channel. Use B channel: 1 if flipped in the last sim batch else 0 (set at write time). Reduce B → flip rate. RG32F has no B; use RGBA32F? 1MB at 256², fine. Or store flip flag into a separate tiny texture... RGBA32F simplest: R=spin(σ), G=lastFlipTime, B=flipFlagThisBatch, A=unused. After reduction passes, reset B? The update passes overwrite B each batch — set B=0 for non-flips in the final batch pass... but multiple sweeps per frame: I want flips over ALL sweeps this frame: pass writes B = max(B_prev, flipped)? But then reset at frame start: first pass of frame writes flipped?1:0, subsequent passes max. Since passA/passB alternate textures, "first pass of frame" flag in uniform handles reset. Then reduce B after sim → flipCount. readPixels gives M(=mean R... careful: mean of R over the LATEST texture), E needs its own pass, flipRate=mean B. Three reductions — or one RGBA reduction: make a stats source texture: R=σ, G=flipFlag, B=perCellEnergy (computed in a stats pass from the spin texture: e_i = -0.5·σ·Σσ'·J... in σ coords J=+1 always; plus field term -h·σ... for chart "energy" show bond energy density only — fine), A=staggered? For AFM M_phys need mean(σ·parity): put in A = σ·parity. One stats pass + 8 reduction passes → readPixels 1 pixel: [M, flips, E, M_phys].

Audio tick scheduling: use flipRate each 100ms to set tick probability; ticks = tiny filtered noise bursts at pentatonic frequencies — like sand hiss. Plus pad chord slowly evolving; pad brightness ∝ activity; sub-bass "whoomp" + camera pulse when |ΔM| jumps (domain avalanche: monitor M derivative). Quench: descending shepard-ish gliss? Keep: quench triggers a "cooling sonar" ping. Fine.

Now the visual scene:

• Dark lab: reflective grid floor (subtle), floating "cryostat" frame: a metallic ring/frame holding the square crystal; two coil hoops (torus) on either side for the Helmholtz field coils that glow with H (amber/cyan by sign) — field visualization: faint arrows/field lines through the sample pulsing with H.
• The crystal: 256×256 instanced micro-tiles (rounded box), each flipping (rotate 180° around in-plane axis when its σ flips, shader-animated from lastFlipTime). Top face color: two-tone palette (up = warm amber, down = deep cyan... or "magnet" theme: red/blue like magnet poles). Emissive edges where bonds frustrated? Per-tile wall glow: in tile fragment shader, can't easily read neighbors... Instead: a "glow grid" plane just beneath tiles, fragment shader samples σ texture 5 taps, wall intensity = frustrated bonds → emissive veins shining through gaps. Also a subtle AO bevel on tiles.
• Post: UnrealBloom + grade (vignette/grain/chromatic) — same pattern as siblings (they have a standard grade pass; check an existing demo for the shared post pipeline code to reuse style).
• HUD: top-left title + readouts (T, H, M, E, wall density, sweep rate), top-right buttons (presets, sweep, quench, audio, snapshot, help), bottom: the 2D chart canvas (M-T or M-H) with Onsager overlay + marker. Keyboard + touch.
• Camera: OrbitControls with damping, auto-slow-orbit idle.

Also "heat/cool brush"? The local field brush (draw patterns) is the star interaction: left-drag paints +H region (tiles flip up under it), right-drag/shift paints −H. At T≈2 (below Tc, small global H=0), painted patterns persist after brush leaves (if field strong enough to flip but T low enough to keep) → "magnetic writing". Show brush radius circle on surface.

Quench animation: Q → T animates from 5 → 1.5 over ~2s with hiss audio + frost tint. Anneal A → T slowly ramps up to 4 then down over 20s.

Performance: 16 passes of 256² = trivial; tiles 65k instanced — one draw call; glow plane one; fine. Adaptive quality: reduce lattice to 192²/128² and sweeps, disable bloom at lowest tier? Standard tiers like siblings.

Tech pattern reuse: Let me look at one recent demo (e.g., 038-sandpile or 044) to reuse the boilerplate: import map (three@0.1xx), EffectComposer/UnrealBloomPass/custom grade pass, audio manager pattern, quality tiers, snapshot. Since I can't run a browser, consistency with proven sibling code lowers risk. Let me read 038-sandpile/index.html structure quickly (it's likely long; grep the key sections: imports, shader pass setup, audio init, quality, snapshot function). Also 030-morphogenesis has GPU ping-pong sim + dish relief — closest tech analog. Let me extract its skeleton.

Actually, total plan:

1. Peek at 030-morphogenesis index.html head/imports + key JS utilities (post pipeline, audio, quality, snapshot) to mirror conventions.
2. Write the new demo in parts (HTML/CSS, shaders JS) under /tmp/critical/, concatenate, node --check the module, run a Node CPU simulation test of the Metropolis physics vs Onsager to validate the algorithm constants (and my GLSL port's RNG/update logic mirrored in JS).
3. Validate GLSL with @shaderfrog parser (already installed? it was installed in /tmp last run — probably gone; reinstall quickly).
4. Deploy to /space/demos/045-critical-point/, update index with sed insertion after the "New demos are added here" line (line ~99 anchor).
5. Final verification, _success.

Let me first look at the sibling demo conventions.

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

*********************************************************************************************************************************************************************************************************************************************em.

*******************************************************************************************************************************************************************************************nd.

I have all conventions. Now let me plan and write the demo.

Demo 045: "Critical Point" — an Ising ferromagnet laboratory

Folder: /space/demos/045-critical-point/

Architecture

Core sim (GPU, WebGL2 float RT ping-pong):

• Lattice N×N (256 default; quality tiers 320/256/192/128).
• Texture RGBA32F: R = σ (staggered spin, ±1), G = lastFlipTime (seconds), B = flip-flag this frame (for stats + tile flash), A = 1.
• Init pass: random ±1 (or all-up / chequerboard depending on mode start).
• Metropolis pass: checkerboard parity via uniform uParity (0 or 1). For each fragment: if (x+y)%2 != uParity → copy through. Else read 4 neighbors (wrap with mod), s = own σ; local field h = uH * paritySign(uModeAFM? (x+y)%2 ? ... wait.

Let me define clearly:

• Physical spin: s_i. Energy E = -J Σ s_i s_j - Σ h_i s_i, with h_i = H_global + H_brush_i.
• In AFM mode (J<0), substitute σ_i = s_i · p_i where p_i = (-1)^(x+y). Then -J s_i s_j = -J σ_i σ_j p_i p_j = +J σ_i σ_j (since p_i p_j = -1 for neighbors). So with J=-|J|: +J σσ = -|J| σσ... let me redo: term = -J s_i s_j = -J σ_i σ_j p_i p_j = -J·(-1)·σ_i σ_j = J σ_i σ_j. For FM J=+1: -σσ (favors aligned σ). For AFM J=-1: +... wait for AFM J=-1: term = J σ_i σ_j = -σ_i σ_j. Hmm interesting: for J=-1 physical, term = -1·σσ·(-1)... let me just recompute: E_bond = -J s_i s_j, J=+1 FM, J=-1 AFM. s_i = σ_i p_i. E_bond = -J σ_i σ_j p_i p_j = -J σ_i σ_j (-1) = J σ_i σ_j = -(-J) σ_i σ_j. So in σ variables the bond coupling is J_eff = -J. FM (J=1) → J_eff=-1?? That's wrong — FM should favor σ aligned.

Hold on: I want in FM mode σ = s (p=1), so σ-dynamics = s-dynamics with J_eff = +1: E = -J_eff σσ = -σσ. Let me redo the algebra: define σ_i = s_i p_i → s_i = σ_i p_i. E_bond = -J s_i s_j = -J σ_i p_i σ_j p_j = -J σ_i σ_j (p_i p_j). Neighbors have p_i p_j = -1. So E_bond = J σ_i σ_j. Write E_bond = -J_eff σ_i σ_j → J_eff = -J.

So FM J=+1 → J_eff=-1: σ anti-aligns?? Contradiction with FM where σ=s should align. The error: if p ≡ 1 (FM mode), neighbors have p_i p_j = +1, not -1. I conflated. Let's be explicit: in AFM mode p_i = (-1)^(x+y), so p_i p_j = -1 for neighbors; in FM mode we just use σ = s directly.

• FM mode: E = -J σ_i σ_j - h σ_i, J=+1.
• AFM mode physical: E = -J s_i s_j - h s_i with J=-1 → in σ: E_bond = J σσ = -σσ (J=-1 → J σσ = -σσ) ✓, and field: -h s_i = -h p_i σ_i. So:

Unified σ-dynamics (always ferromagnetic coupling, J_eff=+1): E = -Σσσ - Σ h_eff,i σ_i with h_eff = (FM ? h : h·p_i) = h_i · (AFM ? p_i : 1).

So the Metropolis pass is identical for both modes; only h_eff differs by parity multiplication, and DISPLAY colors differ (AFM: show s = σ·p). And physical uniform magnetization in AFM = mean(σ·p) (≈0), staggered = mean(σ). Chart shows mean(σ) in both modes with relabeling.

• Metropolis flip criterion: ΔE = 2 σ_i (Σ_neighbors σ_j + h_eff). Flip if ΔE ≤ 0 or rand < exp(-ΔE/T).

Brush field texture: separate R32F (or use half) texture same size, painted by a brush pass (additive splat with smooth falloff, decays slowly). h_total = H_global + brush·brushStrength. Brush pass: render a quad into brush texture ping-pong: new = old·decay + splat. Decay ~0.999/frame at 60fps (time-based). Brush values ±(0..2).

Alternatively simpler: keep a single brush RT, ping-pong between two, with decay. Fine — 2 more small passes.

Stats: stats pass renders N×N RGBA32F: R=σ, G=flipFlag, B=bond energy density e = -0.5 σ Σσ_n (J_eff=1 form... display "bond energy per site"), A=σ·p (physical s). Then reduction: 8 passes halving (sample 4 texels, average) to 1×1, readPixels. Every 0.15s. Note: reduction of σ over the lattice gives M_stag(σ) = chart value. Physical M for FM = same (p=1).

Mipmap alternative rejected — manual reduction with NEAREST sampling, size sequence [128,64,32,16,8,4,2,1]. I need reduction targets; create on quality change.

Tiles rendering: InstancedMesh of N² rounded... plain BoxGeometry(0.82,0.82,0.34)? Actually the "flip" animation: rotate around X axis (in-plane) by angle = π·flipAnim where flipAnim = 1 at flip instant → 0. In vertex shader: instance i → uv = (i+0.5)/N → sample spinTex (R=σ, G=lastFlip). age = (uTime - lastFlip)/FLIP_DUR; anim = age<1 ? cos stuff. Rotation: if age in [0,1): angle = π·smoothstep(0,1,age) applied when flipped. Sign of σ after flip = current R. We rotate the box from 0→π; the box has two face colors (top face = "up color", bottom = "down color"): after π rotation the box is upside down showing opposite color. Since current σ is the NEW state, color should END at new state: so during animation we rotate and at end show color(σ_new). With box geometry: face +Y shows upColor, -Y shows downColor... after π rotation about X, +Y face points down. Hmm: let me think: final displayed top color must be color(σ). If σ=+1: final top = upColor, and during anim rotated by π(1-t). Simplest: define displayed orientation θ = π·(1-ease(age))·dir where dir=±1 depending on flip direction (up-flip vs down-flip — alternate for variety). At age≥1, θ=0 (identity), and the material colors by σ directly: top face color = mix(downColor, upColor, σ01). During anim, rotate instance by θ around local X. The color can just switch at flip time (σ already new) — with the box tumbling, the perceived change reads naturally. Add slight overshoot bounce: θ = π·(1-easeOutBack(age)). easeOutBack overshoots 1 → θ slightly negative — nice snap.

Also add subtle height pop: y offset = 0.1·sin(π·min(age,1)) for flipped tiles. And emissive flash: emissive = flashColor·(1-age)·... passed via varying from vertex (age computed there) → fragment uses vFlash.

Sampling texture in VERTEX shader: WebGL2 supports texture() in VS. three.js ShaderMaterial vertex: use texture2D (GLSL1-style, three injects compatibility). We're writing raw ShaderMaterial with glsl 1.0 style (three r170 still supports GLSL1 shaders compiled as GLSL3? — three compiles ShaderMaterial GLSL to ES 3.0 only if material.glslVersion = THREE.GLSL3; default it uses GLSL1 with auto conversion of texture2D etc. Vertex texture fetch with texture2D works in VS under GLSL ES 3.0 via three's #define texture2D texture). OK. NEAREST filtering on the spin texture (no mips).

Instance uv attribute: use InstancedBufferAttribute aCell (vec2). Also instanceMatrix unused — set instanceMatrix to identity per instance... With InstancedMesh you must supply per-instance matrices OR use InstancedBufferGeometry with custom attributes. Cleaner: **************************try from BoxGeometry + aCell attribute, draw with Mesh + ShaderMaterial using instanceCount. three supports instanced rendering on regular Mesh when geometry.isInstancedBufferGeometry. I'll do that (like sandpile probably did). Position of tile: worldX = (cellX/N - 0.5)·worldSize etc.

Face normal coloring: in fragment, use vNormal to tint top/bottom faces differently, sides darker. Compute per-fragment: if normal.y>0.5 → face color; normal.y<-0.5 → opposite color slightly darker; else side shade.

Palette: FM mode "magnet iron": up = warm amber (#ffb454 hot), down = cool steel blue (#3fc8ff)... Actually to differentiate from siblings: up = "north" crimson-red, down = "south" deep blue? Classic magnet colors red/blue. With bloom and dark lab that reads great. Glow veins = white-gold. AFM mode keeps same palette (checkerboard looks like a dazzling chess board).

Glow wall plane: a plane slightly below tiles (y=-0.2) with fragment shader: sample σ at cell and 4 neighbors → frustrated = (1 - σ·σ_n)/2 sum /4 → emissive = wallColor·frustrated·intensity, also shimmer by flip flag B? Add: recent flip boost from G age. The plane is visible through gaps between tiles (tile size 0.86 of pitch). Also render at slightly larger emissive when T near Tc? Intensity uniform from activity.

Hmm — actually tiles with gaps over a glowing plane: from glancing angles the plane is occluded — fine, veins visible through gaps top-down. Also add a faint fresnel glass cover above? Skip glass cover — interaction raycast to plane.

Lab scene:

• floor: large dark reflective disc? Simple: big circle mesh with radial gradient shader + grid lines (subtle), receives nothing fancy.
• cryostat frame: 4 corner posts + top/bottom square rings (TorusGeometry square? use BoxGeometry frame edges) around the crystal, metallic PBR with RoomEnvironment. Two Helmholtz coils: TorusGeometry( radius ~ 0.75·worldSize, tube 0.06 ) standing vertical (axis along X and -X?) — classic Helmholtz: two coaxial coils with current, field along axis. Place axis horizontal through the sample? Field direction for Ising is out-of-plane (easy axis) — coils should face the sample faces: axis along Y (vertical): two horizontal tori above and below the sample, glowing emissive proportional to |H|, color sign (amber +, cyan −). Plus faint field-line particles? Add 200 small glowing points oscillating along field lines through the sample when |H|>0.05 — nice touch, cheap: a Points cloud with shader: y = sin(t·speed + phase)·Hhalf... maybe skip; coils glow + HUD is enough. Actually add simple "field flux" beams: two cones (additive, very faint) connecting coils through sample, opacity ∝ |H|. Cheap and readable.
• dust motes: small Points drifting (standard).
• background: color #05070c, subtle radial glow.

Chart HUD: bottom-left 2D canvas 260×150:

• Mode M-T: x axis T (0.5..5), y axis |M| 0..1; draw Onsager curve + vertical line at Tc + live point (T, |M|) with trail (store last 200 samples fading).
• Mode H hysteresis: x axis H (-1..1), y M; live point + trail builds the loop.
• Toggle via button/key C. Auto-switch in hysteresis preset. Also small "wall density" bar and readouts T, H, M, E, flips/s.

Controls/UI: bottom bar buttons: presets 1-5 (Critical / Quench / Hysteresis / Néel AFM / Writing), T slider, H slider, brush size slider, sweep rate?, buttons: Quench(Q), Anneal(A), Sweep(H auto), Mute(M), Snapshot(S), Help(?). Keyboard: 1-5, Q, A, C (chart), J (toggle FM/AFM), M, S, H, R (randomize), 0 (zero field brush clear), space (pause sim?). Touch: drag = rotate camera? Wait — brush painting vs orbit conflict: use left-drag on crystal = paint; drag on background = orbit. With OrbitControls attached to canvas, need to disable controls when painting: on pointerdown raycast to crystal plane; if hit → start painting (controls.enabled=false), else orbit. Sibling demos did this pattern (morphogenesis painted with pointer + orbit). Shift/right = negative brush.

Toast messages + help overlay like siblings.

Audio: pad (two detuned sines through lowpass, brightness ∝ activity), flip ticks: schedule from flip rate — each frame if rand < flipsThisFrame/... spawn N ticks capped (e.g., ≤6/frame), tick = short noise burst / square blip with pitch rising with T. Domain snap: monitor dM/dt; on big negative jump (>0.15 in 0.3s) → low thump + camera nudge. Quench: noise sweep down (filter freq ramp). Coil hum: oscillator 55Hz + 110 with gain ∝ |H| (audible when field strong) — nice feedback. Brush painting: soft "write" crackle while painting. All respecting started/muted, init on first gesture.

Presets:

1. Critical Point (T=2.269, H=0, FM, random start) — opalescent flicker.
2. Quench & Coarsen (start random, T: 4.5→1.6 quick, H=0) — domains grow, walls glow and slowly anneal away.
3. Hysteresis (T=1.8 FM, H auto-sweep ±0.55 triangular, period ~24s, chart=M-H).
4. Antiferromagnet (J→AFM, T=0.8 anneal from 3 → Néel checkerboard; chart shows staggered M vs T).
5. Magnetic Writing (FM, T=2.05, H=0, brush strength 2.2, brush radius bigger) — draw with LMB (+) / RMB (−), patterns freeze.

T slider range 0.5..5 default; H slider -1..1.

Sim details:

• Sweeps/frame: quality high: 4 sweeps (8 passes); adaptive. At 256² 8 passes of fullscreen 256×256 = trivial (256k frags × 8). Fine.
• GLSL RNG: pcg hash or the classic:

GLSL1-style in three ShaderMaterial → compiled as GLSL ES 1.0?? WebGL2 with GLSL1 shaders: three adds "#version 300 es" only if glslVersion: GLSL3. Default ShaderMaterial on WebGL2 gets GLSL3? Reality: three.js WebGL2 always prefixes with 300 es and defines texture2D → texture for GLSL1-style code... Actually three.js: "if capabilities.isWebGL2 and material.glslVersion !== GLSL3" it still compiles with #version 300 es using compatibility defines (texture2D defined as texture, gl_FragColor as pc_fragColor etc.). Yes — three always uses GLSL3 under the hood on WebGL2 with compat defines. So uint ops ARE available in GLSL1-style ShaderMaterial when running WebGL2. Sibling demos relied on WebGL2 (float RTs). I'll use uint hash but ALSO provide a pure-float fallback RNG? To keep it simple and robust use a float-based hash without uint:

Good quality for Metropolis (decorrelated per frame via seed in z: p = vec3(fragCoord, seed)). Fine.

• Wrap: neighbor coords via fract((c+offset)/N) — with NEAREST and REPEAT wrap mode? For float textures REPEAT wrap is allowed (wrap is independent of filtering). Set wrapS/T = RepeatWrapping, then sample uv ± texel — REPEAT gives torus for free.

• Ping-pong: two RTs (RGBA FloatType, NEAREST, REPEAT). Note: reading from the same texture being written is forbidden — standard ping-pong. Checkerboard: within one pass, updated parity cells write new value; others copy. Copy = read own texel, write back. OK.

• Float precision: spin ±1 exact; time in G channel float32 fine.

• Init shader: random via hash; mode uniform: 0=random, 1=all up, 2=checkerboard (for AFM), 3=up with random 10% defects? Keep random/up/checker.

Tile flip VS details: attributes: position/normal (box), aCell (vec2). uniforms: uSpin (texture), uN, uTime, uWorld (world size), uGap (tile scale 0.86), uFlipDur (0.28s), uPulse (global pulse from snap events).

Wait — direction: alternate by parity gives checkerboard of rotation dirs, cute. Apply rotation around X axis: rotate position.yz by ang; also pop: pos.y += over*0.12.

Position: centered: vec2 wp = (aCell/uN - 0.5)*uWorld; instancePos = vec3(wp.x, 0.0, wp.y). Plus y pop.

vColor factors: vSpin = s.r; vFlash = over (0 during rest) — also continuous glow near Tc? keep flash only. vNormal: rotate normal too (normal.yz by ang).

FS:

Lighting: fake: light = 0.62 + 0.38·max(0, dot(rotatedNormal, normalize(vec3(0.4,0.9,0.25)))); plus emissive flash = flashCol·vFlash·1.8; plus a subtle fresnel rim? skip rim, flash is enough. Output color·light + flash.

Tile sides: darker 0.35·color mixed with dark metal.

Glow plane FS:

Emissive color = mix(vec3(0.02), wallColor, wallv)·intensity; add flip sparkle: sample B channel? B is flipFlag — the glow plane can sample G for age → flash = exp(-age8)·1.5. So veins + sparkle. Also grid darkening between cells: create thin dark lines at cell borders so glow reads as veins: borderFactor = smoothstep at fract(uvN) edges → multiply glow by borderMask (glow strongest AT borders where walls live!). Wall bond between cell i and i+1 sits at their shared border: approximating by just lighting whole cell by its wall count is fine visually.

Also under-glow: a bigger additive radial gradient plane under everything (reflected light) tinted by average spin color (uniform uAvgColor from stats).

Coils: torus above and below, emissive = |H|·color(sign). Pulse slightly. Plus two additive cone beams when |H|>0.02.

Floor: big plane y=-1.6, shader: radial falloff dark + faint grid lines + reflection? Real reflection expensive; fake: draw a mirrored, dimmed copy of the glow plane? Simplest good-looking: floor with radial gradient + grid, plus "light pool" additive sprite under the sample tinted by avg color (like ferrofluid demo's polarity pools). OK.

Dust motes: 300 points in a box, drifting upward slowly, additive faint.

Adaptive quality: tiers:

• Q0 high: N=320? hmm 320²=102k tiles ×8 passes — fine. Let's offer N=256 high, 192 med, 128 low; sweeps 4/3/2; bloom on always but halve resolution at low (UnrealBloomPass handles internally), disable MSAA samples at low (composer RT samples 4→0 requires recreating composer — instead set samples once from initial quality guess and don't change). Auto-detect: measure fps over 2s windows; drop tier if <45fps, raise if >57fps for a while. Standard.

Also readPixels stalls: do stats reduction every 0.15s — acceptable.

Snapshot: same pattern (toBlob after render, snapshotQueued).

Help overlay: list controls; toggle H / ?.

Toast: preset names etc.

Testing plan (Node):

• CPU port of Metropolis with same math: verify M(T) vs Onsager at several T (equilibrate 128² with 200 sweeps, measure over 200), check Tc crossing M(Tc)≈0.79? Actually Onsager at Tc = 0 exactly (infinite lattice); finite 128² at Tc gives M ~ N^{-1/8}... smallish. I'll check M(1.5)≈0.986±0.02, M(3.0)≈0±0.05, M(2.269) in [0.05, 0.5], and AFM mapping: run "AFM via σ" code path at T=0.8 → |mean(σ)|≈1 while mean(σ·p)≈0. Also hysteresis smoke test: sweep H at T=1.8, loop area > 0 (M lags H). This validates my update math + RNG.

Then GLSL validation: extract shaders, run @shaderfrog parser (it parses GLSL ES; my shaders use texture2D etc. — the parser handled sibling shaders? Last run summary says they used @shaderfrog for path tracer — likely with GLSL3 keywords? I'll write shaders GLSL1-style (varying/attribute/texture2D/gl_FragColor) — parser accepts ES 1.00 by default; but my uint hash — drop uint, use float hash → parser-safe and driver-safe.

One more check: sibling 030 used ping-pong float buffers — confirmed ("ping-pong float buffers" in 032 too). EXT_color_buffer_float is needed for RGBA32F render targets; check renderer capabilities and fall back to HalfFloatType if missing (rare). I'll implement: try FloatType; on !capabilities float → HalfFloatType (time precision in G channel: half float at t=300s → step 0.25s — flip flash still ok since age computed vs current; precision: half has 10-bit mantissa: at 256s granularity 0.25s — flip anim compares uTime-s.g: error up to 0.125s → visible jitter in anim timing but acceptable; mitigate: store flipTime as (uTime mod 128) and compute age via modular difference: age = mod(uTime - s.g + 64, 128) - 64... in half precision at ≤128 granularity 1/16s — fine. I'll do modular time from the start — safe for both float and half). Actually with float32 no need, but modular works for both: store s.g = mod(uTime, 128.0); age = mod(uTime - s.g + 128.0, 128.0); if age > 64 → treat as very old (no flip). Nice.

Sim uTime: seconds since start, float32 precision fine for minutes; for hours drift — modular handled.

Brush texture: R16F/R32F single channel (use RGBA for compatibility). Brush pass: splat = exp(-d²/r²)·strength·dt... plus decay exp(-dt/τ) with τ≈6s? For "writing" preset want persistence: τ=30s there. Uniform uDecay.

Painting the brush from pointer: raycast pointer → uv on crystal → brush pass renders a point sprite at uv (scissor to brush RT same N²). Use a fullscreen pass with uniforms uBrushPos, uBrushRadius, uBrushValue, uPaintActive — simpler than sprites. Each frame while painting: brushTex = brushTex·decay + splat. Also continuous decay pass each frame even when not painting (combine: every frame brush ping-pong with decay + optional splat).

Sim Metropolis samples brush tex: h = uH·parityFactor + brush·uBrushScale.

HUD readouts: T, H, M (or M_stag), E/site, walls %, flips/s, lattice N, sweeps/frame.

Chart canvas: drawn each frame from ring buffers; Onsager overlay in M-T mode; Tc line; in M-H mode axes cross at 0.

Buttons row: Presets [1..5 as named chips], sliders T, H, brush; toggles: AFM/FM (button shows current), Sweep, Pause, Mute, Snapshot, Help. Keep to two rows on mobile via flex-wrap.

Edge case: OrbitControls zoom/pan enabled; painting requires pointer hit on crystal plane (y=0 plane within |x|,|z| ≤ world/2). On touch: one finger on crystal paints; one finger elsewhere orbits; two fingers pinch zoom.

Quench behavior: Q → sets uT target with ramp: I'll implement T as animated parameter (current T lerps to slider value at rate 1.5/s; quench sets slider value instantly to target and T jumps... for "quench" feel: Q = instant randomize spins (T high metaphor) + set T=1.6 with audio sizzle. Anneal A = schedule: T→4.5 hold 2s then linear down to 1.2 over 14s (steel annealing), then stop. Implement schedule in tick.

Sweep (hysteresis): when enabled: H = Hmax·triangle(2πt/period); slider disabled visually (or shows live value). Period 24s, Hmax=0.55.

Numbers for flip ticks audio: flips/s from stats (flipsFraction·N²·sweepsPerSecond?) — reduction gives mean(B) = fraction of cells flipped THIS FRAME batches; multiply by frames → rate. Cap ticks at 8/frame; probability ∝ rate.

Domain-snap detection: keep M history; if |ΔM| over 0.25s > 0.08 while T<Tc → thump + coil flash? subtle camera shake 0.06.

Alright — also the AFM display mapping: tile color = σ·p (physical s). So FS needs parity per instance: pass vParity from VS (mod(aCell.x+aCell.y,2)); colorSpin = mix(vSpin, vSpin·(vParity·2-1), uAFM). Glow plane FS: compute on physical s: sample σ·p at each tap then wall = 1 - s_i s_j — since p flips between neighbors, in AFM the Néel state has s alternating → aligned s walls dark ✓. So glow plane: s(uv) = spin(uv)·(AFM? parity(uv) : 1).

Stats: chart shows mean(σ) always (label switches). M_phys(A channel)=σ·p reduced — display as "uniform M" small readout in AFM (should hover ~0 — nice physics check!).

Energy B channel: bond energy e_i = -0.5·σ_i Σσ_j (in σ coords, J_eff=1) — equals physical bond energy in both modes ✓ (shown as E/site ∈ [-2, 2]).

Now the name/branding: "045-critical-point" — title "Critical Point". Accent color: I'll use a hot amber/cyan duotone: accent #ffb454 (amber) with secondary cyan #4fd8ff. Background #05070c.

Let me now also double check one risky three.js detail: InstancedBufferGeometry + Mesh (not InstancedMesh):

Works (frustumCulled = false recommended).

Texture in vertex shader: three ShaderMaterial VS with texture2D — on WebGL2 three compiles to 300 es with #define texture2D texture. OK. But — texture LOD in VS needs texture2DLodEXT in GLSL1 / textureLod in GLSL3; with NEAREST no-mip texture, plain texture() in VS works.

Renderer: antialias false (composer has MSAA target), powerPreference high-performance. ToneMapping: ACESFilmic with OutputPass? Sibling 030: composer RT HalfFloat + OutputPass (which applies tone mapping from renderer settings). Check what tone mapping they set... they used OutputPass which uses renderer.toneMapping. I'll set renderer.toneMapping = THREE.ACESFilmicToneMapping; toneMappingExposure ~1.1.

Check 030's renderer setup quickly? I'll just mirror typical. Let me grep quickly for renderer creation in 030.

All conventions confirmed. Now I'll build the demo. I'll write it in three parts to /tmp/critical/ then concatenate:

• part1: HTML head, CSS, body, import map
• part2: JS module start → shaders + sim setup
• part3: scene, UI, audio, loop

Given the size (~1500 lines), I'll write in ~4-5 file chunks to avoid tool limits, then cat together.

Let me define the whole thing carefully now, then write.

Detailed design

Constants

• TC = 2.269185.
• WORLD = 8 (crystal spans 8×8 world units at y=0), tile pitch = WORLD/N.
• T range [0.5, 5.0], H range [-1, 1], brush strength ±2.4, brush radius (uv units) adjustable 0.02..0.12.

State

Sim textures

• spinRT[2]: N×N RGBA float (or half fallback), NEAREST, REPEAT.
• brushRT[2]: N×N RGBA float, NEAREST, CLAMP.
• reduceRT[k]: sizes N/2^k down to 1, RGBA float, NEAREST, CLAMP.
• statsRT (N×N) for stat source.

Shaders (all fullscreen tri/quad via THREE.OrthographicCamera + quad... use three's pattern: new THREE.Mesh(new THREE.PlaneGeometry(2,2), mat) with own ortho scene; or write a tiny fsQuad helper (like three's Pass FullScreenQuad). I'll write helper runPass(material, target) using a shared Scene+OrthoCam+Quad with swappable material (common pattern). Must set material on quad, render.

1. initMat: writes σ = hash<0.5? -1:1 (mode 0 random, 1 up, 2 checker), G= -1000 (no flip), B=0.

2. metroMat: uniforms uSpin, uBrush, uN (float), uParity (0/1), uSeed (frame), uT, uInvT? pass uT, uH, uAFM, uBrushScale, uTime, uResetFlipFlag (1 on first pass of frame). FS:

   Hmm wait — brush field in AFM: physical brush field couples to s: -h_b·s = -h_b·p·σ. So h_eff = (uH + brush)·(AFM? p : 1). Good: float hphys = uH + texture2D(uBrush,uv).r*uBrushScale; float h = uAFM>0.5 ? hphys*p : hphys;

   Note: non-updated cells (wrong parity) keep cur.b (flip flag) — but reset: when uResetFlipFlag on pass A, only parity-A cells pass through the flip branch... parity-B cells copy with B=cur.b reset? On pass A (uParity=0, reset=1): parity-0 cells set B=flip?1:0; parity-1 cells must ALSO reset B=0 (their chance to flip comes in pass B which reads from pass A output — and pass B will overwrite B for its own flips via flip?1:cur.b; since cur.b was reset in pass A output for those cells ✓). So: copied cells: B = uResetFlipFlag>0.5 ? 0.0 : cur.b. ✓ Then pass B (reset=0): parity-1 cells flip → B=1 or keep cur.b (0 or... they were 0, and parity-0 cells' B values were set in pass A and copied through pass B ✓).

   RNG decorrelation between pass A and B: uSeed increments per pass.

   exp(-dE/T): dE can be up to 2·(4+3)=14 → exp(-28) fine.

3. brushMat: float v = texture2D(uBrush,uv).r; v *= uDecay; if(uPaint>0.5){ float d = distance(uv, uPos); // torus distance! wrap-aware: d = min over wraps vec2 dd = abs(uv-uPos); dd = min(dd, 1.0-dd); float d = length(dd*aspect...) — uv square so fine. v += uValue * exp(-(d*d)/(uR*uR)) * uRate; } clamp v to [-3,3]; gl_FragColor = vec4(v,0,0,1); uDecay per frame = exp(-dt/τ).

4. statsMat: input spin: R=σ, G=flipFlag(B ch of spin), B=bond e = -0.5 σ (Σσ_n), A=σ·paritySign. → into statsRT.

5. reduceMat: samples 4 texels of source (2x2 box): needs source size uniform: gl_FragColor = avg of 4 taps at uv offsets ±0.25/srcSize. Chain statsRT→red0→...→red[k]=1×1. Then readPixels(red_last, 1 float RGBA... renderer.readRenderTargetPixels(rt, 0,0,1,1, buf) with Float32Array(4). readRenderTargetPixels with FloatType RT works in three r170 when type matches (it checks).

Tiles

• InstancedBufferGeometry from BoxGeometry(1,1,1) scaled in VS by (pitch·0.84, 0.34, pitch·0.84).
• Actually apply scale in VS: pos = position * vec3(tileW, tileH, tileW).
• VS as planned. uSpin sampler NEAREST.
• FS as planned with palette uniforms: uUpCol, uDownCol, uFlashCol, uAFM, plus uGlow (ambient boost).
• Lighting: fake diffuse + slight specular from view? Keep: float l = 0.55+0.45*max(dot(n, L),0.) + fresnelish rim using vViewDir... need view dir: compute in VS worldPos, pass; rim = pow(1-max(dot(n,V),0),3)0.35upColMix. OK.

Glow plane: PlaneGeometry(WORLD,WORLD) at y=-0.19, FS computes walls with AFM parity transform, veins = wall density; also flip flash from G; plus soft radial mask (fade at border 2%); emissive color: mix(vec3(0.0), veinColor(amber-white), v)·uVeinInt; also slight blue-shift at AFM? Keep amber-white. Tone: output HDR values up to ~3 for bloom.

Coils: two tori radius WORLD·0.42, tube 0.09, at y=±1.35, axis Y. Material MeshStandardMaterial metalness .9 roughness .3 + emissive uniform-driven — standard material emissive updated per frame: coilMat.emissive.setHex(...) intensity = |H|·1.6. Plus inner glow ring (additive torus slightly larger) — skip, bloom handles. Beams: two cylinders (radius top/bottom = coil radius·0.8, height 1.35-0 → actually between coil and sample edge), additive, opacity 0.05+0.1|H|, color by H sign. Simple ConeGeometry open-ended... use CylinderGeometry(r, r, h, 48, 1, true) with additive transparent shader fading along height. Cheap: MeshBasicMaterial with opacity, no shader. OK.

Frame/cryostat: 4 vertical posts at corners (BoxGeometry 0.12×1.6×0.12 at (±W/2+0.25, ±...) metallic; two horizontal square rims at y=±0.28? The crystal is at y=0 with tile height 0.34 → top tiles at 0.17+pop. Rim rings at y=±0.30 slightly larger than crystal: use 4 boxes each. Add small emissive strip on the outer frame showing temperature color (cold blue→hot red)! thermo strip: a thin box along the frame edge, emissive = palette(t/5). Nice feedback. Make it 4 thin boxes forming a square at y=+0.34, emissive intensity 1.2 — under bloom it'll read as a glowing temperature halo. And frost particles when T<1.2? skip.

Floor: CircleGeometry(26) at y=-2.2, custom shader: radial gradient #0a0d16→#04060a, grid lines every 1 unit (fract), faint radial rings, plus "light pool": additive uniform color uPool (avg spin color · walls?) — implement pool as separate additive plane (CircleGeometry(6)) at y=-2.19 with radial gradient alpha, color uniform from stats. Dust motes points.

Background stars? Lab vibe — skip stars; keep vignette darkness.

Post: same as sibling: composer HalfFloat MSAA(4 on high tier, else 0 — set at init from tier), bloom (strength 0.85, radius .5, threshold .55), grade pass (CA+vig+grain+sat), OutputPass.

Camera: fov 42, pos (6.2, 5.0, 7.4), target (0,0,0). Controls damping, minDistance 4, maxDistance 30, maxPolarAngle 1.45.

HUD:

• top-left: title "CRITICAL POINT", sub "ISING FERROMAGNET LAB · 045".
• top-right stats panel: rows: TEMP T (with marker ❄→Tc→🔥 styled bar), FIELD H, MAG M (or M_stag), ENERGY E/site, WALLS %, FLIPS/S. Also Tc indicator line inside T bar.
• bottom-left: chart canvas 280×160 with label + mode toggle hint.
• bottom-center: controls bar: presets chips (Critical, Quench, Hysteresis, Néel AFM, Writing), sliders T, H, brush, buttons: Sweep⏵, Pause, AFM/FM, Mute, Snap, Help.
• toast center-top.
• help overlay (hidden div).
• flash div for snapshot.

Sim loop per frame:

Stats math on CPU:

Presets apply:

Init for AFM: random (it'll order into checker). "checker" init helps see it instantly — use init 'random' but T drops fast; fine either way — use 'random' for honesty.

quench preset: set T target 1.55 but also animate T from 4.5 instantly? Quench = sudden: T current=4.5 → target 1.55 with fast rate (T lerps at 3/s). Also randomize spins at apply. Sizzle audio.

Keyboard: 1-5 presets, Q quench (instant randomize + T drop to 1.55 from current), A anneal, C chart toggle, J FM/AFM toggle, B brush clear (zero brushRT), R re-randomize, Space pause, M mute, S snapshot, H help, +/- brush size, [ ] T nudge? keep minimal.

Toast + help: sibling style.

Audio specifics:

Keep implementation compact.

Chart drawing:

sinh: (e^x - e^-x)/2.

Auto-quality: fps EMA; if fps<42 for 3s → tier down (rebuild sim at lower N: keep spins? rebuild init random — acceptable: toast "quality adjusted"); if >55 for 10s and tier<max → up. TIERS: [{N:320,sweeps:5,pr:2.0,samples:4},{N:256,sweeps:4,pr:1.5,samples:4},{N:192,sweeps:3,pr:1.25,samples:0},{N:128,sweeps:2,pr:1.0,samples:0}]; initial: mobile→2 else 1. MSAA samples set at composer creation — recreate composer on tier change (sibling recreated sim targets; composer recreate also fine — wrap in function).

N=320: aCell count 102400 instances — fine.

Actually careful: reduce passes count = log2(N): 320 not power of two! Reduction halving requires power-of-2. Use N ∈ {128,192?} no — must be 2^k: {128,256}. Tiers: high 256×(sweeps 5), med 256 sweeps 3... or high=256, low=128. Only 2 lattice sizes; differentiate also by pixelRatio & sweeps: TIERS = [{N:256,sweeps:6,pr:2,msaa:4},{N:256,sweeps:4,pr:1.5,msaa:4},{N:128,sweeps:3,pr:1.25,msaa:0},{N:128,sweeps:2,pr:1,msaa:0}]. Good — N always 2^k.

doFlipFlag stats texture channel mapping: statsMat reads cur.b (flip flag). But flip flag persists across the whole frame (max over sweeps) ✓ since later passes preserve B=1.

After stats reduction, next frame's first pass resets B. ✓

Reading time channel G for tiles: flip anim uses mod-128 time. In metroMat flip: g = mod(uTime, 128.0). Tile VS: float ft = texture2D(uSpin, cuv).g; float age = mod(uTime - ft + 128.0, 128.0); if(age>64.) age=64.; float e = clamp(age/uFlipDur,0.,1.); ✓ init g = -1000 → age = mod(uTime+1000+128,128) — random-ish in [0,128): could be <64 → spurious initial anim. Set init g = mod(uTime,128) - 64? uTime at init ~0 → g=-64: age = mod(0+64+128,128)=64 → old ✓. Use g=-64.

Edge: uTime grows beyond float precision after hours — fine.

Paint raycast: raycaster from camera through pointer to plane y=0: intersect mathematical plane (no mesh needed): ray.intersectPlane(new Plane(vec3(0,1,0),0), v3) → uv = (x/WORLD+0.5, z/WORLD+0.5); valid if in [0,1]. Note texture v axis: my tiles map aCell→world as wp=(aCell/N-0.5)·W → x=aCell.x, z=aCell.y → uv.x = x/W+.5 ↔ cell.x ✓; cell.y = v·N ↔ z ✓ consistent.

Brush ring indicator: torus/ring at paint point, radius = brushRadius·WORLD, on plane y=0.05, color amber/cyan by sign, visible while painting or hovering crystal. Reuse sibling ringMat pattern.

Sign of brush: LMB = +1 (write "up"/amber), Shift or RMB = −1 (cyan). contextmenu prevented.

Brush clear: B key → clear brushRT via a clear pass (value 0) or re-create. Use init brush pass with uClear uniform in brushMat? simplest: renderer.setRenderTarget(brushRT[i]); renderer.setClearColor(black); clear() — but RT cleared to (0,0,0,0) ✓ both.

Also randomize spins: run initMat into both spinRTs.

Hysteresis chart: while sweep on, chartMode auto 'MH'.

The one risky piece: readRenderTargetPixels with FloatType — three r170: readRenderTargetPixels checks texture type and uses readPixels with FLOAT — requires EXT_color_buffer_float (already required for sim). OK. Provide guard: wrap in try/catch, fallback zeros (stats just won't update... rather fallback to CPU estimate? If float RTs unsupported the whole sim fails → show a fallback message overlay "WebGL2 float buffers unavailable". I'll add try/catch at init render test: render one pass, readPixels; on error → overlay message. Good citizenship.)

Let me also double-check the tile VS flip rotation direction mapping: rotate around local X axis by ang: position.yz rotation: y' = y cosθ - z sinθ; z' = y sinθ + z cosθ. At θ=π: top face (y+) → y-: bottom up ✓ shows col(-σ) during the tumble ✓.

Colors:

• upCol: amber #ffb347 → HDR 1.4×? Use vec3(1.0,0.62,0.22)·1.35.
• downCol: steel cyan vec3(0.16,0.55,1.0)·1.25.
• sideCol: mix*0.4 dark.
• flashCol: white-gold vec3(1.5,1.3,0.9).
• veins: vec3(1.35,1.05,0.65) · intensity.
• bg #05070c; floor subtle indigo.

Accent CSS: amber #ffb454; secondary cyan #5fd0ff. Buttons etc.

Index card text: write compelling description.

Alright — also the chart: reading stats every 0.15s gives 6.7 samples/s, smooth enough.

HUD T bar: gradient bar from blue→white→red with marker; and Tc tick at 2.269 position ((2.269-0.5)/4.5=39.3%).

Let me now write the code. Structure the file:

Length target ~1300-1600 lines. I'll write it in 5 chunks of ~250-330 lines each.

Careful points:

• All DOM ids consistent.
• No TS syntax.
• Every material's shaders compile — I'll extract and validate with glsl parser; GLSL1-style (attribute/varying/texture2D/gl_FragColor). The parser (@shaderfrog) handles ES 1.00. But three injects #version 300 es+defines... for PARSING I validate my source only (without three's prefix). texture2D etc. parse as function calls — fine.
• Use precision highp float;? three adds precision automatically. Adding my own would duplicate → skip (sibling shaders don't add).
• In VS for tiles I need uniforms uSpin, uN, uTime, uWorld, uFlipDur, uPop; attributes aCell; plus standard position/normal/uv from box geometry. three provides modelMatrix, viewMatrix, projectionMatrix, cameraPosition uniforms in ShaderMaterial ✓.
• vNormal transform: normal is object-space; I rotate in object space then treat as world (no model rotation; mesh at identity) ✓. Lighting in world space fine.

One more design decision — sim visible "sweep speed": at 4 sweeps/frame·60fps = 240 sweeps/s: from random at Tc equilibrates in seconds ✓. Low T coarsening will crawl (real physics!) — quench preset: sweeps 6 + "fast-forward" key F (×4 sweeps while held? nice: add FF button) — add "⏩ FF" toggle that multiplies sweeps ×4 (to 16-24/frame — 256²·48 passes = 3.1M frag·cheap ops — fine).

fps meter small in stats panel.

Now — writing. I'll be careful about:

• mod with negative in GLSL: mod(x,y)=x-y*floor(x/y) — always positive for y>0 ✓ (uTime-ft+128 can be negative? uTime-ft: ft=mod(uTime,128) ≤ uTime for uTime≥0 → uTime - ft ≥ 0... actually ft = mod(uTimeNow,128) stored earlier; later uTime' ≥ uTimeNow → uTime' - ft ≥ 0 mostly; rounding edge: add +128 anyway ✓).
• checkerboard parity: cell coords from floor(vUv*uN) — vUv from fullscreen quad corners 0..1; fract edge case at exactly 1.0 → floor = N → mod parity wrong but NEAREST sample at uv=1 wraps to 0 via REPEAT... For the QUAD the corners at uv=1 sample texel N (wraps to 0? REPEAT: texel fetch with fract → cell 0) — parity computed as floor(1.0·256)=256 mod 2 = 0 vs wrapped cell 0 parity 0 ✓ consistent enough at exact edge (float rarely exact 1.0 inside pixels; texel centers are (i+0.5)/N ✓ always inside).

fsQuad: PlaneGeometry(2,2) with camera OrthographicCamera(-1,1,1,-1,0,1); vUv = uv attribute → for PlaneGeometry(2,2) uv spans 0..1 ✓.

• THREE.PlaneGeometry(2,2) has position spanning -1..1 with uv 0..1 ✓. Vertex shader for passes: varying vec2 vUv; void main(){ vUv = uv; gl_Position = vec4(position.xy, 0., 1.); } ✓.

• RT options: { wrapS/T: RepeatWrapping for spin (torus sampling), minFilter/magFilter Nearest, format RGBA, type: floatType, depthBuffer:false, stencilBuffer:false, generateMipmaps:false }.

• brush RT: ClampToEdge + Nearest. brushMat handles wrap distance manually anyway (torus distance for splat continuity at edges) ✓.

• stats RT + reduce RTs: ClampToEdge + Nearest.

• readRenderTargetPixels signature: (renderTarget, x, y, width, height, buffer) ✓.

Time to write files. I'll create /tmp/critical/ and write part files. Let me draft the JS mentally with care around a few functions then write.

Key functions:

Sim uniforms shared object:

metroMat uses simU directly (shared uniform objects are fine since material.uniforms references them).

initMat: {uN, uSeed, uMode, uTime} → spinRT. brushMat: {uBrushTex, uDecay, uPos, uR, uValue, uPaint, uN? not needed}. statsMat: {uSpin, uN}. reduceMat: {uSrc, uSrcSize}.

rebuildSim(N): dispose old RTs; create spinRT[2], brushRT[2], statsRT, reduceRTs (sizes N/2..1); simU.uN.value=N; buildTiles(N); initSpins(currentInitMode); clearBrush.

buildTiles(N): dispose old; cells Float32Array(NN2); InstancedBufferGeometry; mesh; frustumCulled=false.

Tiles material:

VS:

Hmm — wait: at rest e=1 → ang=0 ✓; pop=0 ✓; vFlash=0 ✓.

Scale before rotation? I scale after rotation: rotation of a unit box then non-uniform scale distorts rotation? Rotating then scaling: the box tumbling appears to morph (since scale y≠x,z the rotation happens in unit space then squashed — visually a squashed tumble, acceptable? Better: scale FIRST then rotate: pos = positionvec3(pitch0.86, 0.34, pitch*0.86); then rotate yz; then translate. Rotation after scaling is rigid ✓. Do that. Also normals after non-uniform scale need inverse-transpose; with rotation after scale, normals: n' = R·(n / scale-ish)... simpler: since scale is axis-aligned, apply to normal: n2 = normalize(vec3(n.x/sx, n.y/sy, n.z/sz)) then rotate. Box normals are axis-aligned unit vectors; scaling then renormalizing: for axis normals it's exact. Do: nrm = normalize(nrm / vec3(sx,sy,sz)); then rotate. ✓

FS:

side mix darkens edges ✓.

Glow plane FS:

Wait w: (1 - c*n) ∈ {0,2}; ×0.125 → sum/8∈[0,1] ✓ (4 taps ×2 max = 8).

The plane sits at y=-0.19; tiles bottom at -0.17 ✓ visible through 14% gaps.

Also add subtle "energy aura": fine as is.

Floor shader:

Pool glow plane: additive radial: alpha = exp(-rr4)0.35uTint.

Coils & frame standard materials — but emissive needs per-frame update: coilTop.material.emissive — use single material for both coils: coilMat = MeshStandardMaterial({color:#2a2f3a, metalness:.85, roughness:.35, emissive: 0x000000}); per frame: coilMat.emissive.copy(Hcolor).multiplyScalar(|H|1.8) and bloom picks it. Also coil "current" pulse: multiply (1+0.1 sin(t7)). ✓ plus beams opacity.

Thermo strip: thermoMat = MeshBasicMaterial({color}) set per frame: palette: T<1: deep blue; 1..Tc: blue→violet→amber; >Tc orange→red; use simple lerp stops; intensity via color scale (MeshBasic color HDR values >1? color values >1 allowed via multiplyScalar — with bloom will glow ✓).

Frame posts: MeshStandardMaterial metal.

Dust: Points with PointsMaterial size 0.02 additive opacity 0.35, drift in tick via positions? Cheaper: static positions + shader time offset — use PointsMaterial + CPU drift 300 points each frame (cheap) or custom shader. I'll do a tiny ShaderMaterial points with time-based wander (like siblings' dust): positions static, vertex adds offset = vec3(sin(t*0.1+seed)...) — pass seed via position.w? Use attribute aSeed float. alpha twinkle. Simple.

Environment: PMREM RoomEnvironment for the metal frame reflections (sibling pattern) — scene.environment = pmrem.fromScene(new RoomEnvironment(renderer)).texture. Keep.

Lights: ambient 0.25, key directional (2.5, 4, 3) intensity 1.2, rim point light cyan low. No shadows (perf; fake AO via shading). Sibling used no heavy shadows mostly... fine.

Composer rebuild on tier change: dispose & rebuild (function buildPost()).

Pointer handling:

Continuous painting while held: paintPending each frame while pointer down and moving or stationary? While held: yes, keep painting at current uv (stationary hold deepens field) ✓ nice.

uValue per frame = sign · strength · dt·3 (rate) — but brushMat adds value*exp(...) each frame; with decay it saturates ~ value·τ_rate... fine clamp ±3. uBrushScale in metro = 1 (brush tex holds actual h values). Brush strength differs per preset (writing preset: faster rate).

Sliders: T slider input → state.tTarget; H slider → state.hTarget (disabled while sweep on; sweep writes H + updates slider position display).

Anneal schedule: state.anneal = {phase times} implement in tick:

Quench (Q): initSpins('random'); T current jumps to 4.5 then target 1.55 with fast lerp? For drama: state.T=4.5 (instant), tTarget=1.55, Tlerp rate 2.2/s; sizzle audio; toast "QUENCHED".

Snap detection: Mbuf EMA; if (prevM - M) > 0.06 within one stats tick while T<Tc·0.95 → snap(). Also camera nudge: state.snap=1 decaying; camera offset applied as tiny random shake in render loop (add to camera position temporarily... simpler: controls.object.position add jitter each frame scaled by snap·0.02 — but OrbitControls overwrites position from spherical each update? It maintains position; adding small offsets each frame is OK visually (controls.update recalculates from its internal state — actually OrbitControls keeps position as source of truth; adding offset then update() will treat it as real position drift — with damping it self-corrects; a tiny 0.02 jitter is imperceptible as drift ✓). Sibling 042 did "camera shake" similarly? whatever, small jitter fine.

FF (fast-forward): key F or button toggles state.ff → sweepsEff = sweeps·4. Toast "time-lapse".

Now HUD ids: #hud (title), #stats (rows with ids st-t, st-h, st-m, st-e, st-w, st-f, tbar fill #tfill, Tc tick), #chartWrap (canvas#chart, label#chartLabel), #controls (buttons), #toast, #help, #flash, #fallback.

Buttons: preset chips ×5 (data-preset), then sep, sliders: T (input range 0.5–5 step .01, id slT), H (−1..1 .01, slH), brush (0.02–0.12, slB); sep; buttons: FF(bFF), Sweep(bSweep), Pause(bPause), FM/AFM(bMode), Mute(bMute), Snap(bSnap), Help(bHelp). Also chart toggle is key C + click on chart canvas.

Stat readout format: M with sign: "+0.83". E: "-1.42". walls: "12.4%". flips/s: "1.2M".

Audio ticks: schedule inside tick loop using flips EMA — but ticks must not exceed audio node spam: cap 5/frame.

The fallback overlay: #fallback hidden; shown if init test fails: message.

Init test: after building sim: run initSpins + one metro pass; readPixels on spinRT[0] 1px; wrap try/catch; also check renderer.capabilities.isWebGL2 and float color buffer ext: renderer.extensions.has('EXT_color_buffer_float'). three r170: renderer.extensions.has exists? There's renderer.extensions.get(...). Use get('EXT_color_buffer_float') truthy check; floatType = ext ? FloatType : HalfFloatType. Test render in try/catch anyway.

Now, chart:

Onsager: function onsagerM(t){ if(t>=TC) return 0; const s=Math.sinh(2/t); return Math.pow(Math.max(0,1-Math.pow(s,-4)), 0.125); } ✓.

Chart in MH mode: x from -1..1 → px.

History push on stats tick: {x: state.T (or H), y: |M| (or M)}.

Also draw faint "Tc" label and tick in MT mode; in MH mode draw axis labels.

Sizes: canvas CSS 280×160; attribute ×dpr scaling ctx.scale(dpr,dpr).

Also inside stats panel add a mini legend of current mode: "ISING · FM" / "ISING · AFM (staggered)".

Help content: table of keys + interactions.

Toast function: text + sub, fade.

I think the design is complete and solid. Total code ~1400 lines. Let me write the files now.

File plan:

• /tmp/critical/p1.html — doctype→style→body divs→importmap→script open→imports→utils→TIERS→state (HTML+CSS ~230 lines)
• /tmp/critical/p2.html — renderer/scene/camera/lights/env + SIM block (RTs, shaders, passes, rebuild, tiles build) (~330 lines)
• /tmp/critical/p3.html — scene dressing (floor, pool, frame, thermo, coils, beams, glow plane, ring, dust) (~230 lines)
• /tmp/critical/p4.html — post + chart + audio (~260 lines)
• /tmp/critical/p5.html — UI bindings, pointer, presets, stats loop, animate, snapshot, resize (~330 lines)

Then: cat > index.html; extract module JS → node --check; extract GLSL template strings → parse; run physics CPU test in node (separate test script, not shipped).

Writing p1 now. CSS modeled on sibling but amber/cyan themed.

One more consideration for #controls — with 5 preset chips + 3 sliders + 7 buttons it gets wide; sibling used flex-wrap max-width — OK, group: presets row + controls row via flex-wrap naturally.

Slider styling: minimal (accent-color). Sibling didn't have sliders in 030 but others did. Use <input type="range"> with accent-color: var(--accent).

Let me write. I'll be extra careful with JS syntax since I can only validate with node --check (module). Also must ensure all IDs referenced exist.

Actually also: mobile — #chartWrap hide on small screens? keep, it's 280px — fine, position bottom-left, controls bottom-center may overlap on phones: media query: chart moves above controls? Simply: on <700px width, chart canvas smaller (200×110) and stats panel compact. OK.

Also OrbitControls import + RoomEnvironment import.

Let me write p1.

*******************************************************************************************************************************************************d).

A progress checkpoint — 54% of time used?? That's odd — the turn just started... The time progress 0.54 suggests more than half of some max time elapsed. I should hurry. Let me write the remaining parts quickly, then validate and deploy.

Note: buildTiles() is referenced in rebuildSim — defined in p3. tNow too. Let me write p3 (tiles + scene dressing), p4 (post, chart, audio), p5 (UI, pointer, presets, loop) efficiently.

Part 4: post-processing, chart, audio. Note: in buildTiles I reference tileMat before its let tileMat = null; declaration (TDZ!). In p3, buildTiles function body references tileMat, and let tileMat = null; is AFTER the function definition but BEFORE any call — since buildTiles is only called later (from rebuildSim), TDZ is fine as long as let tileMat executes before the first call. Order in final file: buildTiles defined, then let tileMat = null; executes, ... later rebuildSim() called in p5 → OK ✓. But wait — rebuildSim is defined in p2 and references buildTiles (hoisted function in module scope — function buildTiles is hoisted, fine) and tileU (const in p3, defined before rebuildSim is CALLED) ✓.

Also in tileU I used uN: simU.uN — shared uniform object ✓ so tile shader uN updates automatically. uAFM shared too ✓. uTime in tileU is its own object; glowU.uTime = tileU.uTime shared ✓. I'll update tileU.uTime.value = tNow each frame.

Metro pass uses simU.uTime set in simTick ✓.

Now p4: post-processing (composer build + grade pass), chart (Onsager overlay, MH loop), audio engine.

Part 5: UI bindings, presets, pointer handling, stats/HUD updates, main loop, snapshot, resize. Then concatenate, extract JS, node --check, write the physics validation test, deploy, update index.

Key items in p5:

• presets array + applyPreset
• toast()
• pointer handlers with raycast to plane y=0
• keyboard
• stats interval + HUD update
• chart history push
• snap detection
• auto-quality
• animate loop with tNow
• snapshot
• resize

Careful details:

• tNow is referenced in simTick (p2) — must be declared with let tNow = 0 BEFORE simTick runs (it's called in animate; declaration anywhere at module top-level before animate() runs is fine due to let hoisting+TDZ — as long as let tNow line executes before first simTick call ✓ p5 comes after p2, and animate() is called at end of p5 — OK).
• renderer.getRenderTarget used in clearBrush — fine.
• applyPreset indexes 0..4.
• modeTag update.
• slH disabled state while sweep.
• HUD update 4-5 Hz.
• chart click toggles mode.
• help show/hide.
• fallback test: after rebuildSim, run one metro pass + readStats try; wrap in try/catch → show fallback.

Pointer math: raycaster.setFromCamera(ndc, camera); ray.intersectPlane(planeY0, v3). THREE.Plane(new Vector3(0,1,0), 0). uv = (p.x/WORLD+0.5, p.z/WORLD+0.5) — wait texture v axis: tiles map aCell.y→z ✓ (wp.y is z). And brush uv sample at same uv. Glow plane PlaneGeometry rotated -PI/2: its uv maps (0,0) bottom-left → world (-W/2, +W/2)? For plane rotated x=-90°, uv v=0 is at +z or -z? PlaneGeometry lies in XY facing +Z; rotated -90° about X: +Y becomes -Z... point (x,y,0)→(x, 0, -y·?) rotation by -90°: y→ -z? Rotation matrix about X by θ=-π/2: y' = y cosθ - z sinθ = z... let me just: vertex (0, 1, 0) (uv v=1) rotated: y'=cos(-90)*1 - sin(-90)*0 = 0; z' = sin(-90)*1 + cos(-90)*0 = -1. So v=1 → z=-1. So glowPlane uv (0.5,1) = world z=-W/2. But tiles: aCell.y=0 → z=-W/2, and tile uv v = (aCell.y+0.5)/N ≈ 0 → v=0 at z=-W/2. Mismatch: glow plane v=1 at z=-W/2 while tile/sim v=0 at z=-W/2 → the glow plane is V-FLIPPED relative to tiles!

Also brush: raycast uv = (x/W+.5, z/W+.5) → cell.y = vN ↔ tile aCell.y = vN ↔ z = (aCell.y/N-.5)*W ✓ consistent for brush+metro (both use same texture coordinates as tiles) ✓. But glowPlane's built-in uv attribute differs → must flip v in glow plane FS: use vUv but sample with vec2(vUv.x, 1.0-vUv.y)? Simpler: rotate glowPlane.rotation.x = -Math.PI/2 then also set rotation.z? Let me just flip in shader: vec2 suv = vec2(vUv.x, 1.0 - vUv.y); and use suv everywhere. Same for the mask computation (symmetric anyway).

Wait — actually let me double check plane uv orientation: PlaneGeometry uv (0,0) is bottom-left vertex (-1,-1) i.e., (-W/2,-H/2) before rotation. After rotation.x=-π/2: (x, y) → (x, 0, z'=?): rotation about X by angle θ: [y'; z'] = [y cosθ − z sinθ; y sinθ + z cosθ]. θ=-π/2: cos=0, sin=-1: y' = -z·(-1)=z·1? For point in plane z=0: y' = y·0 - 0·(-1) = 0 ✓ (flat). z' = y·(-1) + 0 = -y. So (x,y)=(−W/2,−H/2), uv=(0,0) → world (−W/2, 0, +H/2). uv v=1 (y=+H/2) → z=−H/2 ✓ as computed. So yes: flip v. I'll handle in glow FS via vec2 uv = vec2(vUv.x, 1.0 - vUv.y);.

Hmm, but I already wrote the glow FS without the flip — I'll patch p3 with replace or just fix when concatenating... I'll do a sed fix on p3: in glow FS void main(){ first line uses vUv directly. Easiest: replace float c = physSpin(vUv); — every use of vUv in glow FS. I'll rewrite those lines via replace_in_file: add vec2 suv = vec2(vUv.x, 1.0 - vUv.y); at main start and replace vUv→suv in the FS body only. The FS body lines:

• float c = physSpin(vUv);
• four physSpin(vUv ± ...) lines
• vec4 sc = texture2D(uSpin, vUv);
• vec2 b = min(vUv, 1.0 - vUv) * uN; (symmetric, flip irrelevant but keep consistent) Do targeted replacements.

Actually wait — also brush ring position: ring placed at world (x, 0, z) from raycast — that's world space, no uv issue ✓.

And pool/floor shaders don't sample sim textures ✓.

Now also verify the metro shader wrap: neighbor taps vUv ± tx — REPEAT wrap on spinRT ✓ set in makeRT for spin.

One more correctness check on Metropolis: I update only parity-matching cells; dE = 2·s·(Σnb + h) — ΔE for flipping s→-s: E terms: -s(Σnb + h) → +s(Σnb+h), ΔE = 2s(Σnb+h) ✓.

exp(-dE/T): GLSL exp fine.

Stats readback → state.M etc. HUD shows:

• stT: state.T.toFixed(3) (2 decimals enough? show 3: "2.269")
• tFill width: (T-0.5)/4.5 %
• tcTick left: (TC-0.5)/4.5 %
• stH: (H>=0?'+':'') + H.toFixed(2)
• stM: label "magnetization M" or "staggered M" in AFM; value with sign + |Mphys| note? Just M value.
• stE: toFixed(3)
• stW: (walls*100).toFixed(1)+'%'
• stF: flips per second: flipsPerFrame·N²·fps → format K/M.
• stL: ${N}² · ${sweepsEff}×
• stFps

modeTag: 'FM · J = +1' / 'AFM · J = −1 (staggered σ)'.

Presets:

applyPreset(i): set tTarget=T (and state.T = hot? hot : T immediately? for quench: state.T = preset.hot, tTarget = preset.T with tRate 2.2; else state.T jumps? Make T ramp smoothly: state.T stays, tTarget set; for hot starts set state.T=hot instantly). H: hTarget=H; state.H=H. sweep flag. afm: if changed → toggle via setAFM. init: initSpins(preset.init). clearBrush. chart mode set. brush radius/rate overrides. slT.value = T; slH.value = H. chips active class. toast(name, sub). hist.length=0.

setAFM(v): state.afm = v; simU.uAFM handled in simTick from state; modeTag update; bMode text.

Sweep: in tick: if sweep: state.sweepT += dt; phase = (sweepT/period)%1; tri = phase<0.25? phase*4 : phase<0.75? 1-(phase-0.25)*4 : -1+(phase-0.75)4; state.H = trisweepMax; slH.value = state.H; (hTarget ignored).

Keyboard mapping as planned. Space toggles pause (bPause active class). F toggles ff. W sweep. J toggle afm. C chart. R initSpins(0) toast. B clearBrush. Q quench: initSpins(0); state.T=4.5; tTarget=1.55; sizzle; toast('QUENCHED','domains coarsening — walls carry the energy'); A anneal: state.annealT0 = tNow; toast('ANNEAL CYCLE','heating, then slow cool'); M mute (button class), S snapshot, H help toggle.

Pointer:

Ring: position.set((uv.x-0.5)W, 0.06, (uv.y-0.5)W); scale.setScalar(brushRadiusW... RingGeometry outer r=1 → scale = brushRadius·WORLD (uv units→world: ×WORLD). Wait uv radius 0.055 → world 0.0558=0.44 ✓ scale 0.44·? ring inner 0.94 outer 1.0 — scale = r_world. ✓ color by brushSign: amber 0xffb454 / cyan 0x5fd0ff.

Note the canvas is under panels — e.target check: pointer events on the document/window? Attach to renderer.domElement — panels have z-index and will receive their own events (canvas won't get pointerdown when clicking panels ✓ since panels are above and have pointer events auto). #hud/#stats have pointer-events:none ✓. So no need for closest() check ✓.

Touch: pointerdown with pointerType touch → same painting path; two-finger: OrbitControls handles touches; but we disabled controls while painting... For touch: painting starts on single touch on crystal; second finger then won't orbit since controls disabled until pointerup. Acceptable (sibling morphogenesis similar).

idle/auto-rotate: track lastInteraction; in loop: controls.autoRotate = (tNow - lastInteraction > 10) && !state.painting.

Stats scheduling: every 0.15s call readStats() + push chart hist + HUD update (HUD at 0.25s maybe combined: do both at 0.15s). flips/s: state.flips is fraction of cells flipped during that FRAME (the frame in which readStats ran — the last sim frame). flips/s ≈ state.flips · N² · fps · (running?1:0)... per frame fraction f → per second = f·fps. At high T, f per frame with 4 sweeps ~ 4·0.5·? Display "flips/s" = f·fps·N². EMA activity = f·fps? state.activity EMA of f per stats tick: activity = lerp(activity, f, 0.2).

Snap detection: prevM vs M: if prevM - M > 0.05 && T < TC*0.95 → audio.snap(); state.snap = 1. Also only when running.

Camera shake: in loop: if state.snap>0.01: camera.position.x += (rand-0.5)0.05snap etc.; snap = exp(-dt4).

Audio ticks per frame: expected = state.flips·N²·dt·0.002 cap 5; but state.flips updates at 0.15s cadence — use EMA activity: ticks = activity·N²·dt·0.002... At critical: f per frame maybe 0.1·4sweeps? each sweep flips ~50% of candidates at high T... f (fraction of ALL cells flipped in a frame) at T=5 with 4 sweeps: each sweep ~50% of sublattice flips → per frame both sublattices ×4 sweeps → but B is "flipped at least once this frame" fraction → saturates near ~0.9. ticks = 0.9·65536·0.016·0.002 ≈ 1.9/frame ✓ reasonable. At low T ~0.001 → 0.002/frame — sparse ✓.

Anneal:

Hmm tTarget reaches 1.2 exactly at e=18 then stays ✓.

T lerp: state.T += (tTarget - T)·min(1, dt·state.tRate). tRate default 1.2; after quench use 2.5 (set on Q), reset to 1.2 when close? Just keep tRate=2.5 always? Slider drags would lag 0.4s — feels fine (thermal inertia!). Keep 2.0.

H lerp similar rate 3/s.

Thermo strip color:

simpler piecewise: c1 cold (0.10,0.25,0.9), c2 at Tc (0.75,0.35,0.85), c3 hot (1.0,0.35,0.12). T<Tc: lerp c1→c2 by (T-0.5)/(Tc-0.5); else c2→c3 by (T-Tc)/(5-Tc). Set thermoMat.color.setRGB(...).multiplyScalar(1.6).

Coil emissive: h=state.H; col = h>=0? (1.4,0.7,0.25) : (0.3,0.75,1.3); intensity |h|·1.8·(0.9+0.1 sin t·7). coilMat.emissive.setRGB(col)·multiplyScalar(intensity). beamMat.color same family; beamMat.opacity = 0.02+0.09|h|.

Pool color: average spin color: mix uDown/uUp by (M·0.5+0.5) physical (AFM: Mphys), dimmed + veins tint: poolU.uColor = lerp; intensity 0.3+walls. Also floorU.uTint similar dimmer.

fps + auto quality: fpsEma; every 2.5s evaluate: if fpsEma<42 && tier>0 → tier--; rebuildTier(); toast('quality adjusted'); if fpsEma>56 && tier<3 && stable for 8s → tier++. rebuildTier(): renderer.setPixelRatio(min(dpr, pr)); rebuildSim(TIERS[tier].N); buildPost(); update stL. NOTE rebuildSim randomizes spins — acceptable with toast.

Wait — rebuildSim calls buildTiles + initSpins(0) — that wipes the crystal. Hmm, jarring but with toast OK. Sibling did same.

Snapshot: same as sibling (toBlob, flash). render loop calls doSnapshot when queued, after composer.render.

Resize: camera aspect, renderer.setSize, composer.setSize, bloom.setSize? UnrealBloomPass has setSize — composer.setSize handles passes ✓ (sibling used composer.setSize presumably).

Init sequence at bottom:

readRenderTargetPixels may not throw even when failing... also check gl.getError? Keep simple try/catch + WebGL2 check: if (!renderer.capabilities.isWebGL2) show fallback.

Let me also remember $('slT') input listener → state.tTarget = parseFloat. Presets also set slT.value.

Chart label update on mode/preset: 'M–T diagram · Onsager exact solution' vs 'M–H hysteresis loop'. In AFM: 'staggered M–T · Onsager overlay'.

mLabel: 'magnetization M' / 'staggered M'.

hist push on stats tick: hist.push({x: chartMode==='MH'? state.H : state.T, y: chartMode==='MH'? state.M : Math.abs(state.M)}); if hist.length>420 shift.

For MH loop: y = state.M (signed) ✓ mapY handles.

tNow declaration: p5 top: let tNow = 0; — but p2's simTick references tNow: fine at call time.

Also state.idle unused — remove from usage; keep property harmless.

Button wiring: bFF→toggleFF, bSweep→toggleSweep, bPause→pause, bMode→setAFM(!afm), bMute→audio.toggleMute + class, bSnap→snapshot, bHelp→help toggle, helpClose→hide, presetChips buttons→applyPreset(+audio.start).

toggleSweep: state.sweep=!sweep; sweepT=0; if on → chartMode='MH' + toast('FIELD SWEEP','tracing the hysteresis loop'); bSweep class; slH disabled = sweep. chart click: chartMode toggle + label.

Also applyPreset for hysteresis sets sweep true — call the same code path to keep classes in sync: set state.sweep then update UI (bSweep.classList, slH.disabled).

Format flips:

animate():

dt used for activity EMA in stats block: state.activity = lerp(state.activity, state.flips, 0.25) (per stats tick). tick expected: activity·N²·dt·0.002: activity~0.5 → 0.5·65536·0.016·0.002 ≈ 1.05/frame ✓.

HUD text update inside stats block (6.7Hz fine).

stL update: ${N}×${N} · ${TIERS[tier].sweeps*(state.ff?4:1)} sweeps/f.

OK also slH while sweep: update slider value each frame when sweeping (done in sweep code: slH.value = state.H.toFixed(3)).

tFill: $('tFill').style.width = pct; set tcTick.style.left once at init: pct(TC).

Edge: hist x in MT mode uses state.T (current smoothed) ✓.

Fallback check at boot:

throw inside module stops rest — acceptable (fallback shown).

Wait: buildPost before rebuildSim? buildPost independent. Order: rebuildSim then buildPost. Note rebuildSim → buildTiles → uses tileMat creation + tileU. OK.

applyPreset(0, {silent:true}) at boot? Toast on boot is nice: "CRITICAL POINT — near the edge of order". Let it toast.

One more sim detail — passCounter seed: simU.uSeed = (passCounter2.13 + k17.7) % 4096 + 0.5 — hash quality: hash(vec3(cell, seed)) — seed fractional .5 + multiples of 2.13 → fract patterns vary ✓.

brush uValue: state.brushRate·dt·sign — rate 2.0/s → per frame 0.033·exp(...) — to saturate to ~±2 need hold ~1s with decay τ=7s — equilibrium ≈ value_per_sec·τ = 2·7=14 → clamps at 3 — too strong? uH global max 1 flips domains easily below Tc... brush equilibrium 3 is huge: instantly polarizes even at Tc. For "Writing" T=2.02 (<Tc=2.269): equilibrium h=3 → strong write ✓ and after brush decays (τ=7s... hmm decay τ 7s means field vanishes in ~15s; written pattern at T=2.02 persists since below Tc ✓ good). But too-strong brush at critical preset makes everything amber under brush — that's the point of a field brush ✓ fine. Scale rate by preset (writing preset rate 3.2).

Also brushRate slider? No — brush radius slider only.

updateHUD function separate for clarity.

Now write p5. Also remember to fix glow plane v-flip: I'll patch p3 after writing p5 via replace_in_file on the concatenated file? Simpler: fix p3 now in the concatenation step... The FS uses vUv 8 times. I'll do replace_in_file on /tmp/critical/p3.html for each usage within the glow FS block. The glow FS block is uniquely identifiable: it contains float parityAt. I'll replace the whole main() of glow FS. The exact text to search:

→

then replace the 4 physSpin(vUv ± ...) lines, texture2D(uSpin, vUv) line, and vec2 b = min(vUv, 1.0 - vUv) * uN;. All within glow FS — but texture2D(uSpin, vUv) also appears in... metro FS uses texture2D(uSpin, vUv) too ("vec4 cur = texture2D(uSpin, vUv);" in metro and init?). In p3, the string vec4 sc = texture2D(uSpin, vUv); is unique to glow FS ✓. The four neighbor lines unique ✓. vec2 b = min(vUv, 1.0 - vUv) * uN; unique ✓. The void main(){ vec2 tx opener unique ✓.

Hmm wait, actually is the flip needed? Tiles: aCell (0..N) → world wp = (aCell/N - 0.5)·W, so cell (0,0) at world (-W/2,-W/2) [x=-W/2, z=-W/2] and its texture uv = (0.5/N, 0.5/N) ≈ 0. So uv v≈0 ↔ z=-W/2. Glow plane: uv v=0 ↔ z=+W/2. → mismatch confirmed; flip needed ✓.

Alternatively rotate glow plane +π/2 instead of -π/2: then plane normal faces DOWN (away from camera above) — backface culled → invisible. So shader flip it is.

Also check brushRing orientation is irrelevant (symmetric ring) ✓.

One more: statsMat parity p uses cell coords — fine regardless of flips (pure texture space) ✓. Metro same ✓. Tiles sample via aCell ✓ all consistent in texture space; only the PlaneGeometry attribute uv differs ✓.

Write p5 now.

Now fix the glow-plane v-flip in p3, concatenate, extract JS, and run node --check. Also there's one TDZ issue I must check: in p2, simTick references tNow — declared in p5 with let tNow = 0 before boot — fine since simTick only called at boot (after declaration).

Another check — p3 buildTiles references tileMat before declaration let tileMat = null; — the declaration executes before rebuildSim is called (boot in p5) ✓.

Also rebuildSim in p2 references buildTiles — hoisted function declaration ✓.

In p5 boot, simTick is called before applyPreset — simTick uses state.T etc. ✓.

One issue: in dressScene I reference coils (defined in p3) ✓.

In p5 keyboard 'j' uses $('bMode').click() ✓.

Also chartCanvas.parentElement is #chartWrap ✓ (click toggles).

Note: p5 references state.idle nowhere ✓ (leftover property fine).

Fix glow FS flip now, then cat parts, extract module, node --check.

JS syntax OK. Now validate the physics with a CPU port in Node — this is the critical part since I can't see the visuals. Test:

1. Metropolis update math (same as GLSL): checkerboard parallel update, exp(-dE/T).
2. M(T) vs Onsager at several temperatures.
3. AFM mapping (σ dynamics with parity-coupled field) produces Néel order with staggered M ≈ 1 at low T and uniform M ≈ 0.
4. Hysteresis: sweep H at T=1.8, check loop area > 0 (M lags).
5. Critical: M(Tc) small for finite lattice, and above Tc ~0.

Also validate GLSL shaders with @shaderfrog parser. Install it.

Excellent — the physics core is validated:

• FM T=1.5: M=0.9864 vs Onsager exact 0.9857 ✓ (beautiful!)
• FM T=3.5: disordered ✓
• T=Tc: intermediate finite-size ✓
• Hysteresis loop area ✓
• Field polarizes at Tc ✓

AFM "failures": M_s=0.30, E=-1.93 at T=0.8 after 500 sweeps — this is just slow coarsening kinetics from a random start on 64² (checkerboard domains take long to coarsen with single-spin-flip dynamics; also possible two-sublattice domain walls). E=-1.93 means 96.5% bonds satisfied — it IS nearly ordered, just has residual domain walls, and M_s=0.30 means the AFM ordered into TWO opposite checkerboard domains of unequal size (domain structure!). That's physically correct behavior — from a random start, AFM coarsening is slow. My test thresholds were too strict for 500 sweeps.

In the demo, the AFM preset uses hot: 3.5 (start hot, cool) — same slow coarsening, BUT the demo runs ~4 sweeps/frame × 60fps = 240 sweeps/s, so in 10 seconds you get 2400 sweeps → deeper order. Also M_s displayed will grow as domains coarsen — that's actually the interesting physics to WATCH. But to give the user instant gratification, the AFM preset could start from a checkerboard init (mode 2) instead of random — showing the perfect Néel state immediately, then they can heat/quench it.

Let me adjust: AFM preset init: 2 (checkerboard in σ — wait: init mode 2 sets σ = checkerboard. But physical spin s = σ·p — if σ is checkerboard THEN s = checker·p = uniform! Careful: In AFM mode, the Néel state (physical checkerboard) corresponds to σ = s·p = uniform (all +1 or all -1). So the σ-uniform state IS the AFM ground state! Init mode 1 (all σ=+1) gives perfect Néel checkerboard in AFM display.

So for AFM preset use init: 1 (all-up σ) → displays as perfect checkerboard, M_s = 1.

Let me verify with the test: AFM with initUp → should stay ordered at T=0.8. Quick verify. Also note test shows even from random start it reaches E=-1.93 in 500 sweeps at 64² — in the demo at 128/256² coarsening is slower in absolute terms but it's a process to watch (and FF ×4 helps). Also the AFM preset has hot:3.5 start — maybe drop the hot start and just init ordered at T=0.9, so users see the crisp checkerboard; they can quench it themselves. I'll change preset 3: init: 1, remove hot.

Also update the test to check AFM from ordered start stays ordered. Quick re-run for that single check.

81% of time used — I must finish fast. Remaining:

1. Patch AFM preset init to 1 (ordered).
2. GLSL validation (quick — install @shaderfrog, parse shaders). Time is short; do a fast version.
3. Deploy to /space/demos/045-critical-point/.
4. Update index.html.
5. Final check, _success.

Let me do the preset patch + deploy + index update in a couple of batched commands. GLSL parse: do quickly; if install fails, fall back to structural checks.

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

Deployed. 50 demo-card matches (44 original + 1 new = 45 cards + blueprint-card mentions? grep counts lines containing "demo-card" — the class definition lines too). Let me do a final quick verification: the new card is in the index at the right spot, and the deployed file is intact (module extraction + node check on the deployed copy). Quick final verify then _success.

Everything is deployed and verified:

• /space/demos/045-critical-point/index.html — identical to validated source, JS syntax OK
• Index updated with the new card at the top of the list
• Physics validated against the exact Onsager solution
• 20 GLSL shaders structurally checked
• All DOM ids cross-checked

Task complete. Call _success.