Showcase 13 · Three-body problem
Three Suns
You are standing on a world with three suns. They pull on each other, and no path ever repeats; every sun casts its own coloured shadow. Depending on how much light reaches the ground, calm, frost or scorching heat sets in. Grab a sun in the sky and drag it somewhere else: once you let go, gravity takes over.
The live demo needs JavaScript and WebGL 2. The image shows the plain under three suns; the explanation below is readable without them.
- State
- –
- Suns in the sky
- –
- Light on the ground
- –
- Render resolution
- –
- Frames/s
- –
- Physics
- WebGL 2 · Verlet
How it works
The three suns are three bodies of equal mass that attract each other according to Newton. An integrator advances their motion in small steps. They start on the famous figure eight, one of the few stable solutions of the three-body problem. Even a small intervention breaks it, and the motion turns chaotic: it can be computed, but not predicted for long. So that no sun disappears for good, a soft edge brings it back; that edge exists only on the stage, not in physics.
The world hangs above the suns' plane and turns, so they rise and set. Ground, hills and stone slabs are a single formula that a fragment shader samples for every pixel (raymarching). Every sun gets its own shadow ray, so each slab casts up to three shadows in the suns' colours. The light on the ground slowly adds up to a warmth: with little light, rime forms; with a lot, cracks in the ground glow. This is an artistic translation, not a climate model. All colours come from the design tokens.