SERIENBEITRAG ·
Wenn Musik zum Magnetfeld wird
Wie ein Tropfen digitales Ferrofluid im Browser auf Rhythmus, Melodie und Berührung reagiert – bis er im Drop als Turm zerplatzt.
Ein Tropfen schwarzer Flüssigkeit liegt auf einer spiegelnden Fläche. Zunächst ist er fast glatt. Dann setzt die Musik ein, und aus der Oberfläche wächst ein geometrisches Feld aus Stacheln. Eine Kick schickt eine Welle durch die Flüssigkeit, die Melodie zieht die Spitzen über die Fläche und im Build-up steigt aus der Pfütze ein Turm empor. Beim Drop zerplatzt er in Tropfen.
Die Magnetfeld-Demo ist der Versuch, Musik nicht nur als Bewegung, sondern als unsichtbare Kraft zu zeigen.
Die KI-generierte Illustration veranschaulicht den geplanten Formwechsel im Drop: Aus der flachen Oberfläche wächst ein Turm, der sich in schwebende Tropfen auflöst.
Anders als bei der Partikelmagier- oder der Ereignishorizont-Demo füllt keine große Figur und kein kosmisches Panorama das Bild. Die Bühne bleibt klein: ein Tropfen Ferrofluid, schwarzes Acryl und Studiolicht. Gerade diese Beschränkung macht jede Veränderung lesbar. Ein einzelner heller Reflex kann eine Spitze erklären, eine kleine Welle den nächsten Takt ankündigen.
Eine Flüssigkeit aus Abstandsfunktionen
Die Form wird nicht aus einem Polygonmodell animiert. Ein Fragment-Shader beschreibt Pfütze, Stacheln, Turm und Tropfen als mathematische Abstandsfunktionen – sogenannte Signed Distance Fields. Für jeden Bildpunkt sucht ein Strahl die Oberfläche der Flüssigkeit. Dort berechnet der Shader Normale, Licht und Spiegelung.
Die ruhige Grundform ist ein flaches Ellipsoid. Die Stacheln stehen auf konzentrischen Ringen. Je größer ein Ring wird, desto mehr Spitzen bekommt er, damit ihre Abstände annähernd gleich bleiben. Für die Berechnung eines Punktes reichen die drei nächstgelegenen Ringe und jeweils die nächstgelegene Spitze. So entsteht ein dichtes Rosensweig-Muster, ohne dass jede Spitze der gesamten Pfütze geprüft werden muss.
float liquid(vec3 p) {
float pool = ellipsoid(p, vec3(2.4, 0.42, 2.4));
float d = uSpikesOn > 0.5
? smin(pool, spikes(p, uSpacing), 0.13)
: pool;
d = smin(d, tower(p), 0.32);
return mergeDroplets(d, p);
}Ein weiches Minimum verschmilzt die Formen miteinander. Deshalb sitzen die Stacheln nicht wie aufgesetzte Kegel auf der Pfütze, sondern wachsen mit gerundeten Übergängen aus ihr heraus. Dasselbe Verfahren verbindet den Turm und bis zu zwölf fliegende Tropfen wieder mit der Flüssigkeit.
Die Mathematik hinter den Stacheln
Das sichtbare Feld besteht nicht aus hunderten einzelnen Objekten. Für einen beliebigen Raumpunkt berechnet der Shader zunächst dessen Abstand zum passenden Ring. Aus dem Ringradius und dem gewünschten Abstand sp ergibt sich, wie viele Stacheln dort Platz haben: Umfang geteilt durch Abstand. Der Winkel des Abfragepunkts bestimmt anschließend den nächstgelegenen Sektor. Geprüft werden nur dieser Stachel und die jeweils benachbarten Ringe – unabhängig davon, wie viele Spitzen das vollständige Feld zeigt.
float ring = floor(radius / sp + 0.5);
float ringRadius = ring * sp;
float count = floor(6.28318 * ringRadius / sp + 0.5);
float sector = 6.28318 / max(count, 1.0);
float angle = floor((atan(p.z, p.x) - rotation) / sector + 0.5)
* sector + rotation;
vec2 center = ringRadius * vec2(cos(angle), sin(angle));
float height = spikeHeight(center, ring);
float spike = sdRoundCone(p, base, tip, width, 0.01);Die Höhe ist kein einzelner Lautstärkewert. Vier mathematische Profile – Kuppel, Krone, wechselnde Ringe und Spirale – liefern für jede Position unterschiedliche Gewichte. Der aktuelle Akkord mischt diese Profile über uProfile; uTwist verdreht die Ringe gegeneinander. Deshalb kann dieselbe Pfütze von einer zentralen Kuppel in eine Krone oder ein spiralförmiges Muster gleiten, ohne dass Geometrie ausgetauscht wird.
Kick, Melodie und Finger verändern dieses Grundmuster lokal. Bis zu drei Kick-Wellen laufen als Gauß-Kurven vom Zentrum nach außen. Der Melodie-Magnet und der Finger addieren ebenfalls weiche Glockenkurven um ihre Position. Erst ganz am Ende wird die gemeinsame Höhe zum gerundeten Kegel und per smin mit der Pfütze verschmolzen. Die Musik steuert damit nicht fertige Stacheln, sondern die Funktion, aus der sie in jedem Bild neu entstehen.
Schwarze Flüssigkeit wird erst durch Licht sichtbar
Das Ferrofluid besitzt fast keine eigene Farbe. Seine Form wird über Spiegelungen lesbar. Über der Pfütze liegt eine große Softbox, dazu kommen ein schräges Ringlicht, zwei farbige Lichtstreifen und ein Kranz kleiner Lichtpunkte am Horizont. Orange und Blau wandern langsam um die Szene und zeichnen immer neue Kanten auf dieselben schwarzen Spitzen.
Trifft ein Strahl die Flüssigkeit, berechnet der Shader Fresnel-Reflexion, Umgebungsverdeckung und auf Desktop-Geräten eine zweite Strahlverfolgung für die Selbstspiegelung. Trifft er den Acrylboden, sucht ein weiterer Strahl nach dem Spiegelbild der Flüssigkeit. Der Boden ist deshalb nicht nur Untergrund, sondern eine zweite, dunklere Ansicht des Motivs.
Die Tiefe landet im Alphakanal des Bildes. Eine nachgeschaltete Tiefenunschärfe hält die vordere Hälfte der Pfütze scharf und lässt weiter entfernte Spitzen weicher werden. Bloom, eine leichte chromatische Verschiebung, Vignette und Filmkorn geben dem technisch berechneten Bild die Anmutung einer Makroaufnahme.
Zwei Tracks, zwei Arten von Kraft
Beide Stücke entstehen live mit der Web Audio API. Sie verwenden dieselbe Flüssigkeit, aber eine deutlich andere musikalische Sprache.
| Track | Tempo | Charakter |
|---|---|---|
| Polarität | 124 BPM | Dunkler Techno mit gerader Kick, rollendem Bass, Metall-Klicks, zwei Build-ups und zwei Drops |
| Kraftlinien | 84 BPM | Cinematic Halftime mit großer Snare, Glocken-Arpeggien, Klaviermelodie, Reese-Bass und weitem Drop |
Polarität treibt das Feld schnell und präzise. Jede Kick schickt eine sichtbare Welle durch die Spitzen, Metall-Klicks funkeln wie kleine Entladungen. Kraftlinien gibt den Bewegungen mehr Raum. Die langsame Melodie führt den Magneten in weiten Bögen unter der Pfütze, während die Halftime-Snare kurze Lichtblitze setzt.
Akkorde verändern die Geometrie
Die Regie unterscheidet nicht nur laut und leise. Jeder Akkord wählt eine Mischung aus vier Stachelprofilen: Kuppel, Krone, Ringe und Spirale. Gleichzeitig ändert sich die Verdrehung der Ringe. Die Gewichte springen nicht hart um, sondern gleiten zur neuen Form. So verändert sich das Feld harmonisch, ohne bei jedem Takt auseinanderzufallen.
Die Melodietöne steuern einen zweiten, unsichtbaren Magneten. Ihre Tonhöhe wird auf einen Winkel um die Pfütze abgebildet. Höhere Register liegen etwas weiter außen. Über der jeweiligen Position wachsen die Stacheln stärker, und der Einfluss klingt nach jeder Note langsam wieder ab.
| Musikalisches Ereignis | Wirkung im Bild |
|---|---|
| Abschnitt | Bestimmt die grundsätzliche Feldstärke; im Breakdown wird die Oberfläche fast glatt. |
| Akkord | Mischt Kuppel, Krone, Ringe und Spirale zu einem neuen Stachelmuster. |
| Melodieton | Führt einen Magneten unter der Pfütze; Tonhöhe wird zu Position. |
| Kick | Schickt eine Welle vom Zentrum nach außen und hebt die getroffenen Spitzen an. |
| Bass | Lässt Oberfläche und Feld leicht atmen. |
| Hats und Metall-Klicks | Erzeugen Funkeln auf den Spitzen und feines Zittern. |
| Snare | Setzt einen kurzen Lichtblitz. |
Der Build-up wächst nach oben
Im Build-up reicht eine höhere Feldstärke allein nicht aus. Die Pfütze klettert deshalb zu einem schlanken Turm empor. Stachelkränze winden sich spiralförmig um ihn, während Kamera und Licht schneller kreisen. Kurz vor dem Drop geschieht das Gegenteil: Kick und Bass schweigen für ein letztes Achtel, das Feld fällt zusammen und die Stacheln sinken. Die Szene holt sichtbar Luft.
Dann schlägt das Feld zurück. Der Turm bricht auseinander und schleudert beim ersten Drop neun, beim zweiten zwölf Tropfen durch den Raum. Jeder Tropfen folgt einer kleinen Flugbahn, bleibt über dem Boden und wird anschließend wieder eingesammelt. Landet er auf der Pfütze, verschmilzt er direkt. Landet er auf dem Acryl, zieht ihn das Feld über die Fläche zurück.
Der eigene Finger wird zum Magneten
Die Magnetfeld-Demo lässt sich auch ohne Musik berühren. Ein Zug mit Maus oder Finger wird auf die Bodenebene der Szene projiziert. Dort entsteht ein zusätzlicher Magnet, dem die Stacheln unmittelbar folgen. Während der Interaktion wechselt die Kamera in eine ruhigere Aufsicht, damit der Zusammenhang zwischen Bewegung und Form klar bleibt.
Diese kleine Geste verändert die Rolle der Demo. Man betrachtet nicht nur eine Choreografie, sondern kann dieselbe Kraft selbst führen, die zuvor aus der Musik kam. Auf einem Touchscreen wirkt die mathematische Oberfläche dadurch überraschend materiell.
Weniger rechnen, wenn die Flüssigkeit ruht
Raymarching kostet für jeden Bildpunkt Rechenzeit. Auf Desktop-Geräten verwendet die Demo bis zu 96 Schritte für den Hauptstrahl, weitere 40 für Selbstspiegelungen und mehrere Proben für Umgebungsverdeckung. Mobil sinkt der Hauptstrahl auf 72 Schritte; Selbstspiegelung und die aufwendige Verdeckung entfallen.
Liegt die Flüssigkeit am Start, im Breakdown oder nach dem Stopp glatt, überspringt der Shader die gesamte Stachelberechnung. In Ruhe wird außerdem nur mit 30 statt 60 Bildern pro Sekunde gerendert. Wenn ein Gerät länger ruckelt, reduziert die gemeinsame Leistungsregelung stufenweise die Pixeldichte.
Diese Optimierungen sind nicht nur technische Nacharbeit. Sie bestimmen, welche Formensprache in Echtzeit möglich ist. Das Stachelfeld sieht komplex aus, bleibt aber lokal berechenbar. Die ruhige Pfütze sieht einfach aus und darf deshalb auch einfach gerechnet werden.
Das eigentliche Modell ist nur die Hälfte der Arbeit; die andere Hälfte ist zu entscheiden, wo es sichtbar werden darf.
Was ich aus der Magnetfeld-Demo mitnehme
Für mich funktioniert die Magnetfeld-Demo am besten, wenn die Technik in den Hintergrund tritt und nur noch das Material übrig bleibt. Niemand muss wissen, dass die Pfütze aus Abstandsfunktionen besteht, um zu verstehen, wie eine Kick durch sie hindurchläuft oder warum die Spitzen einem Finger folgen.
Gleichzeitig hat die Demo gezeigt, wie wichtig Licht für schwarze Formen ist. Mehr Geometrie hätte das Bild nicht automatisch lesbarer gemacht. Erst die wandernden Reflexe, die helle Ringkante und die Spiegelung im Acryl geben den Spitzen Volumen. Das eigentliche Modell ist nur die Hälfte der Arbeit; die andere Hälfte ist zu entscheiden, wo es sichtbar werden darf.
