blog.vfg.lol

notes-blocs : waterfall montant, sacs et suggestions fantômes

POC BirdFoutain — piano 1 octave, histogramme temps réel, pivot dynamique, profil de jeu non punitif

notes-blocs : waterfall montant, sacs et suggestions fantômes

notes-blocs est le premier banc d’essai avec sources de la série visualisation harmonique. Sandbox isolée (aucun import depuis rainbowpiano) pour figer l’expérience de jeu 2D avant de la porter dans le produit.

Ce que fait le POC

Disposition en trois colonnes :

  • Gauche — gammes et motifs (majeure, mineure, pentatonique, blues, arpèges), pivot, vitesse / hauteur du waterfall, démo automatique (montante, descendante, aller-retour, boucle).
  • Centre — sacs récepteurs en haut, cascade canvas ~60 fps qui monte depuis le clavier, piano 1 octave (C3–C4) avec overlays d’intervalles, frise Avant / Présent / Après, score en demi-tons signés.
  • Droite — coloriage Note / Intervalle / Demi-tons, palettes de 12 couleurs (copie / export / import JSON), géométrie du clavier, inspecteur.

Suggestions fantômes en deux tiers (fort / filigrane), intentions harmoniques (repos, ouverture, appui, élan…), indices émotionnels avec bande de certitude — jamais présentés comme faits universels. Métriques de style non punitives (Safe %, Combo, Strike).

Lien avec Rainbow Journey

Le POC préfigure des gestes déjà discutés pour l’essai UI in-game (couloirs, paquets, suggestions ancrées). Il valide l’interaction 2D sans charger Three.js ni la chaîne MIDI produit. Le son local Bird DP1 n’est pas dans le périmètre de ce sandbox.

État

Sources sous pocs/notes-blocs/ ; typecheck et build OK dans le handoff du hub savoir (2026-09-15). Tutoriel local : docs/journal/2026-09-14_pocs-visualisation-harmonique/TUTORIEL_POCS.md.

Lancer

cd pocs/notes-blocs
npm install
npm run dev

Ou via le hub : pocs/savoir → npm run serve → apps/notes-blocs/.

À retenir

notes-blocs fixe un contrat d’affichage : la note monte, le sac grossit, le fantôme guide sans punir. C’est la planche la plus proche du ressenti « Guitar Hero inversé » pour Rainbow Journey.

source markdown

Concepts de cet article

RainbowJourneyhandoffVFG Hero

Partage le plus de concepts avec