Une encre lumineuse qui coule au bout de votre index. On la peint, on souffle dessus main ouverte, on la fait tourner avec deux doigts, et un signe OK aspire tout dans un siphon jusqu’à l’écran vide.
Vue d’ensemble
Fluid music 3 repart d’une feuille blanche. Les deux premières versions jetaient des giclées de couleurs vives et jouaient des notes. Celle-ci cherche autre chose : une matière plus dense, presque liquide au toucher, avec des bords éclairés comme du verre ou de la fumée épaisse. Le rendu s’inspire de « GPU Fluid Simulation », un projet TouchDesigner d’Irina.ae. Aucun code n’en est repris, tout a été réécrit pour le navigateur.
La webcam suit jusqu’à quatre mains et chaque forme de la main a son rôle. Quand les mains quittent le cadre, le fluide garde l’élan qu’on lui a donné et s’efface en ralentissant, sans que rien ne vienne le relancer. Le son suit le même esprit : pas de note, pas de mélodie, seulement un souffle filtré qui gonfle avec la vitesse des gestes.
Fonctionnalités
- Cinq gestes : l’index peint, la main ouverte souffle et écarte le fluide, deux doigts creusent un tourbillon, le signe OK déclenche le siphon, le poing lève le pinceau.
- Le siphon : tenu une seconde, le signe OK crée un vortex qui aspire toute l’encre en spirale vers un œil central. En deux secondes environ, l’écran est propre.
- Six palettes : Glacier (bleu glacé, par défaut), Encre (encre noire sur papier), Lave, Or, Abysse et Aurore. L’encre se teinte selon son épaisseur et tire vers le blanc là où elle s’accumule.
- Un son sans notes : chaque main a sa propre voix de bruit filtré, plus forte quand elle va vite, plus claire quand elle monte. Le siphon a son bruit d’aspiration, qui tournoie entre les deux enceintes.
- Panneau de réglages complet : débit d’encre, force, rayon, tourbillons, viscosité, évaporation, éclairage des bords, relief, halo, qualité de rendu, volume, réverbération. Les réglages restent mémorisés d’une visite à l’autre.
- Sans caméra aussi : à la souris on peint en glissant, Maj ou clic droit pour souffler, Alt ou un appui long pour le siphon. Sur téléphone, deux doigts soufflent et un appui long aspire.
- Capture : image PNG ou enregistrement vidéo, mode présentation sans interface, image figée à la barre d’espace.
Sous le capot
Le solveur de fluide a été écrit pour cette version, en WebGL2, sur la méthode classique de Jos Stam (advection, pression, tourbillons). La différence avec les versions 1 et 2 tient dans la façon de stocker la couleur : l’encre n’est qu’une quantité, sans teinte. La couleur n’apparaît qu’au moment de l’affichage, en lisant cette quantité dans un dégradé de six couleurs, avec une courbe qui sature en douceur au lieu de brûler les zones épaisses. Les bords sont éclairés à partir de la pente de l’encre, ce qui donne ce relief de matière, puis un halo adoucit l’ensemble.
Le siphon a demandé plusieurs essais. Un fluide incompressible ne se laisse pas aspirer : si l’on tire la vitesse vers un point, le calcul de pression annule aussitôt cette convergence et il ne reste qu’une rotation, qui semble repousser l’encre. Le siphon agit donc directement sur l’encre, que chaque pixel va chercher un peu plus loin et légèrement tournée, pendant qu’un tourbillon modéré entraîne le fluide dans le même sens. Le suivi des mains tourne dans un Web Worker avec MediaPipe, sur des images réduites à 320 pixels, et chaque main garde sa voix d’une image à l’autre grâce à un appariement par position du poignet.
Contrôles
| Touche / geste | Action |
|---|---|
| Index tendu | Peint l’encre, la vitesse règle l’intensité |
| Main ouverte | Souffle et écarte le fluide |
| Deux doigts | Creuse un tourbillon |
| Signe OK | Siphon : aspire tout le fluide et nettoie l’écran |
| Poing | Lève le pinceau |
| Glisser à la souris | Peint (Maj ou clic droit : souffle, Alt ou appui long : siphon) |
| 1 à 6 | Choisit la palette |
| C | Efface tout |
| Espace | Fige / relance le fluide |
| M | Coupe / remet le son |
| G | Active / désactive les gestes (index seul) |
| V | Aperçu de la caméra |
| E | Capture une image PNG |
| R | Démarre / arrête l’enregistrement vidéo |
| P | Mode présentation |
| H | Masque / affiche l’interface |
| F | Plein écran |
| D | Diagnostic des gestes |
Stack technique
- Vanilla JS (modules ES6), aucune dépendance locale, aucun build
- WebGL2 : solveur de fluide écrit pour l’app, textures flottantes 16 bits, rendu par dégradé, éclairage des bords et halo
- MediaPipe Tasks Vision (HandLandmarker, jusqu’à 4 mains) dans un Web Worker
- Web Audio API : bruit filtré par main, réverbération générée, aucun oscillateur
- getUserMedia et MediaRecorder : webcam et enregistrement vidéo
Cas d’usage
Un fond visuel pour un concert ou une projection, piloté à la main sans contrôleur. Un moment calme devant l’écran, à dessiner des volutes et à les regarder se dissoudre. Ou un outil de capture : quelques gestes, la touche R, et on repart avec une boucle vidéo de fumée colorée.
Un signe OK, et toute l’encre part par le fond.
