The Precession
The story behind The Precession
Inspired by Paraconical pendulum on Wikipedia
Built with Pure WebGL2 · RGBA16F FBO ping-pong · Separable Gaussian bloom · CPU Kepler orbital mechanics
Techniques Kepler ellipse equation · Apsidal precession · SDF line-segment capsule · Sub-stepped physics (8/frame) · Additive trail accumulation · Hue-cycling color
Direction Approach the orbit. Watch what your presence does to its path.
Result A glowing orbit that distorts into an ellipse when you approach, then precesses into a spirograph rosette — a luminous record of your gravitational interference
The Story
In 1954, Maurice Allais set up a paraconical pendulum — a pendulum whose fulcrum is the contact point of a ball resting on a flat surface — in a basement laboratory in Paris. His plan was to run it continuously during a total solar eclipse on June 30th. What he recorded made no sense. As the Moon’s shadow passed overhead, the pendulum’s plane of oscillation shifted by an amount that couldn’t be explained by any known gravitational calculation. The Moon and Sun were accounted for. Something else was rotating the pendulum’s axis.
Allais spent the next forty years trying to get anyone to replicate and explain his observation. Some attempted it; a few claimed similar anomalies. No conventional theory of gravity predicted the effect. General relativity doesn’t produce it. Newtonian tidal forces are orders of magnitude too small. The “Allais effect” remains unexplained — not definitively confirmed, not definitively debunked. A measurement that sits in the gap between what we can observe and what we can explain.
The broader phenomenon — apsidal precession — is well understood in celestial mechanics. An orbiting body traces an ellipse, and the long axis of that ellipse slowly rotates. Mercury’s perihelion precession was one of the first confirmations of general relativity. But the paraconical pendulum offered something stranger: precession driven by an unidentified source. As if something invisible was warping the orbit, and the only evidence was the rosette it left behind.
This experience makes you that invisible source.
The Take
A single luminous point orbits in a circle at the center of the screen. Its trail glows cyan, fading to violet, cycling through magenta — a continuous hue rotation marking how far the orbit has traveled.
The prompt says “approach the orbit.” As you move your cursor toward the orbit’s path, something changes. The circle flattens into an egg — an ellipse. The closer you sit to the orbit ring, the more eccentric the ellipse becomes, stretching to a 10:1 periapsis-to-apoapsis ratio at full influence. Your proximity is the anomaly. You are the unaccounted-for mass in the equation.
But eccentricity is only half the effect. The axis of the ellipse is also rotating — precessing — proportional to how strongly you’re perturbing the orbit. Each time the bob completes a revolution, it starts the next one tilted by about 90 degrees. After three or four orbits, overlapping ellipses at different angles have drawn a flower. A rosette. The spirograph pattern that Allais’s pendulum traced on its recording paper.
The trail persists. Each petal fades slowly but remains visible long enough for the full rosette to emerge. The color cycling means each orbit is a different hue — cyan, then violet, then magenta, then back — so you can trace the chronology of the pattern. The earliest petals are dimmer and cooler. The freshest ones are vivid.
Move your cursor to different positions along the orbit ring and the rosette reshapes itself. The ellipse tilts toward you, so changing your approach angle creates petals in new directions. Over thirty seconds of slow exploration, the screen fills with an intricate Lissajous-like web of overlapping luminous loops — a complete record of everywhere you stood and how long you lingered.
Get too close to the center and the orbit collapses inward — a death spiral as the semi-major axis shrinks and the angular velocity spikes. The bob spirals into the focus and vanishes. Then: “the anomaly was yours.”
The Tech
Pure WebGL2 — No Scene Graph
No Three.js. The entire experience is a fullscreen quad rendered with four shader programs and a pair of RGBA16F framebuffers. The CPU handles orbital mechanics; the GPU handles trail accumulation, bloom, and compositing. This keeps the rendering pipeline minimal — four draw calls per frame plus eight sub-stepped physics draws.
Kepler Orbital Mechanics
The bob position comes from the standard Kepler ellipse equation:
r = a(1 - e²) / (1 + e·cos(θ))where a is the semi-major axis, e is eccentricity, and θ is the true anomaly. The bob’s screen position is then:
x = cx + r·cos(θ + ω)
y = cy + r·sin(θ + ω)where ω is the argument of periapsis — the angle of the ellipse’s long axis. Precession means ω increases over time, rotating the entire ellipse.
Cursor Influence
The influence function peaks when the cursor sits exactly on the orbit ring (at distance baseR from center). It’s a Gaussian centered at normalized distance 1.0:
influence = exp(-(normDist - 1)² × 3)This means the cursor has maximum effect when it’s near the orbit path — not at the center, not far away, but right where the bob passes. Inside the orbit, a weaker secondary influence kicks in. Too close to the center triggers a death spiral.
Eccentricity targets influence × 0.82 and converges at 12× per second — effectively instant. The precession rate is influence × 0.8 × eccentricity, producing roughly 90° of axis rotation per orbit at full influence.
SDF Line-Segment Trail
Each physics sub-step draws a capsule-shaped line segment between the previous and current bob positions using a signed distance function:
float sdSegment(vec2 p, vec2 a, vec2 b) {
vec2 pa = p - a, ba = b - a;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0.0, 1.0);
return length(pa - ba * h);
}The core is a tight 3px Gaussian (exp(-d²/4.5)) and the glow is a wider 14px halo (exp(-d²/120)). Eight sub-steps per frame eliminate gaps between dots that would appear with single-step rendering.
FBO Ping-Pong Trail Accumulation
Two RGBA16F framebuffers alternate roles. Each frame:
- The previous trail is faded by 0.999 (half-life ≈ 11.5 seconds at 60fps)
- Eight sub-stepped line segments are drawn with additive blending
- The buffers swap
The slow fade means trails from 5+ orbits ago are still visible at 40%+ brightness, allowing the full rosette to emerge as a coherent pattern rather than a single fading loop.
Dual-Pass Bloom
The trail buffer is downsampled to half resolution and blurred with two separable Gaussian passes at different radii (1.8px and 3.5px), creating a soft outer glow. The final composite adds the bloom at 1.2× intensity, applies a vignette, and tone-maps with a Reinhard-style curve (col / (col + 0.7)).
Mobile Idle Demo
On mobile (touch-only), an automatic idle demo kicks in after 1.5 seconds. A virtual cursor slowly orbits the ring, triggering the same influence, eccentricity, and precession as a real cursor would. The rosette builds itself automatically, giving mobile users the full visual without requiring precise touch targeting.
Source: Paraconical pendulum on Wikipedia