Le second visualiseur MIDI réactif du site — nom de code « Prisme » : huit univers génératifs et trois instruments synthétisés, pilotés par un clavier MIDI ou un tap-tempo automatique.
Vue d’ensemble
Midi visual 2 (nom de code interne « Prisme ») reprend l’idée de Midi visual 1 — un clavier MIDI qui pilote à la fois des visuels génératifs et une synthèse sonore — mais avec une bibliothèque doublée : huit moteurs visuels (serpent, boules, cristal, poisson et quatre autres) contre six, et trois instruments synthétisés (piano, basse, rhodes) contre trois voix différentes côté Midi visual 1. Chaque note MIDI colore le rendu via une palette fixe à douze teintes indexée sur la classe de hauteur de la note, et le pitch bend du clavier module le son en temps réel.
Tous les moteurs dessinent ici sur un unique canvas 2D — pas de moteur fluide WebGL séparé comme dans le premier volet — avec un post-traitement de flou CSS appliqué en sortie de rendu. Le tout peut aussi tourner en pilote automatique via un tap-tempo, et s’enregistre en vidéo directement depuis le navigateur.
Fonctionnalités
- Huit moteurs visuels — sélectionnables au clavier (1-8) ou aux flèches, chacun avec ses propres gestionnaires de notes.
- Palette MIDI fixe à 12 notes — chaque classe de hauteur (do, do#, ré…) est associée à une couleur, partagée par tous les moteurs.
- Trois instruments synthétisés — piano, basse et rhodes, avec réverbération par convolution et delay façon bande.
- Pitch bend en temps réel — la molette du clavier MIDI module le son joué.
- Réactivité audio — les graves et médiums captés au micro modulent l’échelle et la vélocité du rendu.
- Tap-tempo automatique — génère des notes calées sur un BPM sans matériel MIDI branché.
- Enregistrement vidéo — capture canvas + audio de synthèse, export mp4 ou webm.
Sous le capot
Comme son prédécesseur, l’application tourne entièrement en scripts globaux partagés — pas de modules ES, pas d’imports — avec un état brut lissé en continu vers une copie interpolée que lisent seuls les moteurs de rendu, pour que les changements de curseurs ou de MIDI s’animent en douceur. Chaque moteur doit exposer un contrat strict (fonction de dessin, fonction de réinitialisation, gestionnaires de note on/off) mais les préfixes de ces fonctions ne sont pas uniformisés d’un moteur à l’autre — un détail interne qui n’affecte pas l’usage, mais qui montre que chaque univers a été écrit indépendamment.
Un détail notable : la convention de vélocité MIDI n’est pas uniforme selon le moteur actif — le moteur « poisson » reçoit la vélocité brute de la note (0-127) quand tous les autres reçoivent une valeur normalisée (0-1). La synthèse sonore tourne dans un contexte audio séparé de celui de l’analyse micro, avec une chaîne signal dédiée (gain maître, limiteur anti-saturation sur les accords, réverbération par convolution, delay bande), débloquée au premier geste utilisateur.
Contrôles
| Touche / geste | Action |
|---|---|
| 1-8 / ← → | Change de moteur visuel |
| H | Affiche / masque le panneau |
| F | Plein écran |
| Espace / double-tap | Fige l’image |
| C | Efface le rendu |
| ↑ / ↓ | 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-6 | Curseurs de mouvement |
| Molette de pitch | Pitch bend en temps réel |
Stack technique
- Vanilla JS ES5/ES6 — scripts globaux partagés, sans build ni framework
- Web MIDI API — notes, CC et pitch bend du clavier
- Web Audio API — deux contextes (analyse micro + synthèse piano/basse/rhodes, réverb par convolution, delay bande)
- Canvas 2D — huit moteurs visuels + post-traitement flou CSS
- Bruit de Perlin 1D fait maison, partagé entre moteurs
- MediaRecorder — export vidéo (canvas + audio de synthèse)
Cas d’usage
Même terrain de jeu que Midi visual 1 mais avec une palette visuelle et sonore élargie : accompagner un live MIDI, du VJing, ou simplement explorer huit ambiances génératives différentes sans quitter le clavier des yeux.
Douze notes, douze couleurs, huit façons de les faire vivre.
