Chaque note jouée plante une fleur. Plus vous jouez fort, plus elle s’ouvre ; plus vous tenez la note, plus sa tige monte. À la fin du morceau, il reste un jardin que personne d’autre n’aura.
Vue d’ensemble
Jardin MIDI transforme un morceau joué au clavier en un jardin peint à l’aquarelle. À chaque note, une graine tombe à l’endroit de la touche et germe. Tant que la touche reste enfoncée, la tige pousse sous vos yeux. Quand vous la relâchez, la fleur éclot d’un coup, avec un petit rebond.
Les graves poussent à gauche, les aigus à droite, comme sur un piano. Chaque note a sa couleur (le do est carmin, le sol bleu céruléen, le fa dièse blanc) et chaque octave son espèce : ombelles dans les basses, puis tulipes, marguerites, coquelicots, clochettes, et de petits myosotis tout en haut du clavier. Un accord ne donne pas une rangée de fleurs mais un bouquet, les tiges serrées au pied et les têtes qui s’écartent.
Le temps donne la profondeur. Les premières notes reculent peu à peu vers le fond, plus petites et plus pâles dans la brume, et les dernières restent au premier plan. Le sol monte doucement au fil du morceau, si bien qu’un long morceau remplit tout le champ au lieu d’empiler les fleurs sur une ligne. Rien ne fane : le vent fait seulement balancer chaque fleur à son rythme.
Quatre instruments sont au choix : un piano feutré, une harpe, des cloches et un synthé doux. Chacun a sa famille de fleurs. La harpe fait pousser des lys et des iris sur des tiges fines et hautes, les cloches des campanules et du muguet, le synthé des corolles translucides qui luisent. On peut changer d’instrument en plein morceau : le jardin mélange alors les familles.
Les accords sont reconnus au moment où on les joue (majeur, mineur, septième, sus, diminué, augmenté, renversements compris) et leur nom s’écrit quelques secondes au-dessus du bouquet. Un accord reconnu devient un vrai bouquet : tiges serrées et nouées par un ruban, couleurs accordées entre elles, plus chaudes pour un accord majeur et plus froides pour un mineur, et une fleur plus grande pour la fondamentale.
Autour, le jardin écoute. Les papillons se posent sur les fleurs qui viennent d’éclore, sont plus nombreux quand le jeu est calme et lié, et s’envolent tous si une note claque trop fort. Un crescendo ou un long accord tenu à la pédale fait passer un vol d’oiseaux ; certains se posent sur les plus hautes tiges et décollent à la première note grave et forte. Des nuages passent devant le soleil et leur ombre glisse sur le jardin.
La journée avance avec le morceau : aube rose, plein jour, crépuscule orangé, puis la nuit, bleu nuit à l’aquarelle, avec la lune, les étoiles et des lucioles qui clignotent sur le tempo estimé de ce que vous jouez. Une longue suite d’accords mineurs joués doucement fait tomber la lumière plus vite, un passage fort et majeur la fait remonter. On peut aussi choisir le moment à la main, et la saison : pétales au printemps, aigrettes en été, feuilles qui tombent en automne, flocons et givre en hiver.
Fonctionnalités
- Clavier MIDI : branchez-le avant ou pendant le jeu, il est reconnu tout seul. La pédale de sustain compte : une note tenue par la pédale continue de faire pousser sa tige.
- Sans clavier MIDI : deux rangées du clavier d’ordinateur jouent comme un piano, deux touches changent d’octave, et la hauteur de la souris règle la force. Sur téléphone, un petit clavier apparaît en bas de l’écran : le haut de la touche joue doux, le bas joue fort.
- Démo intégrée : « Petit jardin en ré », une courte pièce originale d’une quarantaine de secondes, fait pousser un jardin complet sans rien brancher.
- Quatre instruments : piano feutré, harpe, cloches et synthé doux, avec une réverbération ample. Tout sonne par défaut, clavier MIDI compris ; le bouton du son permet de couper seulement le clavier MIDI s’il a déjà son propre son.
- Accords automatiques : en option, une touche du clavier d’ordinateur ou de l’écran joue l’accord de la tonalité choisie, très légèrement arpégé. Activé par défaut sur téléphone, jamais appliqué à un clavier MIDI.
- Ambiances et saisons : la journée qui avance avec le morceau, ou un moment choisi (aube, jour, crépuscule, nuit), et quatre saisons. L’image exportée garde l’ambiance et sa légende indique la saison.
- Sur téléphone : un clavier tactile plus haut, sur une ou deux rangées, un menu qui regroupe tous les réglages, et un mode immersif sur iPhone, où la page ne peut pas passer en plein écran.
- Le repos : après six secondes sans note, le jardin s’assombrit légèrement sur les bords et affiche sa date, son nombre de notes et sa durée. Une nouvelle note reprend le morceau dans le même jardin.
- Enregistrer l’image : le jardin est redessiné en grand, à deux fois la résolution de l’écran, avec une petite légende en bas.
- Enregistrer le morceau : les notes jouées partent dans un fichier .mid. Glissez ce fichier (ou n’importe quel autre .mid) sur la page, et le jardin correspondant repousse en rejouant le morceau.
- Rien ne se perd : le jardin en cours est gardé dans le navigateur et revient tel quel après un rechargement de la page.
Sous le capot
Aucune fleur n’est une image. Chacune est dessinée en vecteurs à partir de sa note, de sa vélocité, de sa durée et d’une graine aléatoire qui lui est propre : le même morceau redonne exactement le même jardin, à n’importe quelle taille. C’est ce qui permet d’exporter une image bien plus grande que l’écran sans la moindre perte. La hauteur de tige suit une courbe logarithmique de la durée : une note piquée donne une pousse, une note de quatre secondes reste sous les deux tiers de l’écran.
Pour rester fluide avec un millier de fleurs, les tiges et les feuilles d’une même tranche de profondeur sont tracées en un seul trait, et chaque fleur éclose est gardée dans une petite image hors écran, refaite plus petite quand elle s’éloigne. Seul le balancement est recalculé à chaque image. Entre deux tranches, un voile de brume très léger pâlit tout ce qui est derrière.
Le son vient d’un banc de résonateurs, sans oscillateur : chaque instrument n’est qu’un jeu de réglages de ces résonateurs. Le piano est une corde frappée par un marteau feutré, la harpe une corde pincée qui résonne longtemps, la cloche suit les partiels d’une cloche d’église, et le synthé doux entretient des résonateurs très amortis avec un léger souffle. Le fichier .mid est écrit octet par octet, sans bibliothèque, avec un canal par instrument.
Le ciel et la terre de chaque moment de la journée sont peints une fois pour toutes, puis fondus l’un dans l’autre avec une teinte globale : la nuit ne coûte pas plus cher que le jour. Une petite analyse du jeu (tempo, crescendo, jeu lié ou haché, humeur majeure ou mineure) pilote les créatures et la lumière.
Contrôles
| Touche / geste | Action |
|---|---|
| Clavier MIDI | Planter des fleurs (pédale de sustain prise en compte) |
| Q S D F G H J K (AZERTY) | Touches blanches, de do à do |
| Z E T Y U (AZERTY) | Touches noires |
| W / X (AZERTY) | Octave plus grave / plus aiguë |
| Hauteur de la souris | Force de la note (en haut doux, en bas fort) |
| Clavier en bas de l’écran (tactile) | Jouer au doigt, la hauteur sur la touche règle la force |
| Glisser un .mid sur la page | Faire pousser le jardin de ce morceau |
| Barre d’outils | Son, instrument, réglages (ambiance, saison, accords automatiques, tonalité), nouveau jardin, image, morceau, plein écran |
| Téléphone | Bouton réglages : tout est regroupé dans un seul menu |
Stack technique
- Vanilla JS en modules ES6, aucune dépendance, aucun build, aucune police externe
- Web MIDI : branchement à chaud, plusieurs entrées, pédale de sustain
- Web Audio : AudioWorklet de résonateurs modaux, piano feutré, petite réverbération générée
- Canvas 2D : fleurs procédurales en vecteurs, perspective, brume, grain de papier, export PNG redessiné
- Lecture et écriture de fichiers MIDI standard, écrites à la main, un canal et un programme par instrument
- Reconnaissance d’accords, estimation du tempo, ciel et terre précalculés par moment de la journée
Cas d’usage
Garder une trace de ce qu’on a joué ce soir-là, comparer le jardin d’une valse et celui d’un morceau plaqué au forte, montrer à un enfant ce que changent la force et la durée d’une note. Un pianiste qui improvise repart avec une image à encadrer et le fichier pour la refaire pousser plus tard.
Une note tenue, une tige qui monte, une fleur qui s’ouvre.
