Vos mains peignent une simulation de fluide GPU en temps réel, et chaque geste joue aussi une note — un instrument à la fois visuel et sonore, piloté par la webcam.
Vue d’ensemble
Fluid music suit vos mains via la webcam et transforme leurs mouvements en deux choses à la fois : des giclées de couleur dans une simulation de fluide GPU en temps réel, et des notes jouées par un synthétiseur Web Audio. La hauteur du son dépend de la position verticale du poignet, le panoramique de sa position horizontale, le filtre de l’écartement des doigts, et le volume de la vitesse du mouvement — les mêmes données de la main pilotent en parallèle l’image et le son, sans lien direct entre les deux, comme deux instruments joués par le même geste.
Plusieurs gestes sont reconnus et déclenchent des effets particuliers dans le fluide : poing fermé pour mettre en pause, deux doigts pour peindre en noir façon gomme, pincement pour créer un vortex, geste « ok » pour une salve en anneau. Au-delà des mains, l’appli propose aussi un mode réactif au micro et un mode synchronisé sur une horloge MIDI, pour fonctionner comme un simple visualiseur musical sans caméra.
Fonctionnalités
- Suivi de mains en temps réel — détection jusqu’à 2 mains via MediaPipe, avec reconnaissance de gestes (poing, pincement, geste « ok », deux doigts) débounced sur plusieurs frames.
- Simulation de fluide GPU — chaque mouvement de main injecte de la couleur et de la vélocité dans une simulation de fluide WebGL qui tourne en continu.
- Synthé à deux mains — chaque main pilote son propre oscillateur (hauteur, panoramique, filtre, volume dérivés de sa position et de sa vitesse), quantifié sur une gamme musicale.
- Mode micro et mode MIDI clock — sans caméra, l’appli peut réagir au micro (basses/médiums/aigus séparés) ou se synchroniser au tempo d’une horloge MIDI externe.
- Détection de rythme — analyse du micro pour détecter les temps forts et déclencher des impulsions visuelles synchronisées.
- Effets audio en chaîne — distorsion, delay, reverb et trémolo appliqués au bus d’effets partagé par les deux voix.
- Dégradation propre — caméra refusée → bascule automatique sur le micro ; échec de chargement de la détection → l’appli continue sans suivi de mains.
Sous le capot
La détection de mains (MediaPipe HandLandmarker, délégué CPU) tourne dans un Web Worker séparé pour ne jamais bloquer la simulation de fluide sur le thread principal : la boucle de rendu envoie les frames de la webcam au worker, récupère ses dernières coordonnées de mains disponibles, et interpole légèrement entre deux détections pour garder un rendu fluide à 60 images/seconde même si l’inférence est plus lente. La simulation de fluide elle-même est une adaptation de la simulation WebGL de Pavel Dobryakov, pilotée uniquement via des « splats » (impulsions de couleur et de vélocité) — jamais d’accès direct à ses structures internes.
Chaque main génère un couple d’oscillateurs (dent de scie + sinus légèrement désaccordés) dont la hauteur est quantifiée sur une gamme musicale choisie, le tout passant par un filtre, une enveloppe et un panoramique avant de rejoindre le bus d’effets commun puis un compresseur et un limiteur en sortie. Le nombre de « splats » émis par frame est plafonné (plus bas sur mobile) pour ne jamais saturer le GPU même en cas de mouvement très rapide.
Contrôles
| Geste | Action |
|---|---|
| Poing fermé | Pause / silence la main |
| Deux doigts tendus | Peint en noir (efface) |
| Pincement (pouce + index) | Crée un vortex |
| Geste « ok » | Salve en anneau |
| Paume ouverte / bords de l’écran | Salves supplémentaires |
Stack technique
- Vanilla JS (modules ES6), zéro framework
- MediaPipe Tasks Vision (HandLandmarker) — suivi de mains dans un Web Worker dédié
- Simulation de fluide WebGL — adaptation de la simulation de Pavel Dobryakov
- Web Audio API — synthèse par oscillateurs, filtres, effets (distorsion, delay, reverb, trémolo), compresseur
- getUserMedia — webcam et micro
- Web MIDI API — synchronisation sur horloge MIDI externe
Cas d’usage
Instrument gestuel pour improviser en solo, visualiseur audio-réactif pour accompagner un morceau au micro ou en MIDI, ou simplement terrain de jeu hypnotique pour peindre de la couleur avec ses mains.
Chaque geste laisse une trace de couleur et une trace de son.
