Tracez un geste du bout du doigt : il se met à tourner en boucle, et chaque fois qu’il croise une corde, la corde chante. Quelques traits suffisent pour composer une petite musique qui ne s’arrête plus.
Vue d’ensemble
Sonic wires est un instrument qu’on joue en dessinant. Des cordes verticales traversent l’écran, chacune accordée sur une note. Chaque geste tracé à la souris ou au doigt est enregistré avec son rythme exact, puis rejoué en boucle par un point lumineux qui suit le tracé. À chaque passage sur une corde, la note sonne et la corde vibre. Plusieurs gestes superposés forment des boucles qui se croisent, se répondent et dessinent peu à peu une composition.
L’expérience reprend le principe de SoundBow, une interface sonore à dessiner créée par binaura.net en 2012, et le pousse beaucoup plus loin : rendu plein écran fluide, cordes qui vibrent vraiment, son entièrement synthétisé avec réverbération et écho, jeu à plusieurs doigts, réglages par fil, quantification au tempo, sauvegarde et partage des compositions.
Fonctionnalités
- Des gestes qui deviennent des boucles : chaque tracé est rejoué à sa vitesse d’origine, en boucle ou en aller-retour, jusqu’à 16 fils en même temps. Le plus ancien laisse sa place quand on dépasse la limite.
- Des cordes vivantes : de 4 à 16 cordes, déplaçables par leur poignée, qui vibrent au point d’impact avec une amplitude liée à la vitesse du geste, plus une onde et des étincelles à chaque note.
- Un son doux, entièrement synthétisé : dix timbres (harpe, célesta, cristal, piano, boîte à musique, bol chantant, marimba, goutte, cloche, sonar), réverbération et écho ping-pong, aucun fichier audio.
- Des gammes toujours consonantes : pentatoniques majeure et mineure, série harmonique, modes dorien, lydien, mixolydien, mineur naturel et hirajoshi, avec tonalité et octave réglables. Le nom de chaque note s’affiche sous sa corde.
- Un jeu expressif : plus le geste est rapide, plus la note est forte ; plus l’impact est haut, plus elle est claire. Une quantification au tempo garde les boucles en rythme.
- Chaque fil se règle : couleur, timbre, vitesse (de ×¼ à ×4), sens de lecture, sourdine ou suppression, d’un clic droit ou d’un appui long.
- Multi-touch et mode démo : un fil par doigt sur tablette et téléphone. Le mode démo (touche D) dessine quelques boucles à votre place pour découvrir l’instrument.
- Sauvegarde et partage : la composition est gardée dans le navigateur, exportable en fichier, partageable par un simple lien, et capturable en image ou en vidéo avec le son.
Sous le capot
Chaque point d’un geste est horodaté. À la lecture, la position du point lumineux est calculée par interpolation dans le temps réel, ce qui donne un mouvement parfaitement fluide quelle que soit la cadence de l’écran. À chaque image, le programme parcourt tous les points franchis depuis l’image précédente et cherche les cordes traversées : même un aller-retour très rapide sur une corde fait sonner deux notes.
Le son est produit en direct par empilement de partiels sinusoïdaux à attaque douce, comme pour l’identité sonore du site. Chaque note est une voix indépendante, panoramiquée selon la position de sa corde, puis envoyée dans une réverbération à convolution générée par le code et un écho ping-pong calé sur le tempo. Un compresseur et un limiteur gardent l’ensemble propre, même avec seize boucles qui jouent ensemble. La vibration visuelle des cordes reproduit celle d’une vraie corde pincée : trois modes d’onde stationnaire, excités selon la hauteur du point d’impact, qui s’amortissent chacun à leur rythme.
Contrôles
| Touche / geste | Action |
|---|---|
| Glisser dans la zone | Tracer un fil (un fil par doigt) |
| Glisser une poignée | Déplacer une corde |
| Clic droit / appui long sur un fil | Régler ou supprimer le fil |
| Espace | Pause / lecture de tous les fils |
| C | Effacer les fils |
| R | Réinitialiser les cordes |
| Ctrl/⌘ + Z | Annuler |
| T / Maj + T | Instrument suivant / précédent |
| 1 à 9, 0 | Choisir un instrument |
| G | Changer de gamme |
| Flèches haut / bas | Octave |
| Flèches gauche / droite | Tempo |
| Q | Quantification au tempo |
| D | Mode démo |
| M | Sourdine |
| P | Capture PNG |
| V | Enregistrer une vidéo avec le son |
| S | Panneau de réglages |
| H | Masquer l’interface |
| F | Plein écran |
| ? | Aide |
Stack technique
- Vanilla JS en modules ES6, aucune dépendance, aucun build
- Web Audio : synthèse additive, voix polyphoniques, réverbération à convolution générée, écho ping-pong, compresseur et limiteur
- Canvas 2D : courbes lissées, lueurs en fusion additive, cordes vibrantes, rendu adapté à la densité de l’écran
- Pointer Events : souris et multi-touch, un geste par doigt
- MediaRecorder et CompressionStream : vidéo avec le son, composition compressée dans un lien de partage
Cas d’usage
Un instrument immédiat pour composer sans connaître le solfège : la gamme pentatonique garantit que tout sonne juste. Il se prête aussi à la projection (mode sans interface, palette au choix), aux ateliers avec les enfants sur tablette, ou à la création de courtes boucles musicales à exporter en vidéo et partager par lien.
Tracez un geste, il continue de jouer sans vous.
