3 magnets · 1.0×
The Magnetic Pendulum paints the famous fractal basins of attraction entirely in a GLSL fragment shader on your GPU. Each pixel is a starting position for an iron bob swinging over a ring of magnets; the shader integrates its damped motion and colours the pixel by which magnet finally captures it. Tiny changes in the start point can flip the destination — so the boundaries between coloured regions are infinitely tangled. Adjust the magnet count, strength, gravity, friction and integration quality, then scroll and drag to explore the fractal edge.
A deterministic system that is nonetheless unpredictable: identical physics, but the magnet a bob settles on swings wildly with the starting position. The coloured regions are the basins of attraction; their fractal borders are the geometric fingerprint of chaos.
Pick 3 or 4 magnets, then tune strength, gravity/spring (k), friction and height. Raise integration steps for cleaner basins (slower). Scroll to zoom toward the cursor and drag to pan into the boundary; Reset view restores the full plate.
At a basin boundary, all magnet colours meet at every scale. A nudge of one pixel — or one atom — can change which magnet wins. That is sensitive dependence on initial conditions, the heart of chaos theory.
Each pixel is a different release point for an iron pendulum bob hovering over a set of magnets. The shader simulates where the bob ends up and colours the pixel by that magnet. Regions of the same colour are a basin of attraction, and the tangled fractal lines between them mark start points whose fate is exquisitely sensitive to position.
The pendulum's motion is chaotic: trajectories that start arbitrarily close together can diverge and swing toward different magnets. Because this happens at every scale, the dividing lines between basins never smooth out — zooming in always reveals more interleaved colour, the hallmark of a fractal and of sensitive dependence on initial conditions.
Magnet strength sets the pull of each magnet; gravity/spring (k) is the restoring force toward the centre; friction damps the motion so the bob eventually stops; height softens the magnets so the bob never hits a singularity. Integration steps controls simulation quality versus speed.
The shader runs the full simulation loop for every pixel, every frame. More steps means more accurate capture detection and crisper basins, but also far more GPU work. The step count is capped at 400 so the image stays interactive even on modest hardware; bump it up for a cleaner picture if your device can handle it.
Yes — it uses a Three.js WebGL renderer with a custom GLSL fragment shader. Any modern phone or laptop with WebGL support will run it. The pixel ratio is capped at 1.5× to keep frame rates high on high-DPI screens. If the canvas is blank, your browser may have hardware acceleration disabled.