L’image de votre webcam devient une surface d’eau : vos mains y injectent des ondes en temps réel, avec rebond élastique et traînées visqueuses.
Vue d’ensemble
Mosaic (nom de code « Reality Wave ») fait tenir le flux de la webcam derrière une simulation d’onde amortie calculée sur le GPU. Le suivi des mains (via MediaPipe, exécuté dans un worker dédié) injecte des impulsions dans ce champ d’ondes : chaque geste crée des ondulations, un rebond élastique et des traînées visqueuses qui déforment l’image en direct, comme si le visage projeté sur la webcam flottait à la surface d’un bassin.
Fermer le poing calme progressivement la surface et la laisse se reformer, tandis qu’ouvrir la main relance les ondulations. Si le suivi des mains n’est pas disponible (pas de réseau au premier chargement, ou échec du worker), l’application se dégrade proprement vers un mode souris/tactile : on injecte alors les impulsions en glissant le doigt ou le curseur sur l’image.
Fonctionnalités
- Déformation en surface d’eau — l’image webcam est échantillonnée à travers un champ de déplacement simulé en temps réel.
- Suivi des mains — jusqu’à deux mains, six points suivis chacune (paume + cinq doigts), pour injecter des ondes proportionnelles à la vitesse du geste.
- Geste du poing fermé — apaise la surface et la laisse revenir à plat.
- Fallback souris/tactile — si le suivi des mains échoue, on dessine les impulsions au doigt ou à la souris.
- Mode miroir — bascule de l’orientation selfie de la webcam.
- Réglages en direct — curseurs pour ajuster force, rayon et comportement des ondes.
- Enregistrement vidéo — capture du rendu déformé en direct.
Sous le capot
Deux passes WebGL tournent sur un quad plein écran à chaque image. La première résout une équation d’onde amortie sur une paire de FBO en ping-pong à basse résolution : terme laplacien pour la propagation en anneaux, rappel élastique vers zéro pour le rebond, amortissement, et auto-advection du déplacement pour le tourbillon visqueux — trois sous-étapes par image pour que les ondes traversent l’écran à une vitesse crédible. La seconde passe échantillonne simplement la texture webcam à une coordonnée décalée par ce champ de déplacement, avec bascule miroir.
Le suivi des mains tourne dans un worker classique (pas un worker module, contrainte du chargement WASM de MediaPipe) qui exécute HandLandmarker sur des images réduites à 320px de large, une image à la fois pour ne jamais accumuler de retard. Le champ d’onde est encodé en demi-flottant quand le GPU le permet, sinon replié sur 8 bits avec un point neutre à 0,5 — deux chemins de code distincts qu’il faut garder synchronisés pour que la simulation ne diverge pas. Le champ saturé forme un attracteur chaotique qui s’auto-entretient sans jamais se relaxer seul : les impulsions des mains amortissent d’abord localement la vitesse avant d’injecter, ce qui garde les gestes lisibles malgré le chaos, et le geste du poing relève l’amortissement pour casser l’attracteur et aplatir la surface.
Contrôles
| Geste | Action |
|---|---|
| Main ouverte, mouvement | Injecte des ondes proportionnelles à la vitesse du geste |
| Poing fermé | Calme et aplatit progressivement la surface |
| Glisser souris / doigt | Injecte des ondes (fallback si le suivi des mains est indisponible) |
Stack technique
- Vanilla JS, modules ES6 — sans build ni dépendance
- WebGL — pipeline 2 passes en ping-pong (simulation d’onde + affichage), FBO demi-flottant ou 8 bits
- MediaPipe HandLandmarker — suivi des mains, exécuté dans un Web Worker dédié
- getUserMedia — capture du flux webcam
- MediaRecorder — enregistrement vidéo du rendu
Cas d’usage
Un miroir ludique pour installation interactive, photobooth ou simple curiosité webcam : on s’approche, on agite les mains, et son propre reflet se met à onduler comme de l’eau.
Votre reflet n’a jamais été aussi liquide.
