Reflexion
A Play of Light and Shadow

Four spotlights stand along the front edge of the stage. On the first camera move, you get close enough to see the individual mirror tiles. One flashes for a moment. Right beside it, the gold stays almost black.

INTERACTIVE DEMO ▶Start demo Sound starts after choosing a track

What does a spotlight sound like?

When the first lamp comes on, you hear a low thump with a brief, rough attack and a long reverberant tail. It sounds like a large relay in an empty theatre. In the browser, it consists of a sine tone that drops from 110 to 38 hertz within a quarter of a second, plus a short burst of filtered noise. The tone gives the thump its weight. The noise makes the switching moment audible. Some of both signals goes into the reverb, so the sound lingers in the room after the lamp comes on.

With headphones, you can follow the order of the lamps even with your eyes closed. The first thump sits far to the left, the second far to the right. The next two move closer to the centre on their respective sides. There is exactly one second between thumps. By the fourth, I am already waiting for it. Shortly afterwards, the spotlights spread out and follow the instruments across the lettering.

Why the R was so bright

During an early run, my eye kept returning to the R. The other letters glittered as the light passed, but the R was lit from two sides at once. That came from the way I had made the spotlights respond to the music.

You could see the problem with every chord. One beam was on the E, the other on the U. Then came the chord that cued the R. Both spotlights turned towards the centre, and that one letter received twice the light.

Now, the moment the first spotlight starts moving, the R is already reserved, and the second stays on the U. The spotlights hold each letter for a little over half a second. That gives the eye time to follow a sweep, even when the music has already moved on to the next note.

How a beam slows down before the R

If the lighting controller simply adopted the new position, the light would jump from E to R. A moving spotlight needs a motor to get there. The last part of the journey is particularly interesting. When does the head have to ease off to stop exactly at the centre of the R?

The axis function in heads.js handles this. It calculates a small time step for one axis of movement. The demo uses the same function for horizontal and vertical movement. Here is a self-contained version of the calculation with the names written out. It returns the new position and speed.

function moveAxis(position, speed, target, maxSpeed, acceleration, dt) {
  const distance = target - position;
  const brakingSpeed = Math.sqrt(2 * acceleration * Math.abs(distance));
  const wantedSpeed = Math.sign(distance) * Math.min(maxSpeed, brakingSpeed);

  const limit = acceleration * dt;
  const change = Math.max(-limit, Math.min(limit, wantedSpeed - speed));
  const nextSpeed = speed + change;
  const step = nextSpeed * dt;

  if (step * distance >= 0 && Math.abs(step) >= Math.abs(distance)) {
    return { position: target, speed: 0 };
  }
  return { position: position + step, speed: nextSpeed };
}

The square root in brakingSpeed comes from the stopping distance. With a braking acceleration of 10 and 0.2 stage units left to travel, the light can still move at a speed of 2. With only 0.05 units left, that drops to 1. The closer the light gets to the R, the lower its desired speed becomes. The sign determines the direction of travel. The final check catches the simulation step that would otherwise overshoot the centre of the letter.

On a short sweep to the neighbouring letter, the head starts braking before it reaches its top speed. On the longer journey across the whole word, there is room to travel at a constant speed between accelerating and slowing down. Each movement gets its own rhythm, even though they all follow the same rules.

The shadow behind the O

In an early version, a bright band moved across the lettering. It looked beautiful in the mirrors, but anyone looking for the lamp at the edge of the stage would find nothing. That is why I put the spotlights there. As the camera pulls back, the difference is especially clear. At the front, a few facets along the edge of the O flash. Behind it, its shadow occupies a large part of the back wall. As the beam sweeps on, the dark outline moves across the wall while the next reflection is already appearing on the metal.

Reducing the fog helped, too. A whole bank of it in front of the lettering swallowed exactly what I wanted to reveal. Now you see the haze where a beam passes through it. You can even follow fine reflected rays from the lettering back into the auditorium.

Why the gold glitters so finely

The tall, narrow letters are built from bars and circular arcs. Mirrors are easy to distribute across a broad surface. On the E, even a narrow dark seam reveals where the vertical stem meets a horizontal bar. That is why the straight strokes of each letter now share the same grid. The rows continue across the joints. With a grid spacing of 7.5 centimetres, even the narrow strokes have room for several mirrors side by side. OPERUS contains around 1,400 facets in total.

b.v += (k * ((b.t ?? 0) - b.h) - c * b.v) * h;
if (b.v > speed) b.v = speed; else if (b.v < -speed) b.v = -speed;
b.h += b.v * h;

Each mirror has a target angle and a velocity. Its distance from the target drives it, while damping slows it down. In the next frame, it has turned a little further. As long as the angles differ, you see individual points of glitter. When neighbouring mirrors align, a broad reflection can sweep across several rows. Here, I preferred the warm gold to the silver I also tried.

Where does a reflection go when it misses the camera?

During the drop, it is worth looking above the letters. Narrow fingers of light fan out into the haze. A facet that looks dark from the camera can still receive light from the front of the stage. It simply reflects it in another direction. In the close camera pass, I am interested in the bright point on the metal. In the wide shot, I can also show where the light goes next.

For these rays, the demo tracks 48 fixed facets distributed across the word. For each one, it checks which spotlight currently illuminates it most strongly. The direction towards that head and the mirror's current tilt determine the reflected ray's direction. The selection stays the same from frame to frame, allowing the eye to follow a single finger of light during a sweep. When the motor turns its mirror out of the beam, the ray fades. This also explains why the camera pulls back after the detail pass. From close up, you would see more individual mirrors, but only part of the interplay between the four beams.

A score for light and music

“Enthüllung” plays at 90 beats per minute in C minor. Piano, strings, low brass and drums are generated live with Web Audio. I also tried other music for the stage version, including a mixture of earlier demos. I returned to the first version. Its quiet middle section leaves enough room for a single voice and a single beam of light. That gives the later entrance of the whole stage its weight.

const TAIKO = { main: [0, 6, 10], drop: [0, 3, 6, 8, 10, 12, 14] };

The numbers are positions on a grid of sixteen steps per bar. In the main section, the low drum has three hits; during the drop, it has seven. The tempo stays the same. The extra force comes from how closely the hits now follow one another.

Just before the drop, the four beams converge, then the light goes out. For a moment, the letters' shadows disappear too. With the first deep drumbeat, the lettering returns to the light and the wall behind it regains its contours. For me, this brief darkness belongs to the score just as much as the pause before the beat.

The final scene change

At the end, I need exactly two letters from OPERUS. P, E, U and S tip over with audible weight and descend below the stage. O and R remain. Between and beside those two initials, the missing letters of my name are lowered on thin cables. The choir swells, and the final chord opens into C major.

I put a lot of heart into Reflexion. I experimented with gold and silver, reduced the fog, retuned the spotlights and tried different versions of the music. Every run changed the way I saw the stage. Sometimes a reflection needed more light, sometimes the haze blurred the lettering's outline, sometimes a movement needed more time. It took many attempts to get light, material and music working together.

I am happy with the result. During the close pass, I can watch the individual mirrors; later, the four spotlights work together across the whole stage. The shadows give the space depth, and the music connects the quiet moments to the grand finale. When my name finally stands among the sparks, there is also the joy of seeing all those experiments come together. This is exactly how I wanted to experience this little stage show.

In the next part, Gravitas, I bring together what I have learned about light, materials and musical choreography on a very different scale. This time, the foundation is a song Simon composed for me.