Showcase 14 · Shadow puzzle
The Empty Throne
An empty hall, a single candle. Between the candle and the wall, swords, hilts and stone rubble hang on chains, seemingly without order. Drag the candle across the floor: from exactly one angle their shadows join on the wall into a throne. One step further and it falls apart again.
The live demo needs JavaScript. The explanation below is readable without it.
- Shadows
- –
- Match
- –
- Fragments
- –
- Frames/s
- –
How it works
First the throne stands on the wall as a flat silhouette: seat and steps made of stone blocks, the back a fan of swords. Then every fragment is lifted off the wall and moved towards a hidden point in the room, each to a different depth and with a different tilt. Its corners stay on the rays from that point to their place on the wall. When the candle stands exactly there, every shadow falls into place and the throne is complete; anywhere else the shadows drift apart at different speeds, because the fragments hang at different distances from the wall.
It is drawn with Canvas 2D, without WebGL. Every frame, each fragment is projected from the flame onto the wall, the floor and the side walls and clipped at their edges. A flame is not a point light, so the shadows come from several points on the flame; their edges get softer the further a fragment hangs from the wall. The candlelight itself falls off with the square of the distance and is computed at a lower resolution and scaled up smoothly. The match measures how far the shadows of all corners lie from their place in the silhouette. All colours come from the design tokens.