Twenty-two periodic three-body orbits, inked like calligraphy until a nudge breaks them.
Three equal masses under Newtonian gravity almost always end in chaos, yet a few special starting states repeat forever: Lagrange's rotating triangle, the figure-eight, Broucke's flowers and the butterflies, moths and yin-yangs found by Suvakov and Dmitrasinovic in 2013. Their published initial conditions were re-converged by Newton shooting until each orbit closes to about 1e-10, then integrated with a sixth-order Yoshida composition of the logarithmic-Hamiltonian leapfrog, a symplectic scheme that slows physical time near close encounters so energy stays conserved to about 1e-12. Each body writes with a broad-edge nib: every step paints the segment swept by a slanted pen tip, so strokes swell and thin with direction and pool where the body lingers. After a nudge, an untouched twin keeps the perfect orbit, and a live log plot of the distance between them shows how fast order is lost; stable orbits only wobble, while fragile ones tangle until one body is flung out and a binary is left behind.
Try it. Drag from a body and release to kick it in that direction, or click anywhere to push the nearest body gently. Left and right arrows step through the orbits, up and down change speed, N nudges, R redraws the current orbit and Space pauses. Left alone, it inks each orbit, nudges it and moves on.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animation of the famous figure-eight solution of the three-body problem with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window. Paint it a warm off-white like paper.
- Use units where G = 1 and all three masses are 1. Start the bodies at (-0.97000436, 0.24308753), (0.97000436, -0.24308753) and (0, 0). Give the middle body velocity (-0.93240737, -0.86473146) and each of the outer two half of that, negated, so total momentum is zero.
- Integrate with velocity Verlet (leapfrog) using a small fixed time step, around 0.001, and take many steps per frame. Compute all three pairwise forces each step.
- Scale world coordinates so the orbit fills most of the screen. Draw each body as a small colored dot and keep a trail by drawing onto a second canvas you never clear.
- Show the total energy and how far it has drifted from its starting value.
Once that works, make it beautiful:
- Draw the trails like a calligraphy pen: for each step, fill the quadrilateral swept by a short slanted line segment (the nib) moving from the old position to the new one, so the stroke is thick or thin depending on its direction.
- Give each body its own ink color with low opacity and use globalCompositeOperation = "multiply" so crossings darken like real ink.
- Let me click near a body to nudge its velocity, and keep an untouched copy of the system running so I can watch the two drift apart.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a higher-order symplectic integrator like Yoshida's, other periodic orbits like the butterflies and moths found in 2013, or a plot of the distance between the nudged and untouched systems on a log scale.
