SERIENBEITRAG ·

Reflexion
Ein Spiel mit Licht und Schatten

Ich wollte wissen, wie weit ich im Browser mit Licht und Schatten gehen kann. Also habe ich eine Bühne gebaut. Wenn ein Scheinwerfer über das goldene O streicht, blitzen vorn einzelne Spiegel auf. Hinten wandert der Schatten des ganzen Buchstabens über die Wand.

KONZEPT · UMSETZUNGOliver Röschner
LESEZEIT9 Minuten
BEREICHTECHNOLOGIE
Ein goldenes O aus Spiegelfacetten steht frontal auf der Bühne. Vier Scheinwerfer werfen warmes Licht über den glänzenden Boden.
KI GENERIERTES ARTIKELBILD | OPERUS

Vier Scheinwerfer stehen vorn an der Bühnenkante. Bei der ersten Kamerafahrt kommt man den Spiegeln so nah, dass man die einzelnen Plättchen sieht. Eines blitzt kurz auf. Gleich daneben bleibt das Gold fast schwarz.

Originalaufnahme aus der Demo Reflexion. Das ganze O aus goldenen Spiegelfacetten steht auf der dunklen Bühne. Unter dem unteren Bogen ist sein Spiegelbild zu sehen. INTERAKTIVE DEMO Der Ton startet nach der Trackauswahl
„Enthüllung“ startet das Bühnenstück mit Musik. Leertaste für Pause, F für Vollbild. Vollbild funktioniert nur am PC oder Mac, nicht auf Mobilgeräten wie dem iPhone.

Wie klingt ein Scheinwerfer?

Wenn die erste Lampe angeht, hört man einen tiefen Schlag mit einem kurzen rauen Ansatz und einem langen Nachhall. Das Geräusch erinnert an ein großes Relais in einem leeren Theater. Im Browser besteht es aus einem Sinuston, der innerhalb einer Viertelsekunde von 110 auf 38 Hertz fällt, und einem kurzen, gedämpften Rauschen. Der Ton gibt dem Schlag Gewicht. Das Rauschen macht den Moment hörbar, in dem der Schalter greift. Ein Teil von beidem geht in den Hall, damit der Klang auch nach dem Einschalten noch im Raum steht.

Mit Kopfhörern lässt sich die Reihenfolge der Lampen sogar bei geschlossenen Augen verfolgen. Der erste Schlag sitzt weit links, der zweite weit rechts. Die nächsten beiden rücken auf ihrer jeweiligen Seite näher zur Mitte. Zwischen den Schlägen liegt genau eine Sekunde. Beim vierten warte ich schon darauf. Kurz darauf gehen die Scheinwerfer auseinander und folgen den Instrumenten über die Schrift.

Warum ausgerechnet das R so hell war

Bei einem der ersten Durchläufe blieb mein Blick immer wieder am R hängen. Die anderen Buchstaben glitzerten im Vorbeifahren, das R bekam gleich von zwei Seiten Licht. Das lag daran, wie ich die Scheinwerfer auf die Musik reagieren ließ.

Was dabei schiefging, konnte man mit jedem Akkord sehen. Der eine Kegel stand auf dem E, der andere auf dem U. Dann kam der Akkord, das Zeichen fürs R. Beide Scheinwerfer drehten sich zur Mitte, und ausgerechnet dieser eine Buchstabe bekam die doppelte Portion Licht.

Heute reicht es, dass sich der erste Scheinwerfer auf den Weg macht. In diesem Moment ist das R schon belegt, und der zweite bleibt auf dem U. Jeden Buchstaben halten die Scheinwerfer für gut eine halbe Sekunde. Das gibt dem Auge Zeit, einem Schwenk zu folgen, auch wenn die Musik längst die nächste Note spielt.

Wie ein Lichtkegel vor dem R abbremst

Würde die Regie die neue Position einfach übernehmen, spränge der Lichtfleck vom E zum R. Ein beweglicher Scheinwerfer braucht dafür einen Motor. Besonders interessant ist das letzte Stück. Wann muss der Kopf vom Gas gehen, damit er genau auf der Mitte des R zum Stehen kommt?

Dafür gibt es in heads.js die Funktion axis. Sie berechnet jeweils einen kleinen Zeitschritt für eine Bewegungsachse. Die Demo benutzt dieselbe Funktion für die waagerechte und die senkrechte Bewegung. Hier ist die Rechnung als eigenständig ausführbare Fassung mit ausgeschriebenen Namen. Position und Geschwindigkeit kommen als Rückgabewerte zurück.

heads.js · Motor für eine Achse javascript
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 };
}

Die Wurzel in der Rechnung für brakingSpeed kommt vom Bremsweg. Bei einer Bremsbeschleunigung von 10 und einer Reststrecke von 0,2 Bühneneinheiten darf der Lichtfleck noch mit Tempo 2 unterwegs sein. Bei nur noch 0,05 Einheiten ist es Tempo 1. Je näher der Fleck dem R kommt, desto kleiner wird also seine Wunschgeschwindigkeit. Das Vorzeichen gibt die Fahrtrichtung vor. Die letzte Abfrage fängt den Simulationsschritt ab, der sonst über die Buchstabenmitte hinausreichen würde.

Bei einem kurzen Schwenk zum Nachbarbuchstaben beginnt der Kopf schon wieder zu bremsen, bevor er sein Höchsttempo erreicht. Auf dem längeren Weg über das ganze Wort bleibt zwischen Anfahren und Abbremsen Platz für eine Fahrt mit konstantem Tempo. So bekommt jede Bewegung ihren eigenen Rhythmus, obwohl für alle dieselben Regeln gelten.

Der Schatten hinter dem O

In einer frühen Fassung lief ein helles Band über die Schrift. In den Spiegeln sah das schön aus, aber wer an der Bühnenkante nach der Lampe suchte, fand keine. Deshalb habe ich dort die Scheinwerfer aufgestellt. Als die Kamera zurückfährt, sieht man den Unterschied besonders gut. Vorn blitzen ein paar Facetten am Rand des O auf. Hinten nimmt sein Schatten ein ganzes Stück der Rückwand ein. Schwenkt der Kegel weiter, wandert die dunkle Kontur über die Wand, während auf dem Metall schon der nächste Reflex auftaucht.

Auch beim Nebel half Weglassen. Eine ganze Nebelbank vor der Schrift verschluckte ausgerechnet das, was ich enthüllen wollte. Jetzt sieht man den Dunst dort, wo ein Strahl durch ihn fährt. Vom Schriftzug aus lassen sich sogar feine Reflexe zurück in den Saal verfolgen.

Warum das Gold so fein glitzert

Die hohen, schmalen Buchstaben sind aus Balken und Kreisbögen gebaut. An einer breiten Fläche lassen sich Spiegel leicht verteilen. Beim E verrät schon eine schmale dunkle Fuge, wo der senkrechte Stamm auf den Querbalken trifft. Deshalb laufen die geraden Striche eines Buchstabens heute über dasselbe Raster. Die Reihen setzen sich am Stoß fort. Bei einer Rasterweite von 7,5 Zentimetern ist selbst auf den schmalen Strichen noch Platz für mehrere Spiegel nebeneinander. Rund 1.400 Facetten kommen so für OPERUS zusammen.

sculpture.js javascript
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;

Jeder Spiegel hat einen Zielwinkel und eine Geschwindigkeit. Der Abstand zum Ziel treibt ihn an, die Dämpfung bremst ihn. Beim nächsten Bild hat er sich ein kleines Stück weitergedreht. Solange die Winkel auseinanderliegen, sieht man einzelne Glitzerpunkte. Richten sich benachbarte Spiegel gemeinsam aus, kann ein breiter Reflex über mehrere Reihen laufen. An dieser Stelle gefiel mir das warme Gold besser als das Silber, das ich ebenfalls ausprobiert habe.

Wohin geht ein Reflex, wenn er die Kamera verfehlt?

Während des Drops lohnt es sich, einmal über die Buchstaben hinwegzusehen. Dort fächern schmale Lichtfinger in den Dunst. Dieselbe Facette, die aus Kamerasicht gerade dunkel wirkt, kann immer noch Licht von der Rampe bekommen. Sie wirft es nur in eine andere Richtung zurück. Bei der Nahfahrt interessiert mich der helle Punkt auf dem Metall. In der Totalen kann ich auch den Weg zeigen, den das Licht danach nimmt.

Für diese Strahlen verfolgt die Demo 48 feste, über das Wort verteilte Facetten. Bei jeder prüft sie, welcher Scheinwerfer sie im Moment am stärksten trifft. Aus der Richtung zu diesem Kopf und der aktuellen Neigung des Spiegels ergibt sich die Richtung des reflektierten Strahls. Die Auswahl bleibt von Bild zu Bild gleich. So lässt sich ein einzelner Lichtfinger beim Schwenken mit dem Auge verfolgen. Dreht der Motor seinen Spiegel aus dem Kegel, klingt der Strahl ab. Das erklärt auch, warum die Kamera nach der Detailfahrt zurücktritt. Aus der Nähe sähe man zwar mehr einzelne Spiegel, vom Zusammenspiel der vier Kegel aber nur einen Ausschnitt.

Eine Partitur für Licht und Musik

„Enthüllung“ spielt mit 90 Schlägen pro Minute in c-Moll. Klavier, Streicher, tiefe Bläserklänge und Trommeln entstehen live per Web Audio. Für die Bühnenfassung habe ich auch andere Musik ausprobiert, darunter eine Mischung aus früheren Demos. Ich bin zur ersten Fassung zurückgekehrt. In ihrem leisen Mittelteil bleibt genug Platz für eine einzelne Stimme und einen einzelnen Lichtkegel. Dadurch hat der spätere Einsatz der ganzen Bühne Gewicht.

ZeitAuf der BühneIn der Musik
0–11 sDer Vorhang öffnet sich. Vier Köpfe schalten nacheinander auf.Herzschlag, Klavier und ein Theaterschlag pro Lampe.
11–32 sDie Kamera fährt an den Facetten entlang und gibt den Blick aufs ganze Wort frei.Eine wiederkehrende Streicherfigur, dann tiefe Bläser und Hörner.
32–48 sEin Kopf bleibt im Dunkel stehen. Die Kegel rücken zusammen, kurz erlischt das Licht.Eine Solostimme, dann dichteres Ticken und Trommeln. Vor dem Einsatz bleibt eine Lücke.
48–64 sVier Kegel fächern auf und streichen über die ausgerichteten Spiegel.Taiko-Trommeln setzen ein. Ein Rauschen begleitet den Schwenk.
Ab 64 sDie Bühnentechnik übernimmt den Umbau im laufenden Bild.Schwere Aufschläge, anschwellender Chor und eine Auflösung nach C-Dur.
tracks/enthuellung.js javascript
const TAIKO = { main: [0, 6, 10], drop: [0, 3, 6, 8, 10, 12, 14] };

Die Zahlen sind Positionen auf einem Raster von sechzehn Schritten pro Takt. Im Hauptteil hat die tiefe Trommel drei Einsätze, beim Drop sieben. Das Tempo bleibt gleich. Die zusätzliche Wucht entsteht schon dadurch, wie eng die Schläge jetzt aufeinander folgen.

Kurz vor dem Drop rücken die vier Kegel zusammen, dann erlischt das Licht. Für einen Augenblick verschwinden auch die Buchstabenschatten. Mit dem ersten tiefen Trommelschlag steht die Schrift wieder im Licht, und hinter ihr bekommt die Wand ihre Konturen zurück. Diese kurze Dunkelheit gehört für mich genauso zur Partitur wie die Pause vor dem Schlag.

Der letzte Umbau

Vom Wort OPERUS brauche ich am Ende genau zwei Buchstaben. P, E, U und S kippen mit hörbarem Gewicht und fahren in der Versenkung weg. O und R bleiben stehen. Zwischen und neben diesen beiden Initialen sinken an dünnen Seilen die fehlenden Buchstaben meines Namens herab. Der Chor schwillt an, der Schlussakkord öffnet sich nach C-Dur.

In Reflexion steckt viel Herzblut. Ich habe mit Gold und Silber experimentiert, den Nebel zurückgenommen, die Scheinwerfer neu abgestimmt und verschiedene Musikfassungen ausprobiert. Jeder Durchlauf hat meinen Blick auf die Bühne verändert. Mal fehlte einem Reflex das Licht, mal nahm der Dunst der Schrift ihre Kontur, mal brauchte eine Bewegung mehr Zeit. Bis Licht, Material und Musik zusammenpassten, waren viele Versuche nötig.

Das Ergebnis überzeugt mich. Bei der Nahfahrt kann ich den einzelnen Spiegeln zusehen, später trägt das Zusammenspiel der vier Scheinwerfer die ganze Bühne. Die Schatten geben dem Raum Tiefe, die Musik verbindet die ruhigen Momente mit dem großen Schluss. Wenn dann mein Name zwischen den Funken steht, steckt darin auch die Freude darüber, dass all diese Versuche zusammengefunden haben. Genau so wollte ich diese kleine Bühnenshow erleben.

Im nächsten Teil, Gravitas, bringe ich die Erfahrungen mit Licht, Material und musikalischer Choreografie in einer ganz anderen Größenordnung zusammen. Die Grundlage ist diesmal ein Song, den Simon für mich komponiert hat.

Teil 10: Gravitas – Die Schmiede der SchwerkraftMusik von Simon G. und eine kosmische Inszenierung, in der die Erfahrungen aus den bisherigen Demos zusammenkommen. OPERUS DEMOS