Vos mains pilotent une fractale psychédélique en temps réel — kaléidoscope, mandala, symétrie miroir — synchronisée à un synthé qui suit leurs mouvements.
Vue d’ensemble
Psyché Shader affiche une fractale plein écran générée par déformation de domaine et une boucle d’itération IFS, dont les paramètres — rotation, zoom, teinte, éclatement — sont pilotés en direct par la position des mains détectées via webcam. La détection tourne dans un Web Worker dédié pour ne jamais bloquer l’affichage. Chaque main pilote aussi un oscillateur du synthé embarqué : sa position dicte la fréquence et le panoramique stéréo, pendant qu’une poignée de gestes — poing, pincement, OK, paume ouverte — déclenchent des éclatements visuels, des pulsations de rotation, ou coupent le son.
Quatre modes de symétrie transforment le rendu en direct — désactivée, miroir horizontal, mandala à 4 plis, kaléidoscope à 6 plis — et l’ensemble des réglages existe en double, desktop et tactile, synchronisés en permanence.
Fonctionnalités
- Suivi de deux mains en Web Worker — MediaPipe HandLandmarker tourne hors du thread principal, les résultats sont consommés sans jamais bloquer l’affichage.
- Synthé à deux voix — un oscillateur en dents de scie et un en sinus par main, filtre passe-bas, enveloppe de vélocité, panoramique, le tout modulé par la position de la main.
- Chaîne d’effets parallèle — distorsion, delay, reverb envoyés en send depuis un bus commun, plus un LFO de trémolo sur le gain général.
- Quatre modes de symétrie — off, miroir horizontal, mandala (4 plis), kaléidoscope (6 plis), au choix.
- Reconnaissance de gestes — poing, pincement, OK, paume ouverte déclenchent des éclatements ou des pulsations sur le shader.
- Fractale par domain-warping — 3 octaves de déformation de domaine puis une boucle IFS à 5 itérations pour le motif final.
- Interface tactile dupliquée — les mêmes réglages existent en version tactile, synchronisés avec leurs équivalents desktop.
Sous le capot
À chaque frame, l’application avance l’état d’animation du shader (temps, teinte, rotation, zoom, éclatement), transfère l’image vidéo au worker sans copie (ImageBitmap), puis consomme le dernier résultat disponible du worker — sans jamais l’attendre, pour que le rendu ne cale jamais sur la détection. Les positions de mains pilotent en parallèle les fréquences d’oscillateurs et le panoramique via Web Audio, la détection de gestes déclenche éclatements ou pauses, et le renderer pousse enfin tous ces états vers les uniforms WebGL pour dessiner l’image.
Le moteur audio se construit paresseusement, au premier geste de l’utilisateur — contrainte des navigateurs. La chaîne par main : oscillateur en dents de scie et oscillateur en sinus vers un pré-mix, un filtre passe-bas, un gain de vélocité, un gain d’enveloppe, un panoramique, puis un bus d’effets commun qui alimente compresseur, limiteur et sortie, avec des sends parallèles vers la distorsion, le delay et la reverb.
Contrôles
| Touche / geste | Action |
|---|---|
| S | Change de mode de symétrie (off → miroir → mandala → kaléidoscope) |
| Poing / pincement / OK / paume ouverte | Déclenchent des éclatements visuels, des pulsations de rotation, ou coupent le son |
Stack technique
- MediaPipe Tasks Vision (HandLandmarker) — détection de mains, chargée dynamiquement depuis un CDN
- Web Worker dédié — exécute la détection hors du thread principal
- Web Audio API — synthé à oscillateurs, filtres, chaîne d’effets (distorsion, delay, reverb)
- WebGL / GLSL — shader fragment fait maison (domain-warping, fractale IFS, symétries)
- Vanilla JS — ES modules, zéro framework, zéro build
Cas d’usage
Démonstration portfolio et outil de VJing gestuel : les mains dessinent le motif fractal en direct pendant que le synthé embarqué répond au même geste, sans aucun contrôleur physique ni instrument à brancher.
Une main dessine le motif, l’autre lui donne une voix.
