Peignez dans les airs avec votre index : huit effets au choix — ruban vidéo, fumée, flammes, kaléidoscope, fleurs, particules, confettis, pixel — devant votre webcam.
Vue d’ensemble
Ruban Flex suit le bout de l’index de chaque main devant la webcam et laisse une traînée colorée derrière lui, sans jamais déformer l’image vidéo elle-même — chaque effet est un pur calque visuel posé sur le flux webcam brut. L’effet par défaut, Ruban, est une bande découpée dans l’image vidéo elle-même, teintée d’une couleur qui cycle dans le temps : la traînée grandit tant que le doigt bouge, tient un instant à l’arrêt, puis se rétracte lentement.
Sept autres effets se choisissent depuis la grille de la barre latérale ou en boucle avec la touche E : Fumée, Flammes, Pixel et Kaléidoscope réutilisent la même géométrie de ruban avec un shader différent, tandis que Particules, Confettis et Fleurs basculent sur un système de particules indépendant — dont Fleurs, une variante à douze espèces de fleurs génératives distinctes.
Fonctionnalités
- Suivi du bout de l’index uniquement — un choix délibéré (pas les cinq doigts) pour un tracé net, façon stylet.
- Huit effets sélectionnables — Ruban, Fumée, Flammes, Pixel, Kaléidoscope, Particules, Confettis, Fleurs, changeables à la volée sans interrompre le tracé en cours.
- Kaléidoscope à 6 plis — la traînée est dupliquée, tournée et parfois inversée en miroir autour du centre de l’écran.
- Système de particules à 500 éléments — pool plafonné, rendu par vrais quads plutôt qu’en points GPU, pour éviter les plafonds de taille dépendants du matériel.
- Douze espèces de fleurs génératives — Marguerite, Tournesol, Coquelicot, Tulipe, Pâquerette, Aster, Cosmos, Zinnia, Anémone, Hibiscus, Crocus, Lys, chacune avec sa forme de pétale, sa palette et son nombre de pétales.
- Suivi robuste à deux mains — les mains sont routées par leur étiquette gauche/droite plutôt que par leur indice brut de détection, pour éviter les téléportations de traînée.
- Six curseurs de réglage en direct — largeur du ruban, vitesse de couleur, intensité de teinte, longueur max avant rétraction, délai avant rétraction, amplitude de balancement.
Sous le capot
Le rendu tient en deux passes WebGL, sans FBO ni simulation : une passe d’affichage dessine l’image webcam brute en miroir selfie, puis une passe de ruban construit, chaque frame en JavaScript, un ruban en triangle-strip à partir de l’historique de position du doigt — effilé de la pointe vers la queue. Chaque sommet échantillonne l’image vidéo à sa propre position historique à l’écran, ce qui donne l’impression qu’une bande de l’image réelle est tirée derrière le doigt plutôt qu’un simple trait de peinture plat.
Les effets « famille ruban » (Fumée, Flammes, Pixel, Kaléidoscope) réutilisent cette géométrie à l’identique et ne changent que le shader de fragment — et pour les Flammes, aussi le vertex shader, pour la dérive vers le haut. Les effets « famille particules » (Particules, Confettis, Fleurs) partagent un pool global de 500 particules dessinées en vrais quads plutôt qu’en points GPU : un choix fait après un bug réel où la taille des sprites se heurtait à une limite matérielle invisible, empêchant les fleurs de grossir au-delà d’un certain seuil malgré le curseur de taille poussé à fond.
Contrôles
| Touche / geste | Action |
|---|---|
| Index levé (par main) | Dessine une traînée dans l’effet actif |
| E | Passe à l’effet suivant (cycle les 8 effets) |
Stack technique
- MediaPipe Hands (HandLandmarker) — suivi de l’index de chaque main via Web Worker
- WebGL / GLSL — shaders dédiés par effet (ruban, fumée, flammes, pixel, particules)
- getUserMedia — capture webcam
- Vanilla JS — zéro framework, zéro build
Cas d’usage
Démonstration portfolio ludique et outil de photobooth interactif : dessiner dans les airs avec son index, changer d’effet à la volée, et laisser huit registres visuels très différents transformer le même geste simple.
Le doigt se lève, l’image fleurit.
