Le concept
Visual Experience est né d’un hackathon à Clermont-Ferrand sur le thème “Visual Experience”. L’idée : transformer le son ambiant en art visuel.
Le spectateur parle, chante, tape dans ses mains - et une reine apparaît. Chaque fréquence audio contrôle un aspect de l’animation : l’amplitude pilote l’opacité et l’échelle des éléments, le spectre fréquentiel distribue l’énergie sur différents tiles visuels.
Comment ça marche
Le pipeline est simple mais efficace :
- Capture - Le micro du navigateur via Web Audio API, split en canaux stéréo
- Analyse - FFT (Fast Fourier Transform) avec 64 bins de fréquence, mise à jour toutes les 50ms
- Mapping - L’amplitude max (+60dB de normalisation) est convertie en position de seek sur les timelines anime.js
- Rendu - Chaque tableau compose des images PNG de la reine avec des animations d’opacité, d’échelle et de timing
Les 9 tableaux
Chaque tableau (state) est une composition visuelle autonome :
- States 1-2 - La reine émerge. Background pulse, puis 5 tiles apparaissent en cascade avec un easing élastique
- State 3 - Tiles déclenchés aléatoirement quand l’amplitude dépasse un seuil - effet “beat-reactive”
- States 4-5 - Compositions complexes. Le spectre FFT est découpé : chaque tile réagit à sa propre bande de fréquences
- States 6-8 - Respiration. Transitions douces, compositions épurées
- State 9 - Silence. Fin de la performance
L’architecture socket.io
Le projet utilise socket.io pour séparer l’émetteur (une tablette avec le micro) du récepteur (un écran/projecteur qui affiche les visuels). Pendant la démo du hackathon, une personne tenait la tablette dans le public pendant que les visuels s’affichaient sur le mur.
Ce que j’en retiens
C’est un projet de pure exploration créative - pas d’utilisateur final, pas de product-market fit, juste l’envie de connecter du son à de l’image. Le mapping audio → animation via seek() d’anime.js est une technique élégante : au lieu de calculer des valeurs frame par frame, on laisse l’animateur définir les extrêmes et le son choisit où on se situe entre les deux.
Le code porte les traces du hackathon : pas de tests, des console.log partout, un state_9 vide. Mais le pipeline audio-visuel fonctionne et le concept tient.