How to build
a constellation

The concept

One building, seen all at once

The Centennial is the final room and the map of every room before it. Its central metaphor is architectural astronomy: each website becomes a luminous door orbiting a shared axis, so different subjects read as one deliberate constellation. Black space provides silence; spectral colour behaves like light caught on the edge of a dark material. The visitor does not browse a grid first. They fly alongside a structure, meet rooms by proximity, and summon any name or idea.

The text sections below the flight turn spectacle into evidence. Measurements describe the imagined building, four registers explain the exhibition’s evolution, a curator’s night log supplies human observation, and the final plaque changes the voice from technical to monumental. The static index keeps all ninety-nine doors readable without WebGL, search or motion.

The visual system

Ninety-nine planes, one draw call

In main.js, createAtlas() draws a ten-by-ten canvas texture. All ninety-nine cells receive local JPEG portraits: the shared collection supplies rooms 001–050 and Centennial’s own captured portraits complete rooms 051–099. drawProcedural() paints a deterministic provisional cell before each image decodes, so the tower is never blank. Every tile receives the same accession frame, number and name, turning radically different pages into one collection.

setupWebGL() feeds that atlas to a single Three.js InstancedMesh. A custom vertex shader combines each plane with its instanceMatrix and chooses the correct atlas cell through instanceTile. The fragment shader adds a thin iridescent edge and two live attributes: instanceGlow for the nearest or searched room, and instanceVisibility for dimming the rest. Two line geometries reveal the double-helix spine; a capped point field supplies depth.

readScroll() converts progress through the tall flight section into a value from zero to one. render() eases the camera down the tower while orbiting its axis and updates the nearest plaque. Pointer raycasting exposes an instanceId, making the planes genuine links. Search builds matchIndices; matching matrices then interpolate toward the current camera while nonmatches recede. At the finale, initialiseFinalSignal() resolves all ninety-nine sources into a tactile golden-angle star field. When the tab is hidden the animation frame is cancelled. Reduced-motion mode removes perpetual rotation and renders only on interaction.