Un clone de Line Rider qui compose de la musique : vous dessinez un parcours de luge, chaque trait porte une note de piano, et la luge simulée joue votre mélodie en descendant.
Vue d’ensemble
Music Line Rider reprend le principe de Line Rider — on trace des traits à la souris, un personnage en luge les descend en obéissant à la physique — et le détourne en outil de composition. Chaque trait solide se voit attribuer une note de piano (hauteur + octave) : quand la luge le touche, la note sonne, et elle tient tant que la luge reste en contact. Dessiner une descente revient donc à écrire une mélodie, qu’on rejoue d’un appui sur Lecture.
La couleur de chaque trait est dérivée de sa note (teinte = classe de hauteur, clarté = octave), si bien que le parcours se lit comme une partition. Une grille rythmique calée sur un BPM réglable aide à espacer les traits en mesure, sans jamais quantifier le son : le placement reste libre. Huit instruments synthétisés au choix, delay et reverb réglables, sauvegarde automatique dans le navigateur, projet exportable en JSON ou en vidéo — aucun compte, rien à installer.
Fonctionnalités
- Une note par trait — hauteur et octave choisies sur un mini-clavier, avant de tracer ou en sélectionnant un trait existant ; changer la note la joue aussitôt pour vérifier à l’oreille.
- Note tenue tant que la luge touche — le contact prolongé prolonge le son, ce qui transforme la forme du trait en durée de note.
- Huit instruments synthétisés — piano, marimba, bol chantant, boîte à musique, célesta, cloche FM, synthé néon, onde pulsée ; aucun sample, tout est généré par synthèse, et l’instrument se change à tout moment pendant qu’on compose (panneau de réglages ou raccourci clavier).
- Outils de dessin — crayon à main levée (simplifié en segments), ligne droite, gomme de précision qui n’entame le trait que là où passe le curseur, sélection au lasso pour déplacer ou supprimer plusieurs traits.
- Grille rythmique + BPM — la grille figure la pulsation et se resserre en direct avec le BPM ; elle n’impose rien au son et disparaît pendant la lecture.
- Un vrai personnage — bonnet rayé à pompom, lunettes de ski, écharpe qui vole au vent, accroché à la luge par une corde ; en cas de choc trop violent il se détache et part en pantin pendant que la luge continue sa route et joue les notes suivantes.
- Transport complet — lecture / pause, rembobinage fluide, marqueur de départ, ralenti, pelure d’oignon (trajectoire et luges fantômes), caméra qui suit et se recentre en douceur à chaque lancement de lecture, plein écran, mode zen qui masque toute l’interface.
- Effets réglables — delay à réinjection et reverb à convolution, avec sauvegarde automatique du parcours et des réglages dans le navigateur.
- Export projet ou vidéo — télécharger le parcours en JSON pour le rouvrir plus tard, ou filmer directement l’animation avec son en vidéo, qui s’arrête automatiquement à la fin du parcours dessiné.
- Tablette et téléphone — interface repensée en bandeaux et feuilles coulissantes (avec une disposition dédiée au mode paysage), cibles agrandies, pincer pour zoomer et deux doigts pour se déplacer.
Sous le capot
La luge est un corps rigide (position et angle intégrés en Verlet) avec quatre points de contact ; la résolution des collisions corrige à la fois la position et l’orientation pour qu’elle épouse le terrain sans se retourner sur une pente douce. Le personnage est une marionnette Verlet distincte, aux bras et jambes tendus (des os rigides qui ne peuvent que viser, jamais se tordre), accrochée à la luge par deux points d’ancrage fermes (assise, pieds) et une corde vers les mains, en couplage à sens unique : il ne peut jamais déstabiliser la luge. Si les ancrages restent trop étirés ou qu’il encaisse un choc franc, il se détache complètement de la luge — plus aucune attache, ni la corde — et part en pantin tandis que la luge poursuit sa route et continue de jouer les notes.
La physique étant déterministe, toute la descente est pré-simulée une fois et l’état de la luge est mémorisé image par image : se placer à n’importe quel instant de la timeline est alors instantané, et le rembobinage maintenu défile de façon fluide. Côté son, chaque trait possède sa propre voix Web Audio soutenue (déclenchée à l’entrée en contact, relâchée en douceur à la sortie), synthétisée selon l’instrument choisi parmi les huit disponibles ; le bus passe par un delay à réinjection, une reverb à convolution sur réponse impulsionnelle synthétisée, une égalisation « table d’harmonie » puis un compresseur. L’export vidéo capture ce même bus audio en direct et l’image du canvas, assemblés et enregistrés par le navigateur — la durée de la vidéo est calculée à l’avance en rejouant la physique pour trouver la fin réelle du parcours.
Contrôles
| Touche / geste | Action |
|---|---|
| P / L / E / S / H | Crayon · ligne · gomme · sélection · main |
| Espace | Lecture / pause |
| ↑ / ↓ | Octave de la note active |
| ← / → | Défiler la timeline (maintenir = rembobiner / avancer en temps réel, Maj = ×6, appui bref = une image) |
| I · Maj+I | Instrument suivant · précédent |
| G · Maj+G | Grille · magnétisme sur la grille |
| F | Plein écran |
| Tab | Masquer les contrôles (mode zen) |
| Suppr | Supprimer la sélection |
| Ctrl+Z / Ctrl+Maj+Z | Annuler / rétablir |
| Ctrl+S / Ctrl+O | Télécharger le projet en JSON / en charger un |
| Clic molette ou clic droit | Déplacer la vue |
| Un doigt (tactile) | Dessiner avec l’outil actif |
| Deux doigts (tactile) | Pincer pour zoomer, glisser pour déplacer la vue |
Stack technique
- Web Audio API — huit instruments synthétisés (aucun sample), EQ, reverb à convolution, delay à réinjection, une voix soutenue par trait
- Canvas 2D — rendu du parcours, de la luge, du personnage et de la grille, caméra pan / zoom qui suit la descente
- Physique maison — corps rigide en Verlet, contacts correcteurs d’orientation, marionnette Verlet en couplage à sens unique, descente pré-simulée pour un scrub instantané
- MediaRecorder + captureStream — export vidéo (image + son) directement dans le navigateur, sans service tiers
- Modules ES6 vanilla — zéro dépendance, zéro build, pas même un CDN ; sauvegarde automatique en localStorage
Cas d’usage
Un bac à sable où composer sans solfège : on esquisse une pente, on accroche des notes aux traits, on lance la luge et on ajuste la courbe jusqu’à ce que la phrase sonne juste. Le geste de dessin et le geste musical ne font qu’un — et le résultat se relit d’un coup d’œil, puisque la couleur raconte la mélodie.
Une pente, des traits, une luge qui glisse — le tracé devient partition.
