The Tokamak
The story behind The Tokamak
Inspired by Tokamak on Wikipedia
Built with Three.js · Custom GLSL volumetric raymarcher · UnrealBloomPass · Fullscreen triangle + OrthographicCamera · 96 raymarch steps/pixel
Techniques Analytical torus SDF · Helical coordinate system (safety factor q) · FBM density modulation · Kink-mode perturbation · Temperature-to-emission mapping · Slab AABB ray intersection with blue-noise jitter · Pointer-variance stability estimator
Direction You are the field. Your steadiness is the confinement. Waver and the star escapes.
Result A violet-white plasma torus suspended in a dark reactor, glowing hotter the longer you hold still, rippling and flaring when you wobble, and crossing into ignition (Q > 1) after a handful of seconds of steady hands
The Story
A tokamak is a donut of hydrogen plasma hotter than the core of the sun, held in mid-air by a helical magnetic field. The plasma is fully ionized — protons and electrons flying freely — and because it’s charged, it spirals along field lines instead of crossing them. Get the field geometry right and the plasma can be held away from any solid wall for long enough to fuse. Get it wrong, and the plasma is lost in milliseconds. The physics is finicky in a very specific way: the field must be near-perfectly rotationally symmetric, because any asymmetry creates instabilities — kink modes, tearing modes, disruptions — that dump the plasma’s energy into the machine all at once.
We have been this close to net-positive fusion for decades. JET got to Q ≈ 0.67 in 1997. JT-60 briefly hit Q ≈ 1.25 in 1998 with deuterium-deuterium. NIF (a laser inertial-confinement device, not a tokamak) crossed Q > 1 in 2022. ITER, the 25-billion-dollar tokamak under construction in France, is expected to reach Q ≈ 10 in the mid-2030s. The whole endeavor is an extended exercise in holding something steady. Every failure mode comes from a failure of symmetry.
This experience puts you on the wrong side of that equation. You are the field. The only thing the plasma needs from you is stillness.
The Take
At page load you see a dim violet torus hanging in a dark reactor chamber. The HUD on the left reports a low plasma temperature (0.3 keV), a short confinement time (τ < 1s), a middling field symmetry, and a status of subcritical. Move your cursor and those numbers fluctuate. The asymmetry index on the field shudders; the plasma ripples; confinement time resets.
Then you stop moving.
Within a second or two the symmetry reading climbs toward 99%. The plasma begins to brighten. Temperature ticks up — 1, 3, 6 keV. A status change: confined · below threshold becomes heating. After about three seconds of steady hand, the Q factor crosses 1.0, the state flips to ignited, and a quiet caption drifts in overhead: ignition · Q > 1.
Now the challenge is to keep it. Lift your finger from the trackpad; rest the mouse on the desk. The plasma hums. Q climbs past 2, past 5. The helical striations on the torus surface become visible — those faint radial bands rotating around the ring, each one a field line holding one strand of charged particles. You can see the texture of the containment.
Move your cursor aggressively. The symmetry drops. A kink mode ripples around the torus. The plasma flares, stutters, and then — if you kept wobbling too long — disrupts: a white flash, the readouts crash, and the state reads disruption. You have to start over.
The Tech
A fullscreen triangle + one heavy fragment shader
The entire scene is a single fragment shader. Three.js provides a framebuffer, an OrthographicCamera covering clip-space (-1, -1) to (1, 1), and a single triangle covering the whole viewport (cheaper than two triangles, since there’s no diagonal to split at). Everything else — geometry, lighting, plasma, camera — lives in GLSL.
The analytical torus, in coordinates
A torus has a natural coordinate system: toroidal angle (the angle around the main axis), poloidal angle (the angle around the tube cross-section), and ρ (the normalized radius from the tube axis). Given a 3D point, those three values are cheap to extract:
vec2 q = vec2(length(p.xz) - R, p.y); // poloidal cross-section offset
float d = length(q); // distance from tube axis
float thp = atan(q.y, q.x); // poloidal angle
float tht = atan(p.z, p.x); // toroidal angle
float rho = d / r; // normalized tube radius
With these in hand, everything else is arithmetic. The helical field coordinate is helix = thp + q_safety × tht, where q_safety is the safety factor (≈ 1.9 here, matching a real tokamak design — field lines make 1.9 poloidal turns per toroidal turn). The plasma is then a product of three factors: a confinement profile peaked at ρ = 0, a 3D value-noise FBM sampled along the helix (this produces the turbulent internal texture), and a fine-scale stria cos(14 × helix) that makes the spiral structure visible.
Cursor jitter → symmetry → plasma stability
A ring buffer holds the last 500 ms of cursor positions. The variance of those positions maps to a symmetry score in [0, 1]: low variance (still hand) ≈ 99% symmetry, high variance (wobble) ≈ 10%. The symmetry score is smoothed into a uStability uniform passed to the shader.
In the shader, 1 - uStability becomes an instability factor that perturbs the torus geometry itself: a sin(3 × tht) modulation of the minor radius (three bumps around the tube), a second sin(5 × tht) harmonic, and — above an instability threshold of 0.25 — a quadratic sin(2 × tht + thp) kink mode that actually deforms the cross-section. The plasma you see bulging and rippling is the shader applying cursor-derived perturbations to the field geometry.
Volumetric raymarching
For each pixel: intersect the ray with the axis-aligned bounding box around the torus (cheap slab test); step through the interior at 96 uniform intervals (48 on mobile); at each step sample the plasma density and temperature; accumulate emission weighted by density and a (0.35 + temp × 1.6) boost, while transmittance falls by exp(-density × stepSize × 0.7). Early-out when transmittance drops below 0.008. Per-pixel noise jitter masks the banding that otherwise appears at 96 steps.
Temperature-to-color
A four-stop gradient maps plasma temperature to emission color: deep violet (cool), magenta-pink (warm), pink-white (hot), near-white with a violet halo (very hot). Each sample along the ray is weighted toward the hotter end by the current running temperature uniform — so at low plasma temperature the whole ring looks cool violet, and at high temperature the core glows near-white with violet falling off to the edge.
Why it’s not melting
96 × 1440 × 900 = 125 million raymarch steps per frame. At 60 fps that’s 7.5 billion sample evaluations per second. Each evaluation samples 3 layers of FBM (4 octaves each), does a few trig ops, and contributes a color. Modern integrated GPUs handle this at 60 fps with room to spare; older mobile GPUs fall back to 48 steps and a lower DPR. The bounding-box slab test is important — without it you’d raymarch empty space from the camera to the torus and back, which at 96 steps per pixel is wasted compute. With it, the steps are concentrated inside the region that can actually contain plasma.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.