Irideszentes Liquid-Shader-Design

Eine aus Mathematik erzeugte Öl-auf-Wasser-Anmutung

Iridescent Liquid ist ein offizielles OpenDesign-Beispiel, das auf einer einzelnen WebGL-Vorschau statt auf einer Sammlung von Anwendungsbildschirmen basiert. Die gesetzte Überschrift „LIQUID IRIDESCENCE“ liegt über einem gesättigten Feld aus fließenden violetten, cyanfarbenen, pinken und rosafarbenen Formen. Die Komposition macht den Canvas zum eigentlichen Thema und hält den erklärenden Text nahe am Lesepfad unten links.

Der unterstützende Text bezeichnet den Effekt als „living oil-on-water field“. Die Implementierung rendert ein bildschirmfüllendes Dreieck mit prozeduralem Rauschen statt eines Kugelmeshes oder einer fotografischen Textur. Dadurch kann sie ein flüssiges Material andeuten, ohne einen konkreten Gegenstand abzubilden. Die Materialsprache ist eine visuelle Metapher und kein Beleg für eine physikalisch genaue Öl- oder Wassersimulation.

Oben kennzeichnet „OPENDESIGN · WEBGL PREVIEW“ den Kontext, während „REAL-TIME · GPU“ den Rendering-Ansatz rahmt. Diese Labels geben der betrachtenden Person Orientierung, bevor der größere Titel gelesen wird; sie sollten jedoch als beschreibender Interface-Text und nicht als Beleg für eine gemessene Bildrate oder Leistung im produktiven Einsatz verstanden werden.

01

Kontinuierlicher Canvas

Das visuelle Feld füllt die Komposition aus, sodass Bewegung zum primären Inhalt und nicht zum Hintergrund für separate Panels wird.

02

Texturkontrast

Große weiße Buchstaben trennen die redaktionelle Botschaft vom dichten Farbfeld, doch ihre Platzierung muss stabil bleiben, während sich der Hintergrund verändert.

Wofür sich das Design eignet

Diese Arbeit eignet sich besonders als Referenz für interaktive visuelle Hintergründe, Studien zur generativen Kunst und Demonstrationen von Creative Coding. Sie zeigt, wie eine Seite ein visuelles Experiment mit nur einer kurzen Beschreibung, einem großen Titel und einem direkten Interaktionshinweis vermitteln kann. Für informationsreiche Benutzeroberflächen ist sie weniger geeignet, weil die animierte Oberfläche mit kleinen Labels und detaillierten Inhalten konkurriert.

Die Aufforderung „MOVE THE CURSOR ↗“ lädt dazu ein, das Bild nicht nur passiv zu betrachten, sondern selbst Einfluss darauf zu nehmen. Die bereitgestellten Zustände zeigen denselben Canvas mit unterschiedlichen Farbgrenzen und Wellenanordnungen, während das Overlay konsistent bleibt. Diese Verbindung macht den Zustandswechsel lesbar: Die Komposition verändert sich, der Leserahmen jedoch nicht.

Komposition und Bewegung

Das Design verwendet eine klare vertikale Leserichtung: Kontextlabels oben, die übergroße Überschrift „LIQUID IRIDESCENCE“ nahe unten links, den erklärenden Text darunter und die Cursor-Anweisung unten rechts. So verteilt sich die Aufmerksamkeit über den breiten Canvas, während die Hauptbotschaft in einem gut lesbaren Block gebündelt bleibt.

Die Aufnahmen zeigen drei Zustände desselben Shader-Canvas und keine unabhängigen Bildschirme. In allen bleiben die Überschrift und der unterstützende Satz an ihrem Platz, während die umgebenden Strömungen von cyanlastigen Bereichen zu stärker magenta-, pink-, teal- und ockerfarbenen Passagen wechseln. Das stabile Overlay gibt der Bewegung einen Bezugspunkt; der Nachteil besteht darin, dass der Hintergrund den Kontrast hinter Teilen des Textes verringern kann.

Der Fragment-Shader verwendet sechsschichtiges Rauschen über zwei verkettete Warp-Felder. Eine distanzgewichtete Anziehung durch den Zeiger verformt die Sampling-Koordinaten, während eine Cosinus-Palette zusammen mit hellen Gratanteilen die irideszenten Strömungen erzeugt. Bei beiden Zeigerkoordinaten wird pro Frame die verbleibende Differenz zum Zielwert mit 0.06 multipliziert und zur aktuellen Koordinate addiert, während die verstrichene Zeit das Feld weiterhin verändert. Die Anweisung unten rechts ist statischer Text und kein anklickbares Steuerelement.

Farbe als Struktur

Die Palette ist kein einzelner Farbverlauf. Sie ist als breite farbige Strömungen organisiert, die von blassen, leuchtenden Konturen eingefasst werden. Cyan und Teal sorgen für kühlere Unterbrechungen innerhalb des dominierenden magenta- und violettfarbenen Felds, während blasspinke Linien die Fließrichtung sichtbar machen. Diese Variation lässt den Canvas räumlich wirken, ohne konkrete Geometrie hinzuzufügen.

Stabiler Leserahmen

Das wiederholte Overlay zeigt ein praktisches Interaktionsmuster: Titel und Anweisung bleiben erhalten, während sich das Artwork verändert. Eine Rekonstruktion sollte diese Beziehung bewahren und anschließend testen, ob die ausgewählte Palette unter dem Text ausreichenden Kontrast lässt.

Funktionsgrenzen

Dieses Artefakt ist ein Beispiel für Design und Rendering. Die bereitgestellten Belege stützen sichtbare WebGL-Canvas-Zustände, lokale Verarbeitung von Zeigerreaktionen, Größenanpassung und eine Animationsschleife. Sie verifizieren keine verbundenen Dienste, keinen Speicher, keinen Produktionseinsatz, keine gemessenen Bildraten und nicht das ursprüngliche Generierungsmodell. Die drei Aufnahmen sollten daher als visuelle Zustände einer Komposition und nicht als Beleg für separate Workflows oder getestete Leistung gelesen werden.

So passen Sie es an

Bewahren Sie für eine neue Version die Beziehung zwischen prozeduraler Bewegung und redaktioneller Rahmung und ändern Sie anschließend jeweils nur eine Variable: Palette, Wellenskalierung, Titelplatzierung oder Zeigereinfluss. Sorgen Sie dafür, dass die Änderung im Canvas beobachtbar ist, und beschreiben Sie vorgeschlagenes Verhalten als vorgeschlagenes Verhalten statt als bestehende Fähigkeit.