Une flaque irisée qui coule sous la souris, danse avec la musique et se laisse pétrir à mains nues : des couleurs de nacre et de pétrole qui ne se répètent jamais.
Vue d’ensemble
Iris flow part d’une simple mire : les sous-pixels rouges, verts et bleus d’un écran vus de très près. À chaque image, cette mire est soustraite à une version d’elle-même légèrement décalée en couleur, puis les couleurs s’écoulent le long de leurs propres reliefs. La souris oriente ce courant : immobile, la flaque se calme et pâlit en nacre ; en mouvement, elle se déchire en éclats vifs qui changent sans cesse de teinte.
L’expérience est une adaptation de Iridescent Puddle d’Ezra Miller. Le mode Original en reproduit le rendu à l’identique ; le mode Augmenté ajoute le plein écran, des réglages, des palettes, la réaction au son et le pilotage par les mains devant la webcam.
Fonctionnalités
- Mode Original fidèle : le rendu d’Iridescent Puddle reproduit au pixel près, avec son départ sombre tant que la souris n’a pas bougé.
- Réactif à la musique : au micro ou avec un fichier audio, le niveau fait dériver le courant, les graves le font onduler, chaque kick donne une secousse et un éclat d’aberration chromatique. Silence et musique se voient nettement : la flaque pâlit au repos et s’embrase quand ça joue.
- Pilotage à mains nues : devant la webcam, la première main remplace la souris, pincer pouce et index ouvre le prisme, la hauteur de la seconde main règle la force du courant, un poing fermé une seconde relance la mire.
- Cinq graines : la mire de sous-pixels LCD, l’image de la webcam (une idée que l’auteur avait laissée de côté), un dégradé irisé, un bruit coloré ou une photo à vous.
- Six palettes : Irisé (l’original), Nacre, Pétrole, Aurore, Braise et Givre, appliquées en sortie sans perturber la simulation.
- Tous les paramètres à portée de curseur : force du flux, itérations, vitesse de teinte, saturation, aberration, netteté, déplacement, zoom, vitesse et qualité, mémorisés d’une visite à l’autre.
- Capture photo et enregistrement vidéo : export PNG instantané ou vidéo du rendu, avec gestion dédiée du téléchargement sur iOS.
Sous le capot
Tout se joue dans une boucle de rétroaction de sept images en 8 bits par canal. Une couche reçoit une légère rotation de teinte, on la soustrait à la graine, puis le résultat est advecté vingt fois le long du gradient de sa propre luminance, dans une direction que la souris décale. En parallèle, une autre branche déplace l’image selon ses propres couleurs, la rend plus nette avec un noyau laplacien, sépare les canaux rouge et bleu vers les bords comme une lentille imparfaite, puis la recolore.
Le motif doit beaucoup à une particularité du code d’origine : deux couches échangent leurs rôles à chaque image alors que certains shaders continuent de lire toujours la même. Une image sur deux, la simulation s’alimente donc d’un état différent. Le portage reproduit ce comportement tel quel, ainsi que la quantification 8 bits et la première image calculée sans graine. Validé par comparaison automatique : sur 1800 images avec le même parcours de souris, le mode Original est identique à l’original au pixel près.
Contrôles
| Touche / geste | Action |
|---|---|
| Souris, doigt | Oriente le courant |
| Clic / tap court, Espace | Relance la graine |
| O | Mode Original / Augmenté |
| G | Graine suivante |
| M | Micro |
| C | Caméra, pilotage par les mains |
| Flèches | Sensibilité du son (haut/bas) et force du flux (gauche/droite) |
| L / Maj+L | Plus clair / plus sombre |
| 0 | Valeurs par défaut |
| P | Capture une photo PNG |
| R | Démarre / arrête l’enregistrement vidéo |
| S | Ouvre / ferme le panneau de réglages |
| H | Masque / affiche l’interface |
| F | Plein écran |
Stack technique
- Vanilla JS, aucune dépendance, aucun build (l’original utilisait three.js, réécrit ici en WebGL brut)
- WebGL : sept passes en ping-pong dans des tampons 8 bits, shaders GLSL d’origine conservés à la lettre
- Web Audio : analyse micro ou fichier, auto-gain sur moyenne glissante, seuil de silence et détection des kicks
- MediaPipe Hand Landmarker dans un Web Worker : suivi de deux mains sans ralentir le rendu
- MediaRecorder : enregistrement vidéo, avec chemin de sauvegarde dédié pour iOS
Cas d’usage
Un fond vivant pour un concert, un DJ set ou une soirée : branché au micro, il respire avec la salle. Les mains en font un instrument visuel pour la performance, et les captures PNG ou vidéo un générateur de textures irisées pour pochettes, affiches ou fonds d’écran.
Un écran qu’on regarde de si près qu’il se met à couler.
