Appearance
Language

Back to the overview

Showcase 18 · Chaos

Divergence

Two skies, two identical systems of three bodies pulling on each other. Left and right run exactly the same computation, step by step. In the right sky, move one body by a tiny amount. For a while both glowing trails still look the same. Then they part, and one future becomes two.

The live demo needs JavaScript. The explanation below is readable without it.

How it works

Three bodies of equal mass attract each other according to Newton; gravity is smoothed at short range so that no two bodies lock into a tight pair. An integrator advances their motion in small, fixed steps, with exactly the same numbers for both skies; without an intervention they therefore stay equal down to the last bit. When you grab a body in the right sky, it is first set back to its twin on the left; then you may move it within the dashed ring, or nudge it with the button by the chosen size across its direction of travel. The three-body problem is chaotic: every close encounter of two bodies enlarges the difference until it is as large as the system itself. A nudge a thousand times smaller only delays that moment by a few orbits.

It is drawn with Canvas 2D, without WebGL. Every body leaves a trail of its latest positions that fades with age. In the right sky, hollow rings show where the bodies would be without the nudge; the line to them is the distance. It is given as a share of one sky's width, and “Apart after” counts the seconds until it exceeds 5 %. So that no body disappears for good, a soft edge brings it back; that edge exists only on the stage, not in physics. With reduced motion nothing animates; after a nudge, both skies are computed at once up to just after the moment they part and drawn as a still picture. All colours come from the design tokens.