La webcam se liquéfie façon métal en fusion sous les mouvements de vos mains, avant de reprendre sa forme, comme une eau qui s’apaise.
Vue d’ensemble
Reality Flex traite l’image de la webcam comme une surface liquide déformable : MediaPipe suit vos mains, et leur mouvement injecte de la vélocité dans un champ de déformation WebGL qui étire l’image vidéo en direct. Quand les mains s’arrêtent, l’image revient élastiquement à la normale — sans aucune stylisation de couleur, l’effet « métal en fusion » vient uniquement de l’étirement des pixels eux-mêmes.
Si la caméra ou MediaPipe ne sont pas disponibles, un mode pointeur de secours garde l’application jouable : glisser la souris ou le doigt sur le canvas permet de « tordre » l’image à la main.
Fonctionnalités
- Détection de mains en Web Worker — MediaPipe HandLandmarker tourne hors du thread principal, deux mains suivies simultanément.
- Champ de déformation par ping-pong FBO — diffusion, propagation d’onde, ressort et viscosité simulés en temps réel sur une grille basse résolution.
- Retour élastique garanti — le champ revient toujours à plat après l’arrêt du geste, jamais de déformation figée.
- Six points de contact par main — paume et cinq bouts de doigts injectent chacun une vélocité proportionnelle à leur vitesse de déplacement.
- Réglages en direct — force de propagation, retour élastique et intensité d’ondulation ajustables par curseurs.
- Textures demi-flottantes quand le matériel le permet, avec repli 8-bit transparent sinon.
- Mode pointeur de secours — souris ou tactile prennent le relais si la caméra ou MediaPipe ne sont pas disponibles.
Sous le capot
Le champ de déformation vit dans une paire de framebuffers en ping-pong : chaque pixel porte un déplacement et sa vélocité, simulés sur plusieurs sous-étapes par frame — diffusion vers la moyenne des voisins, propagation d’onde, ressort fixe qui crée un rebond oscillant, et un facteur de viscosité qui élimine l’artefact de damier propre aux schémas explicites. Un plancher linéaire garantit que la déformation retombe toujours exactement à zéro plutôt que de stagner en dessous du seuil de précision de la texture.
Un choix d’architecture assumé : aucune auto-advection n’est appliquée au champ. Les tests ont montré que la combiner avec la couche d’onde crée un phénomène auto-entretenu qui empêche l’image de jamais revenir à plat — chaque terme pris seul est stable, c’est leur interaction qui ne l’est pas. Les vélocités injectées par les mains suivent une réponse sous-linéaire pour que les gestes lents et rasants suffisent déjà à créer une ondulation douce.
Stack technique
- MediaPipe Hands (HandLandmarker) — détection de mains via Web Worker classique
- WebGL — pipeline à deux passes avec framebuffers en ping-pong (textures demi-flottantes)
- getUserMedia — capture webcam
- Vanilla JS — zéro framework, zéro build
Cas d’usage
Démonstration portfolio et jouet de webcam à effet visuel immédiat, adapté aussi bien à une installation interactive qu’à un moment ludique devant l’écran — aucun contrôleur, juste des mains devant la caméra.
Vos mains ne touchent rien, et pourtant l’image plie.
