SERIENBEITRAG ·
Klangschale – Wasser, Bronze und stehende Wellen
Wie WebGL, stehende Wellen und Web Audio das Wasser in einer digitalen Klangschale in immer neue leuchtende Muster verwandeln.
Eine gehämmerte Klangschale aus Bronze steht auf schwarzem Samt. In ihr liegt eine vollkommen glatte Wasserfläche. Der erste Ton trifft – und aus dem Spiegel wächst eine leuchtende Blüte. Ein anderer Ton macht daraus Ringe, Sterne oder ein dichtes Netz aus Licht. Die Musik ist nicht nur Begleitung: Sie entscheidet, welche Form das Wasser annimmt.
Die Klangschale-Demo ist der siebte Teil der Serie Operus Demos. Nach Partikeln, einem Schwarzen Loch, Ferrofluid, einer kinetischen Skulptur und digitalem Quecksilber geht es diesmal um ein Material, das vertraut wirkt und trotzdem voller unsichtbarer Ordnung steckt. Wasser macht Schwingung sichtbar, wenn Klang, Geometrie und Licht dieselbe Sprache sprechen.
Eine Schale, die ihre Physik erzählt
Eine echte Klangschale schwingt nicht in nur einer Richtung. Ihr Rand verformt sich in mehreren Eigenmoden, und das Wasser antwortet mit stehenden Wellen. Bestimmte Bereiche bewegen sich stark, andere bleiben beinahe ruhig. Aus diesen Knoten und Bäuchen entstehen symmetrische Muster, deren Zahl und Lage von der Frequenz abhängen.
Die Demo bildet dieses Verhalten nicht als vollständige Flüssigkeitssimulation nach. Statt Millionen Wasserteilchen zu berechnen, beschreibt eine analytische Höhenfunktion die Oberfläche. Radiale Ringe werden mit azimutalen Blütenformen kombiniert. Jede Melodienote wählt eine andere Kombination, und eine weiche Überblendung verhindert, dass das Muster zwischen zwei Tönen springt.
float mode(vec2 p, float petals, float rings, float phase) {
float radius = length(p);
float angle = atan(p.y, p.x);
float radial = sin(radius * rings * PI - phase);
float angular = cos(angle * petals);
return radial * angular * bowlEnvelope(radius);
}Die Formel ist bewusst kompakt. Ihre Wirkung entsteht erst durch die Überlagerung mehrerer Moden, durch das zeitliche Schwingen und durch kleine Impulse, die unabhängig davon über die Fläche laufen. So bleibt das Wasser lesbar, ohne mathematisch steril zu wirken.
Wie Klang zu Bewegung im Wasser wird
Die beiden Tracks entstehen live mit der Web Audio API. Gleichzeitig sendet der Sequenzer musikalische Ereignisse an eine Regieschicht. Sie kennt keine fertigen Szenen, sondern übersetzt Klang in Kräfte: Eine Note verändert die Eigenform, eine Kick startet eine Ringwelle, ein Klangschalenschlag läuft vom Rand nach innen und der Bass hebt die gesamte Wassermasse langsam an.
| Musikalisches Ereignis | Wirkung im Wasser |
|---|---|
| Melodieton | wählt Blütenzahl und Ringstruktur der nächsten Eigenform |
| Kick | schickt eine kreisförmige Welle von der Mitte nach außen |
| Klangschalenschlag | startet eine Welle am Rand und lässt die Bronze kurz aufleuchten |
| Bass | bewegt die Wasserfläche als schwere, langsame Grundschwingung |
| Wassertropfen und Hi-Hats | erzeugen feine Kapillarwellen |
| Build-up | verdichtet das Kräuseln, während ein heller Kontaktpunkt am Rand entlangwandert |
| Drop | wirft Tropfen aus den Schwingungsbäuchen und lässt einzelne Perlen über den Rand fliegen |
Entscheidend sind die Übergänge. Licht, Amplitude und Wellenimpulse werden nicht in einem Frame ein- oder ausgeschaltet. Kurze Hüllkurven lassen sie in wenigen Millisekunden anwachsen und wieder abklingen. Gerade auf polierter Bronze würde ein harter Sprung sofort wie ein Grafikfehler wirken.
Klares Wasser braucht mehr als Transparenz
Die Wasserfläche ist durchsichtig, aber sie besitzt kaum eine eigene Farbe. Sichtbar wird sie durch das, was sie mit ihrer Umgebung macht. Der Shader verfolgt für jedes Pixel einen Strahl zur schwingenden Oberfläche, berechnet dort die Normale und teilt das Licht in Spiegelung und Brechung. Ein hoher Fresnel-Anteil macht flache Blickwinkel spiegelnd; senkrechtere Strahlen dringen tiefer in die Schale.
Unter Wasser trifft der gebrochene Strahl auf die gewölbte, goldene Innenseite. Dort bündelt die Krümmung der Wellen das Licht. Helle Linien entstehen, wo benachbarte Strahlen eng zusammenlaufen, dunkle Flächen dort, wo sie auseinanderdriften. Diese Kaustiken sind keine aufgeklebte Textur. Sie werden aus der lokalen Krümmung der aktuell schwingenden Oberfläche abgeleitet.
Bronze als Gegenstimme
Eine perfekte Metallschale würde schnell wie ein glatter Computerkörper aussehen. Die Außenseite erhält deshalb eine feine gehämmerte Struktur, zwei zurückhaltende Gravurringe und eine dunkle Patina. Innen ist die Bronze stärker poliert, damit Wasser, Kaustiken und Studiolichter als lange goldene Reflexe über die Wölbung laufen.
Die Schale selbst entsteht als Signed Distance Field. Ein flach gedrücktes Ellipsoid bildet den Bauch, ein weich verbundener Ring den nach innen geneigten Rand. Ray Marching findet die sichtbare Oberfläche. Das Ringkissen, die polierte Studioplatte, ein Kontaktschatten und ein gedämpftes Spiegelbild geben dem Objekt Gewicht. Ohne diese ruhigen Bezugspunkte würde die bewegte Wasserfläche im schwarzen Raum schweben.
Tropfen erzählen, was nach dem Drop bleibt
Im Drop verlässt die Bewegung die Oberfläche. Auf jeden Kick steigen drei Tropfen an den Bäuchen der aktuellen Eigenform auf. Sie fallen zurück und schicken kleine Ringwellen durch das Wasser. Auf jeden zweiten Kick fliegt eine Perle über den Rand und bleibt auf der Studioplatte liegen. Einige treffen die Außenseite, haften kurz unter dem Rand und laufen mit einer dunkleren nassen Spur nach unten.
Diese Details bleiben bis zum Neustart des Tracks erhalten. Der Drop verändert damit den Zustand der Szene. Später erinnert die Ansammlung kleiner Perlen daran, wie heftig das Wasser bereits geschwungen hat. Beim Stopp beruhigt sich die Oberfläche über mehrere Sekunden, während die Spuren und Tropfen liegen bleiben.
Zwei Tracks, zwei Arten von Resonanz
| Track | Tempo | Charakter |
|---|---|---|
| Resonanzfeld | 122 BPM | Minimal Electronica mit Obertonmelodie, Wassertropfen als Hi-Hats und präzisen Ringwellen |
| Eigenform | 88 BPM | Cinematic Ambient mit schwebenden Sinustönen, langen Klangschalen und schweren Impulsen |
Resonanzfeld zeigt die Mechanik deutlich. Die Melodie steigt durch die Obertonreihe, das Muster wechselt häufiger und Tropfen setzen helle rhythmische Akzente. Eigenform lässt den Schwingungen mehr Zeit. Lange Töne halten eine Geometrie offen, während Chor, Streicher und tiefe Pulse im Drop die ganze Schale in Bewegung versetzen.
Beide Stücke verwenden eigene Klangbausteine für die Demo: schwebende Sinuspaare für die Klangschale, kurze aufwärtsgleitende Sinustöne für Tropfen, reine Töne für die sichtbare Melodie und einen angeriebenen Dauerton für das Build-up. Bild und Klang stammen dadurch aus derselben kleinen Instrumentenfamilie.
Eine ruhige Kamera für ein unruhiges Material
Die Kamera schneidet selten und bewegt sich langsam. Tiefe Ansichten zeigen den Rand und die Brechung an der Innenwand, die Aufsicht erklärt die Symmetrie der Eigenformen. Im Build-up fährt der Blick näher an den wandernden Kontaktpunkt; im Outro steigt er über die Schale, während ein letzter Schlag ausklingt.
Auf schnelle Zooms oder Wackeln reagiert die Demo bewusst nicht. Das Wasser liefert bereits genug Bewegung. Die Kamera soll Orientierung geben und das Material beobachten, statt mit jedem Beat um Aufmerksamkeit zu konkurrieren.
Rechenzeit dort sparen, wo sie niemand vermisst
Wasser, Bronze, Spiegelbild, Kaustiken und Nachbearbeitung laufen in einem einzigen Browserfenster. Auf Desktopgeräten zielt die Demo auf 60 Bilder pro Sekunde. Mobil verwendet sie weniger Strahlschritte und eine niedrigere Pixeldichte. Bleibt die Bildzeit länger zu hoch, senkt eine adaptive Regelung zuerst die Auflösung, nicht die musikalische Choreografie.
Der aufwendigste Shader wird während des Ladebildschirms vorübersetzt. Die volle Höhenfunktion ist nur dort aktiv, wo ihre Details tatsächlich sichtbar werden: in der Oberflächennormale. Strahlsuche, Lichtmuster und Spiegelbild verwenden schlankere Näherungen. Das verkürzt den Start und hält die Bewegung stabil, ohne die charakteristischen Muster zu verlieren.
Aus einer Gleichung wird kein Diagramm, sondern ein Instrument, das man beim Hören beobachten kann.
Was ich aus der Klangschale-Demo mitnehme
Die stärkste Wirkung entsteht nicht durch maximale Simulation, sondern durch eine klare Aufteilung der Aufgaben. Eine analytische Funktion liefert die Ordnung der Eigenformen. Ereignisse aus der Musik geben ihnen Zeitpunkt und Energie. Optik verwandelt Krümmung in Licht, und kleine physikalische Details – Tropfen, Perlen, nasse Spuren – geben dem abstrakten Muster eine materielle Folge.
Die Klangschale-Demo zeigt, wie wenig es manchmal braucht, damit Mathematik körperlich wirkt. Ein Kreis, einige Sinusfunktionen und eine Handvoll musikalischer Impulse reichen aus, wenn Licht und Material jede Veränderung verständlich machen. Aus einer Gleichung wird so kein Diagramm, sondern ein Instrument, das man beim Hören beobachten kann.
