600 Chromkugeln werden zum Orchester

In Museen und großen Hallen gibt es kinetische Skulpturen, deren einzelne Kugeln an Motoren hängen. Gemeinsam werden sie zu Wellen, Flächen und räumlichen Figuren. Für die Kinetik-Demo wollte ich dieses Prinzip als Instrument in den Browser holen, das die Musik in jedem Bild neu formt.

Rund 600 Chromkugeln hängen an feinen Stahlseilen über schwarzem Glas. Kick, Bass, Snare, Akkorde, Melodie und Hi-Hats besitzen jeweils einen eigenen Ring. Spielt ein Instrument, hebt sich seine Zone, nimmt Farbe an und spiegelt ihr Licht in die benachbarten Kugeln. Aus einem Raster wird ein Orchester.

INTERAKTIVE DEMO ▶Demo starten Der Ton startet nach der Trackauswahl

Die Grundidee klingt einfacher, als sie technisch ist. Jede Kugel soll einzeln reagieren, trotzdem dürfen 600 Objekte den Browser nicht überfordern. Die Bewegung muss präzise genug für eine Kick sein und weich genug, um wie eine mechanische Installation zu wirken. Chrom braucht glaubwürdige Spiegelungen, dünne Seile dürfen im Bild nicht verschwinden, und die Musik muss den visuellen Zustand reproduzierbar steuern.

Ein Mischpult, das im Raum hängt

Die Kugeln liegen in einem Raster von 28 mal 28 Positionen, werden aber kreisrund beschnitten. Übrig bleiben ungefähr 600 Punkte. Ihre Entfernung zur Mitte entscheidet, zu welcher Instrumentenzone sie gehören: Kick innen, danach Bass, Snare, Akkordfläche und Melodie; ganz außen sitzen Hi-Hats, Klicks und Arpeggien.

Diese Aufteilung macht das Bild lesbar. Eine Kick hebt die Mitte schnell an. Ein langer Basston hält den nächsten Ring oben. Die Snare erzeugt einen kurzen, scharfen Sprung. Akkorde lassen eine breite Zone langsam atmen. Melodietöne erscheinen als wandernder Bogen, dessen Winkel aus der Tonhöhe entsteht. Außen zucken einzelne Kugeln zu den schnellen Ereignissen.

600 Motoren als gedämpfte Federn

Die Kugeln springen nicht direkt auf ihre Zielhöhe. Jede besitzt einen eigenen Zustand aus Position, Geschwindigkeit und Zielwert. Eine gedämpfte Feder zieht sie zum Ziel, während eine Höchstgeschwindigkeit verhindert, dass starke Impulse unkontrolliert werden. Die Simulation läuft intern in kleinen Teilschritten von 1/240 Sekunde. Dadurch bleibt sie auch dann stabil, wenn ein sichtbares Bild später kommt als geplant.

const force = (target - height) * stiffness;
velocity += force * step;
velocity *= Math.pow(damping, step * 60);
velocity = clamp(velocity, -maxSpeed, maxSpeed);
height += velocity * step;

Die Abstimmung ist ein Kompromiss. Zu viel Dämpfung lässt eine Kick träge wirken. Zu wenig Dämpfung macht aus der Skulptur ein zitterndes Gummituch. In der fertigen Fassung erreicht die Mitte ihre Kick-Höhe in ungefähr 80 Millisekunden und schwingt nur leicht nach. Lange Noten halten ihren Ring oben; kurze Ereignisse fallen sofort wieder ab.

Die Musik liefert dafür keine fertigen Kamerabilder. Die Tracks melden Ereignisse wie kick, bass, snare, chord, note oder arp samt Tonhöhe, Anschlagsstärke und Notenlänge. Eine Regieschicht verwandelt diese Signale in Hüllkurven. Erst danach berechnet jede Kugel aus Zone, Winkel und Abstand ihren Zielwert.

Ein Raster statt 600 Einzelprüfungen

Die Szene wird mit Raymarching gezeichnet. Ein Fragment-Shader verfolgt für jeden Bildpunkt einen Strahl durch die Bühne. Naiv müsste er an jedem Schritt den Abstand zu allen Kugeln prüfen. Bei 600 Kugeln wäre dieser Ansatz zu rechenintensiv.

Die Kinetik-Demo nutzt deshalb die bekannte Rasterstruktur. Für einen Punkt im Raum wird zuerst bestimmt, in welcher Zelle er liegt. Die Höhe der dortigen Kugel kommt aus einer 28-mal-28-Gleitkomma-Textur, die einmal pro Bild von der Federphysik aktualisiert wird. Der Strahl prüft nur die Kugel seiner aktuellen Zelle. Damit er keine Nachbarkugel überspringt, wird die Schrittlänge an der nächsten Zellgrenze begrenzt.

ivec2 cell = ivec2(floor(p.xz / spacing + gridHalf));
float height = texelFetch(tHeight, cell, 0).r;
vec3 center = vec3(cellPosition(cell), height);
float sphereDistance = length(p - center) - radius;

float safeStep = min(sphereDistance, distanceToCellBoundary(p.xz));

Die Rechenzeit wächst damit nicht mit der Gesamtzahl der Kugeln. Entscheidend ist, wie viele Rasterzellen der Strahl durchquert. Flache Nahaufnahmen sind deshalb teurer als die Aufsicht: Der Strahl bleibt länger in der Kugelzone und muss mehr Zellgrenzen passieren.

Seile dünner als ein Bildpunkt

Ein zweites Problem sind die Stahlseile. Würden sie als klassische Zylinder raygemarcht, könnten sie je nach Auflösung flackern oder ganz verschwinden. Die Demo berechnet deshalb beim Durchqueren einer Zelle analytisch den kleinsten Abstand des Strahls zum senkrechten Seil. Die Deckung wird anschließend nach der Größe eines Bildpunkts geglättet. So bleiben die Seile fein, aber stabil sichtbar.

Nur Seile vor dem eigentlichen Kugeltreffer tragen zum Bild bei. Andernfalls würden die Linien durch die Chromoberfläche hindurchscheinen. Diese kleine Reihenfolge entscheidet stark darüber, ob die Szene wie eine mechanische Installation oder wie ein heller Vorhang wirkt.

Chrom ist vor allem eine Lichtentscheidung

Die Kugeln haben kaum eigene Farbe. Ihr Material entsteht aus einer Softbox, einem Ringlicht, zwei farbigen Lichtstreifen, Flächenleuchten und einem LED-Kranz am Horizont. Der Shader mischt Fresnel-Reflexion mit einer zweiten Strahlverfolgung, über die sich benachbarte Kugeln spiegeln. Dicht stehende Nachbarn dunkeln einander leicht ab. Das schwarze Acryl darunter liefert eine zweite, gedämpfte Ansicht der gesamten Skulptur.

Wenn ein Instrument spielt, wird sein Ring nicht einfach deckend eingefärbt. Das Chrom nimmt nur einen eloxierten Farbstich an; zusätzlich leuchtet unter der Zone ein farbiger Ring auf dem Boden. Dadurch bleiben Material und Spiegelung erhalten. Die Farben erklären die Instrumente, ohne die Kugeln in bunte Plastikobjekte zu verwandeln.

Zwei Tracks, zwei mechanische Charaktere

Beide Stücke werden live mit der Web Audio API erzeugt. Sie verwenden dieselbe Skulptur, führen sie aber unterschiedlich.

Synchron liest sich wie eine präzise Maschine. Die Ringe antworten schnell, und kleine Ereignisse bleiben deutlich voneinander getrennt. Schwerkraft gibt den Kugeln mehr Zeit. Akkordflächen und lange Melodiebögen formen größere Körper, während der Drop wie ein schwerer Einschlag wirkt.

Das Build-up nimmt der Maschine die Kontrolle

Im Build-up werden die Figuren nicht einfach größer. Die gesamte Fläche sinkt zu einer flachen, zitternden Ebene ab. Das Schlagzeug weicht einem leisen Herzschlag; nur die Mitte antwortet noch. Im letzten halben Takt erstarren die Motoren vollständig.

Beim Drop läuft eine Kaskade von innen nach außen. Jeder Instrumentenring schlägt ein Sechzehntel nach dem vorherigen an. Die ruhige Ebene wird zum Wirbel, Farben laufen über Chrom und Boden, und die Kamera zeigt den Ablauf von oben. Der Höhepunkt ist dadurch keine globale Explosion, sondern eine geordnete Welle durch die Architektur der Musik.

Leistung ist Teil der Gestaltung

Desktop-Geräte rendern bis zu 150 Schritte für den Hauptstrahl und 56 weitere für Spiegelungen zwischen den Kugeln. Mobil sinkt das Budget auf 90 Schritte; Selbstspiegelung und aufwendige Abdunkelung entfallen. Die Pixeldichte beginnt niedriger und kann automatisch bis 0,5 fallen, wenn die Bildzeit länger als zwei Sekunden zu hoch bleibt.

Diese Grenzen beeinflussen auch Kamera und Choreografie. Weite und steile Einstellungen sind nicht nur übersichtlicher, sondern günstiger. Makro- und Flachwinkel bleiben kurze Akzente. Die Leistungsregelung ist deshalb kein unsichtbarer Reparaturmechanismus, sondern ein Mitspieler der Bildsprache.

Das Raster darf nie wie eine Tabelle wirken. Federn, Licht, Spiegelungen und musikalische Hüllkurven geben ihm gerade genug Unordnung, um lebendig zu werden.

Was ich aus der Kinetik-Demo mitnehme

Die Demo hat mir gezeigt, dass viele Einzelelemente nicht automatisch ein unlesbares Bild ergeben. Entscheidend ist, ob jedes Element eine klare Aufgabe besitzt. Die 600 Kugeln werden verständlich, weil sie in musikalische Zonen organisiert sind und weil Farbe, Höhe und Timing dieselbe Zuordnung wiederholen.

Technisch war die wichtigste Entscheidung, die Regelmäßigkeit der Skulptur auszunutzen. Erst das Raster macht die große Zahl an Kugeln im Shader in Echtzeit berechenbar. Künstlerisch war die wichtigste Entscheidung das Gegenteil: Das Raster darf nie wie eine Tabelle wirken. Federn, Licht, Spiegelungen und musikalische Hüllkurven geben ihm gerade genug Unordnung, um lebendig zu werden.