The Figure Eight That Keeps Falling

The N-Body Gravity sketch cycles through a figure-eight choreography, a toy solar system, binary stars, and a cluster preset, then lets you throw fresh masses into the mix. It is a quick way to watch stable-looking motion turn numerical and contingent.

The n-body problem has always had a dramatic pitch: give a set of gravitating bodies their initial positions and velocities, then try to predict what happens next. Wikipedia's historical summary gets the broad stakes right when it traces the problem back to Newton's attempt to understand why real planetary motion departs from the clean closure of the two-body case. Once three or more bodies start tugging on each other, exact elegance narrows fast. The general problem becomes numerical, approximate, and often chaotic.

That is why the first preset in this sketch matters so much. Richard Montgomery's long-running page on the classical n-body problem still uses the figure-eight solution as its headline example: three equal masses chasing each other along one closed curve under mutual gravitation. The configuration became famous after Alain Chenciner and Richard Montgomery proved its existence in 2000, because it looked like a miracle inside a domain better known for instability. The sketch opens there and then immediately places that rare order beside less obedient systems. Click through the presets and the point becomes obvious. Gravity does not usually compose itself into symmetry for very long.

You can see the simulation making that compromise between physical law and tractable approximation in gallery/nbody.html:

for (let i = 0; i < bodies.length; i++) {
  for (let j = i + 1; j < bodies.length; j++) {
    const a = bodies[i], b = bodies[j];
    const dx = b.x - a.x, dy = b.y - a.y;
    const dist2 = dx * dx + dy * dy + SOFTENING * SOFTENING;
    const dist = Math.sqrt(dist2);
    const F = G * a.mass * b.mass / dist2;
    const fx = F * dx / dist, fy = F * dy / dist;
    a.ax += fx / a.mass; a.ay += fy / a.mass;
    b.ax -= fx / b.mass; b.ay -= fy / b.mass;
  }
}

The extra SOFTENING term tells the truth about digital physics. A browser sketch cannot afford singularities, so close encounters get rounded before force spikes to infinity. The integrator is velocity Verlet, which is a sensible compromise because it keeps the motion looking plausible without pretending to analytic purity. That choice gives the piece its texture. Trails bloom across the canvas, bodies trade momentum, and the whole system feels lawful right up to the moment when one new mass or one bad near-pass turns order into scatter.

I like this artifact because it does not sell chaos as mysticism. It shows something simpler and more useful. Stable motion is often local, conditional, and bought through approximation. The figure-eight preset looks almost ceremonial, then the binary stars begin slinging planets into wider arcs, and the random cluster starts writing a different story entirely. What the sketch makes visible is not just gravity. It is the difference between a law, a solution, and a simulation, which is exactly where so much creative coding gets interesting.