La webcam se transforme en pointillisme génératif : chaque mouvement laisse une traînée de points lumineux qui s’accumule et s’estompe en temps réel.
Vue d’ensemble
Moving capture capte le mouvement de la webcam en direct et le convertit en un semis de points sur une grille — un rendu stipplé plutôt qu’une image continue. Ce qui bouge devant la caméra s’illumine en points blancs qui s’accumulent avec une décroissance exponentielle, laissant une traînée lumineuse derrière chaque geste avant de s’éteindre progressivement ; ce qui reste immobile disparaît naturellement du rendu.
Six curseurs (sensibilité, décroissance, luminosité, taille des points, turbulence…) permettent d’ajuster en direct la densité et le comportement du semis, avec des réglages fins possibles au clavier et un panneau de paramètres escamotable.
Fonctionnalités
- Détection de mouvement en direct — diff de luminance entre images successives, filtrée du bruit caméra.
- Accumulation à décroissance exponentielle — chaque mouvement laisse une traînée qui s’estompe progressivement plutôt que de disparaître d’un coup.
- Rendu en grille de points — l’intensité accumulée contrôle le rayon et l’activation de chaque point, avec seuil d’activation pseudo-aléatoire par cellule.
- Turbulence réglable — décale chaque point de son centre de cellule pour un rendu moins mécanique.
- Six curseurs de réglage — décroissance, sensibilité, luminosité et plus, ajustables à la souris ou finement au clavier.
- Enregistrement vidéo — capture du rendu stipplé directement depuis le navigateur.
Sous le capot
Deux programmes WebGL tournent à chaque image. Une passe d’accumulation calcule le diff de luminance entre l’image vidéo courante et la précédente, filtre le bruit résiduel de la caméra, puis accumule le résultat dans une paire de FBO en ping-pong avec une décroissance exponentielle (nouvelle_accumulation = max(accumulation * décroissance, mouvement)) — c’est ce qui produit la traînée qui s’estompe au lieu d’un simple flash binaire. Une passe d’affichage convertit ensuite cette intensité accumulée en grille de points : chaque cellule reçoit un seuil d’activation pseudo-aléatoire propre, l’intensité pilote le rayon du point, et une turbulence optionnelle décale chaque point de son centre de cellule.
La vidéo est chargée en texture à chaque image, avec deux emplacements de texture (image courante / précédente) qui permutent en fin de boucle pour que l’image courante devienne la précédente au tour suivant. Les six curseurs de réglage passent tous par une fonction de conversion dédiée qui transforme leur valeur brute 0-100 en valeur d’uniforme shader.
Contrôles
| Touche / geste | Action |
|---|---|
| Espace / C | Efface le rendu accumulé |
| S | Ouvre / ferme le panneau de réglages |
| R | Démarre / arrête l’enregistrement vidéo |
| H | Masque / affiche l’interface |
| F | Plein écran |
| Flèches | Ajuste finement sensibilité et décroissance |
| Barre tactile (mobile) | Équivalent des raccourcis clavier au doigt |
Stack technique
- Vanilla JS — aucune dépendance, aucun build
- WebGL — pipeline 2 passes (accumulation de mouvement + rendu en grille de points), FBO en ping-pong
- getUserMedia — capture du flux webcam
- MediaRecorder — enregistrement vidéo du rendu
Cas d’usage
Une pièce ludique pour installation ou photobooth interactif : rester immobile fait disparaître l’image, bouger la fait renaître en pointillisme lumineux — un effet visuel simple à comprendre en quelques secondes devant l’écran.
Rester immobile, c’est disparaître ; bouger, c’est exister en points de lumière.
