Conception d’un shader liquide irisé

Une apparence d’huile sur l’eau construite à partir de mathématiques

Iridescent Liquid est un exemple officiel OpenDesign construit autour d’un seul aperçu WebGL plutôt que d’un ensemble d’écrans d’application. Son titre créé pour la composition, « LIQUID IRIDESCENCE », apparaît sur un champ saturé de formes fluides violettes, cyan, roses et rouge rosé. La composition fait du canevas son sujet tout en maintenant le texte explicatif à proximité du parcours de lecture inférieur gauche.

Le texte d’accompagnement décrit l’effet comme un « living oil-on-water field ». L’implémentation rend un triangle en plein écran avec du bruit procédural, plutôt qu’un maillage sphérique ou une texture photographique. Elle peut ainsi suggérer un matériau fluide sans représenter un objet littéral. Le vocabulaire du matériau est une métaphore visuelle, et non la preuve d’une simulation physiquement exacte de l’huile ou de l’eau.

En haut, « OPENDESIGN · WEBGL PREVIEW » identifie le contexte et « REAL-TIME · GPU » présente l’approche de rendu. Ces libellés orientent le spectateur avant la lecture du grand titre, mais doivent être considérés comme du texte d’interface descriptif, et non comme la preuve d’une fréquence d’images mesurée ou de performances en production.

01

Canevas continu

Le champ visuel remplit la composition ; le mouvement reste donc le contenu principal plutôt qu’un arrière-plan pour des panneaux distincts.

02

Contraste texturé

Le lettrage blanc de grande taille sépare le message éditorial du champ de couleurs dense, même si son placement doit rester stable lorsque l’arrière-plan change.

À quels usages cette conception convient-elle ?

Cette réalisation est surtout utile comme référence pour les arrière-plans visuels interactifs, les études d’art génératif et les démonstrations de creative coding. Elle montre comment une page peut communiquer une expérimentation visuelle avec une courte description, un grand titre et une indication d’interaction directe. Elle convient moins aux interfaces riches en informations, car la surface animée entre en concurrence avec les petits libellés et le contenu détaillé.

L’invite « MOVE THE CURSOR ↗ » transforme le spectateur, d’observateur passif, en participant. Les états fournis montrent le même canevas avec différentes limites de couleurs et configurations d’ondulations, tandis que la superposition reste cohérente. Cette association rend le changement d’état lisible : la composition évolue, mais le cadre de lecture ne change pas.

Composition et mouvement

La conception suit un ordre de lecture vertical marqué : les libellés contextuels en haut, le titre surdimensionné « LIQUID IRIDESCENCE » près du bas à gauche, le texte explicatif dessous et l’instruction liée au curseur en bas à droite. Cette répartition distribue l’attention sur le large canevas tout en regroupant le message principal dans un bloc lisible.

Les captures montrent trois états du même canevas de shader, et non des écrans indépendants. Sur chacune, le titre et la phrase d’accompagnement restent en place, tandis que les courants environnants passent de régions dominées par le cyan à des passages plus magenta, roses, turquoise et ocres. La superposition stable donne un point de référence au mouvement ; en contrepartie, l’arrière-plan peut réduire le contraste derrière certaines parties du texte.

Le shader de fragment utilise un bruit à six couches à travers deux champs de déformation chaînés. Une attraction pondérée par la distance depuis le pointeur infléchit les coordonnées d’échantillonnage, tandis qu’une palette cosinus et des termes de crête lumineuse créent les courants irisés. Pour chacune des deux coordonnées du pointeur, l’écart restant jusqu’à la cible est multiplié par 0.06 à chaque image, puis ajouté à la coordonnée actuelle, tandis que le temps écoulé continue de modifier le champ. L’instruction en bas à droite est un texte fixe, et non un contrôle cliquable.

La couleur comme structure

La palette ne se résume pas à un seul dégradé. Elle est organisée en larges courants colorés bordés de contours pâles et lumineux. Le cyan et le turquoise apportent des ruptures plus froides au sein du champ dominant magenta et violet, tandis que les lignes rose pâle révèlent la direction du flux. Cette variation donne au canevas une impression de volume sans ajouter de géométrie littérale.

Un cadre de lecture stable

La superposition répétée illustre un schéma d’interaction pratique : préserver le titre et l’instruction tout en laissant l’œuvre varier. Une recréation doit conserver cette relation, puis vérifier que la palette choisie laisse un contraste suffisant sous le texte.

Limites des capacités

Cet artefact est un exemple de conception et de rendu. Les éléments fournis étayent l’existence d’états visibles du canevas WebGL, d’une gestion locale de la réponse au pointeur, du redimensionnement et d’une boucle d’animation. Ils ne vérifient ni les services connectés, ni le stockage, ni un déploiement en production, ni les fréquences d’images mesurées, ni le modèle de génération original. Les trois captures doivent donc être lues comme des états visuels d’une seule composition, et non comme la preuve de flux de travail distincts ou de performances testées.

Comment l’adapter

Pour une nouvelle version, préservez la relation entre le mouvement procédural et le cadrage éditorial, puis ne modifiez qu’une variable à la fois : la palette, l’échelle des ondulations, le placement du titre ou l’influence du pointeur. Faites en sorte que la modification soit observable dans le canevas et décrivez un comportement proposé comme tel, plutôt que comme une capacité existante.