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. Piano synthétisé, delay et reverb réglables, sauvegarde automatique dans le navigateur — aucun fichier, aucun compte.

Aperçu de Music Line Rider — un parcours de luge coloré et sa luge sur fond sombre
Le parcours se colore selon les notes : chaque descente est aussi une partition.

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.
  • Piano synthétisé — aucun sample : une voix de piano à queue construite par synthèse (spectre harmonique, unisson désaccordé, partiels inharmoniques, bruit de marteau, EQ « table d’harmonie »).
  • 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.
  • Transport complet — lecture / pause, rembobinage fluide, marqueur de départ, ralenti, pelure d’oignon (trajectoire et luges fantômes), caméra qui suit, 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.

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, accrochée à la luge par trois contraintes (assise, pieds, mains) en couplage à sens unique : il ne peut jamais déstabiliser la luge. Si une accroche reste trop étirée, il se détache 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) ; 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.


Contrôles

ToucheAction
P / L / E / S / HCrayon · ligne · gomme · sélection · main
EspaceLecture / pause
↑ / ↓Octave de la note active
← / →Demi-ton
G · Maj+GGrille · magnétisme sur la grille
FPlein écran
TabMasquer les contrôles (mode zen)
SupprSupprimer la sélection
Ctrl+Z / Ctrl+Maj+ZAnnuler / rétablir
Clic molette ou clic droitDéplacer la vue

Stack technique

  • Web Audio API — piano synthétisé sur PeriodicWave, EQ, reverb à convolution, delay à réinjection, une voix soutenue par trait
  • Canvas 2D — rendu du parcours, de la luge 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é
  • 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.

Détails


Client

Projet personnel


Projet précédent

Projet suivant

Autres projets