Tap and drag across the houses; each scene plays differently
Mapped
A projection mapping show on the guild houses of Ghent’s Graslei, played live in the browser. Write a melody on the windows and watch the light follow it.
Projection mapping turns buildings into screens, and it is the kind of work I love most: light that knows the shape of the stone it lands on. Mapped brings a full show to a screen. A row of guild houses stands by the canal at night, a crowd waits on the quay, and the projector starts by aligning itself to the facades.
How it works
The waterfront is generated, not drawn: stepped, bell and spout gables, windows, ledges and every single brick are measured once, so each scene knows exactly where the architecture is. Light is mixed the way it behaves on real stone. Each scene paints into a projection layer that is multiplied by how much light every surface sends back, so brick turns colour warm and glass stays dark. A separate glow layer lights the windows from inside, and the canal reflects the whole frame in wavering strips.
Five scenes play to a 108 BPM house groove that is synthesised as it plays: Trace, Windows (a 16-step sequencer you can see), Bricks (which spell my name), Tide and Paint. One clock drives both sound and picture, so every beat lands on the facade at the same moment you hear it. Open Play to write your own notes on an 8 × 16 grid or play them live from the keyboard, and each one lands on the buildings at its step and pitch. In camera mode your shadow is cast across the houses.
Built with
- Canvas 2D compositing (multiply and additive layers, a down-scaled bloom pass)
- Web Audio API: drums, bass, chords and per-scene voices, scheduled ahead on the audio clock
- MediaPipe selfie segmentation, on-device, for the camera shadow
- Astro and TypeScript, no images or audio files