Appearance
Language

Back to the overview

Showcase 11 · Orbital mechanics

Orbits

Hundreds of points circle a shared centre on their own orbits in real time, drawn as a gently tilted disc. As with planets, an outer lap takes longer than an inner one: angular speed falls with the square root of the orbital radius, exactly as Kepler's third law demands. Move the pointer across the stage to shift the centre; it follows the cursor with a soft delay.

The live demo needs JavaScript and canvas. Every explanation on this page reads without them.

How it works

Every point starts with its own radius, its own phase and a speed that scales with the square root of that radius, the relation from Kepler's third law. That is why the inner orbits rack up noticeably more laps. Position is a pure function of time: each frame adds the elapsed time and derives the location on the tilted orbital plane, drawn with a short trail of recent positions. There is nothing more to it: no physics loop, no collisions, no per-frame randomness. The colours come from the design tokens and follow the light or dark appearance; the pointer only sets the target the shared centre eases towards.