Une machine à feedback qui ne montre que le mouvement : chaque geste devant la webcam jaillit en traînées colorées qui s’étirent à l’infini, comme aspirées dans un tunnel.
Vue d’ensemble
Gush cam n’affiche jamais l’image de la caméra. Elle ne garde que ce qui bouge : le flux optique de chaque image est traduit en couleur selon la direction du mouvement (vers la droite, la gauche, le haut ou le bas), puis injecté dans une image qui se réinjecte elle-même en boucle, en zoomant légèrement à chaque fois. Un simple mouvement de main laisse une gerbe de lumière qui s’échappe vers les bords de l’écran.
La souris pilote le tunnel : à gauche et en haut, les traînées se replient vers le centre ; à droite et en bas, elles explosent vers l’extérieur. Un clic efface tout pour repartir d’un écran noir. L’expérience est une adaptation de Gush d’Adam Ferriss, lui-même construit sur le shader « flow » d’Andrew Benson, enrichie de palettes de couleurs, d’un réglage de persistance et d’un mélange optionnel avec l’image de la caméra.
Fonctionnalités
- Le mouvement comme seule matière : flux optique calculé en direct, chaque direction de mouvement a sa propre couleur.
- Tunnel de feedback piloté à la souris : la position du pointeur règle le zoom horizontal et vertical, des traînées qui se replient jusqu’à celles qui explosent. Au doigt sur mobile.
- Mode pixel : bascule entre un rendu lisse et un rendu en gros pixels qui transforme les traînées en stries cristallines.
- Six palettes : l’original rouge, vert, bleu, plus Prism, Lava, Abyss, Toxic et Ghost, avec fondu enchaîné entre elles.
- Sept curseurs de réglage : intensité du flux, déplacement, zoom X et Y, persistance des traînées, douceur, mélange avec l’image de la caméra.
- Capture photo et enregistrement vidéo : export PNG instantané ou capture vidéo du rendu, avec gestion dédiée du téléchargement sur iOS. Bascule caméra avant/arrière sur mobile.
Sous le capot
Quatre passes WebGL tournent à chaque image. La première estime le flux optique entre l’image courante et la précédente : la différence de luminance dans le temps, divisée par le gradient spatial régularisé, donne une vitesse signée en X et en Y. Comme une texture 8 bits ne stocke pas de valeurs négatives, cette vitesse est répartie sur quatre canaux positifs (droite, gauche, haut, bas), ce qui fournit directement les quatre couleurs de l’effet. Une deuxième passe floute légèrement ce champ pour lui donner un aspect fluide plutôt que granuleux.
La troisième passe est le cœur de la machine : elle relit l’image précédente du feedback en la zoomant autour du centre et en la déplaçant le long du flux, puis la combine au nouveau mouvement selon le mélange de l’original (feedback × (1 − flux) + flux²). Rien ne s’efface tant que le mouvement ne recouvre pas l’ancien, d’où ces traînées qui semblent ne jamais finir. La dernière passe affecte une couleur de la palette à chaque direction ; pour les palettes autres que l’originale, les couleurs sont moyennées en privilégiant la direction dominante, ce qui évite que l’écran ne sature en blanc.
Contrôles
| Touche / geste | Action |
|---|---|
| Souris (ou glisser au doigt) | Règle le zoom du tunnel (X et Y) |
| Clic / tap, Espace | Efface les traînées |
| X | Bascule rendu lisse / pixel |
| C | Change de palette |
| L | Verrouille / libère le contrôle au pointeur |
| P | Capture une photo PNG |
| R | Démarre / arrête l’enregistrement vidéo |
| S | Ouvre / ferme le panneau de réglages |
| H | Masque / affiche l’interface |
| F | Plein écran |
| Flèches | Intensité du flux (haut/bas) et zoom (gauche/droite) |
| Bouton caméra (mobile) | Bascule caméra avant / arrière |
Stack technique
- Vanilla JS, aucune dépendance, aucun build
- WebGL : pipeline 4 passes (flux optique, flou, feedback en ping-pong, affichage en palette)
- getUserMedia : flux webcam, avec bascule caméra avant/arrière sur mobile
- MediaRecorder : enregistrement vidéo, avec chemin de sauvegarde dédié pour iOS
Cas d’usage
Un instrument visuel pour danser, jouer avec ses mains ou projeter derrière un DJ set : plus on bouge, plus l’écran s’embrase. Le mode pixel et les palettes en font aussi une petite fabrique de visuels à capturer en photo ou en vidéo.
On ne voit plus le corps, seulement ce qu’il laisse derrière lui.
