Un visualiseur MIDI réactif en temps réel : six univers génératifs — fluide, tunnel, pluie et trois autres — pilotés au clavier MIDI, chaque note déclenchant à la fois un son synthétisé et une réaction visuelle.
Vue d’ensemble
Midi visual 1 connecte un clavier MIDI (ou un métronome tap-tempo intégré) à six moteurs visuels plein écran : harmoniques, carrés, pluie, toile, tunnel et un moteur fluide en WebGL. Chaque note jouée déclenche un son synthétisé maison — piano, cloche ou synthé — et une réaction sur le moteur actif, pendant que le micro peut aussi nourrir l’ensemble en analyse audio-réactive (graves, médiums, aigus).
Les paramètres de mouvement (vélocité, torsion, échelle, datamosh, dérive) se pilotent en direct via les CC du clavier MIDI, et s’animent en douceur plutôt que de sauter d’une valeur à l’autre. L’ensemble peut être enregistré en vidéo directement depuis le navigateur, image et son de synthèse compris.
Fonctionnalités
- Six moteurs visuels — harmo, square, rain, web, tunnel et fluid, sélectionnables au clavier ou aux flèches.
- Entrée MIDI complète — notes qui pilotent le visuel et le son, CC 1-5 mappés sur les curseurs de mouvement.
- Synthèse sonore intégrée — voix piano, cloche et synthé faites main, avec réverbération par convolution et delay à feedback.
- Réactivité au micro — analyse graves/médiums/aigus qui module les visuels en continu.
- Métronome tap-tempo — génère automatiquement des notes calées sur un BPM sans clavier MIDI branché.
- Enregistrement vidéo — capture le canvas et le son de synthèse, export direct en mp4 ou webm.
Sous le capot
L’application n’utilise aucun module ES ni framework : tous les fichiers sont de simples balises <script> qui partagent un unique espace global, dans un ordre de chargement précis. Un état brut (paramètres de mouvement, palette, flags audio) est lissé en continu vers une copie interpolée que lisent seuls les moteurs de rendu, pour que chaque changement — au clavier, au CC MIDI ou au micro — s’anime en douceur au lieu de sauter d’une valeur à l’autre.
Cinq des six moteurs dessinent sur un même canvas 2D, avec un fondu noir partiel à chaque image qui crée l’effet de traînée (« datamosh »). Le sixième, fluide, s’appuie sur une simulation WebGL vendue tierce (Pavel Dobryakov) pilotée par des impulsions (« splats ») colorées selon la hauteur de la note jouée. Le son tourne dans un second contexte audio distinct de celui de l’analyse micro, avec une chaîne signal complète — gain maître, limiteur, réverbération par convolution et delay à feedback — débloquée au premier geste utilisateur, comme l’exige la politique de lecture automatique des navigateurs.
Contrôles
| Touche / geste | Action |
|---|---|
| 1-6 / flèches | Change de moteur visuel |
| H | Affiche / masque le panneau |
| F | Plein écran |
| Espace / double-tap | Fige l’image |
| ↑ / ↓ | Change le type de son synthétisé |
| R | Démarre / arrête l’enregistrement vidéo |
| Notes MIDI | Pilotent le moteur actif + jouent une note synthétisée |
| CC 1-5 | Curseurs de mouvement (vélocité, torsion, échelle…) |
| Tap sur le moteur fluide | Injecte une impulsion (« splat ») tactile |
Stack technique
- Vanilla JS — scripts globaux, sans build ni framework
- Web MIDI API — entrée clavier MIDI (notes, vélocité, CC)
- Web Audio API — deux contextes audio (analyse micro + synthèse piano/cloche/synthé, réverb par convolution, delay)
- Canvas 2D — cinq des six moteurs visuels
- WebGL — moteur fluide (simulation vendue, Pavel Dobryakov, MIT)
- MediaRecorder — export vidéo (canvas + audio de synthèse)
Cas d’usage
Pensé pour accompagner un set ou une improvisation au clavier MIDI, en VJing live ou en simple session de jeu solo : brancher un contrôleur, choisir un univers visuel, et laisser chaque note dessiner et sonner à la fois.
Chaque touche enfoncée est à la fois une note et un pinceau.
