Une image balayée par un curseur devient de la musique additive, colonne par colonne — dessinez directement dessus pour composer en direct.
Vue d’ensemble
Chromascan transforme une image en instrument : une tête de lecture verticale balaie une photo importée ou un motif procédural, et chaque colonne de pixels devient un accord, en synthèse additive — un oscillateur par ligne de l’image. Plus la colonne est claire ou saturée, plus la note qui lui correspond ressort ; la teinte pilote le panoramique stéréo.
On peut aussi peindre directement sur l’image au pinceau : le calque de dessin est lu exactement de la même façon que la photo, mélangé à elle selon l’opacité de la touche de peinture. Sans import, l’instrument démarre sur un fond noir silencieux — il ne prend voix qu’à partir du moment où l’on commence à dessiner ou à importer une image.
Fonctionnalités
- Balayage sonore d’image — une tête de lecture parcourt l’image colonne par colonne, chaque colonne devenant un accord additif.
- Synthèse additive à deux voix — un oscillateur sinus (niveau de gris) et un triangle désaccordé (couleur) par note, crossfadés selon la saturation du pixel et panoramiqués selon sa teinte.
- Dessin en direct — un calque peignable superposé à l’image, lu et mélangé exactement comme la photo, avec un mode gomme.
- Motifs procéduraux — dégradé, bruit, anneaux, grille ou silence total, disponibles avant tout import d’image.
- Trois calques canvas empilés — fond (image/motif + filtres et mosaïque), dessin (pinceau) et tête de lecture (jauges de niveau par voix).
- Panneau de réglages en fiche coulissante — trois onglets (image, son, dessin) avec molettes rotatives et pads XY pour ajuster tiling, échelle et pinceau.
Sous le capot
Les calques de fond et de dessin exposent tous deux une méthode d’échantillonnage qui renvoie la luminance, la teinte et la saturation perçues à une coordonnée donnée. Le moteur de balayage lit les deux calques exactement au même endroit et mélange leurs résultats — la teinte et la saturation de la peinture sont fondues dans la lecture de la photo, pondérées par l’opacité du trait, la teinte étant mélangée comme un vecteur unitaire puisqu’elle est circulaire.
Une gamme musicale (nom, note fondamentale, octave, nombre de degrés) est convertie en tableau de fréquences en tempérament égal ; deux oscillateurs sont alloués par fréquence, partageant un même panoramique stéréo. La boucle de rendu, pilotée par requestAnimationFrame, avance la tête de lecture selon la vitesse réglée, échantillonne chaque ligne de la gamme à la colonne courante sur les deux calques, et pousse le résultat vers le moteur de voix ainsi que vers la jauge de niveau visuelle.
Stack technique
- Web Audio API — synthèse additive, oscillateurs, panoramique stéréo par voix
- Canvas 2D — trois calques empilés, échantillonnage pixel en temps réel
- ES6 modules natifs — chargés via
<script type="module">, aucun bundler - Vanilla JS — zéro framework, zéro dépendance
Cas d’usage
Un instrument génératif pour composer à partir d’images : sonifier une photo, dessiner une mélodie à main levée, ou explorer les motifs procéduraux comme point de départ — pensé comme une pièce de portfolio autant que comme un outil de création sonore.
Chaque pixel a une note à jouer — il suffisait de le lui demander.
