RainbowJourney face à Chromatic River
Deux POC développés en parallèle à partir du même prompt : apprendre et improviser au piano MIDI par synesthésie couleurs, avec notes fantômes, fontaine de notes et rivière réactive. Ce rapport compare leur technique, leurs fonctions et leur organisation, puis propose ce qu'il faut extraire de chacun pour les combiner.
RainbowJourney
- Dépôt
D:\GitRepos\RainbowPiano· FGDidou/RainbowJourney- Branche
fix/priority-fixes· 12 commits aprèsv0-astra-tango· 2 fichiers non commités- Pile
- React 19, TypeScript strict, Vite, three.js, Tonal, Zod, idb
- Code
- 4 469 lignes TS/TSX/CSS (src + tests)
- Tests
- 60/60 unitaires relancés ici, 2 specs Playwright, CI
- Monde
- Vallée low-poly, rivière à filaments, rubans
Chromatic River
- Dépôt
D:\GitRepos\ChromaticRiver· FGDidou/ChromaticRiver- Branche
kimifix· 8 commits aprèsv0-kimi· PR #1 ouverte- Pile
- JS vanilla, modules ES, three.js 0.169 par CDN, aucun build
- Code
- 5 793 lignes JS/CSS
- Tests
- 0 dans le dépôt · vérifié en navigateur et par scripts ponctuels
- Monde
- Canal vénitien, réflexion planaire HDR, ville procédurale
Verdict
RainbowJourney est le meilleur socle, Chromatic River a la meilleure expression de l'idée.
RJ est plus avancé en ingénierie et en profondeur produit. CR rend mieux ce que le prompt appelait « l'objectif le plus complexe » : voir les prochaines notes et leur émotion dans le monde, pas seulement dans une liste.
Recommandation
- Garder RainbowJourney comme base : types, tests, persistance, éditeur et MIDI éprouvé sur le vrai DP1 coûteraient cher à refaire.
- Corriger d'abord ses trois défauts de chemin chaud, toujours présents et dont un s'est aggravé.
- Porter de Chromatic River le classement des candidats, la palette OKLCH, l'atlas de 13 glyphes, les bouées fantômes 3D et la fontaine partant de la touche.
- Intégrer le canal vénitien comme un décor, à côté de la vallée, plutôt que de remplacer le monde.
Dimension par dimension
| Dimension | RainbowJourney | Chromatic River | Avantage |
|---|---|---|---|
| Socle technique | TypeScript strict, Vite, schémas Zod sur réglages et sessions | JS vanilla sans build ; les interfaces ne sont garanties que par CONTRATS.md | RJ |
| Tests et CI | 60 unitaires sur 10 fichiers, Playwright, GitHub Actions | Aucun test dans le dépôt ; contrôles faits en navigateur et hors dépôt | RJ |
| MIDI | FIFO des attaques, Panic, sortie armée explicitement ; essayé sur le DP1 réel | FIFO, Panic, sortie et canal sélectionnables ; testé sur doublure uniquement | RJ |
| Moteur musical | Tonal, intervalles jusqu'à 24 demi-tons, règles d'expression éditables, accords stabilisés sur 40 ms | Théorie maison, octave distincte de l'unisson, scoreCandidates pur avec diversité de familles | Égal |
| Notes fantômes | Point générique sur la touche, 2 à 4 suggestions en liste textuelle | Bouées 3D sur l'eau, 13 glyphes par famille, 4 fortes et le reste en filigrane, pastilles sur le piano | CR |
| Direction artistique | Vallée low-poly lisible mais générique | Canal vénitien à l'aube, reflets, brume, oiseaux ; identité forte | CR |
| Coût de rendu | Budgets GPU bornés, mais priorité de rendu inversée | Réflexion qui re-rend la ville à chaque image ; niveau de qualité désormais effectif | Égal |
| Persistance | IndexedDB, enregistrement, relecture visuelle, import/export JSON | Aucune session enregistrée ; seuls les réglages sont en localStorage | RJ |
| Personnalisation | 28 paramètres d'effets, règles, presets, panneaux HUD déplaçables | 9 réglages de menu, 2 presets d'émotions | RJ |
| Pédagogie et jeu | Indicateurs de style « safe », frise des choix, textes d'émotion sourcés, canon de gameplay écrit | Classement des enchaînements, légende des couleurs, fin de phrase | RJ |
| Lisibilité et langue | Interface en ASCII sans accents, par règle du canon | Français accentué, voiles de contraste, 3 tailles de texte | CR |
| Saisie sans piano | Souris, toucher, clavier AZERTY | Souris et toucher | RJ |
| Démarrage | npm ci puis Vite ; fonctionne hors ligne | Serveur statique immédiat, mais three.js exige le réseau | Égal |
Ce que chacun fait mieux, et ce qui le fragilise
RainbowJourney
Forces
- Architecture typée et testée : un changement casse un test avant de casser le jeu.
- Chaîne MIDI mûrie au contact du vrai matériel : relais avant analyse, décision de relâchement liée à l'attaque, désarmement en relecture.
- Produit profond : enregistrement et relecture, éditeur d'effets, règles, presets, panneaux HUD persistants.
- Vision de jeu formalisée dans un canon : aucune punition, scores de style en pourcentage, hologramme de rivière future.
- Textes d'émotion prudents, avec degré de certitude (« souvent », « tendance », « parfois »).
Faiblesses
- Défauts de chemin chaud toujours présents : React notifié à chaque tick, effet de bord dans un getter, priorité de rendu inversée.
- Fantômes peu parlants sur le clavier : le même point pour toutes les émotions.
- Monde visuel générique, loin de la synesthésie spectaculaire du prompt.
- Dette de validation : 15 éléments du pack HUD « à retester », dont 3 partiels ; Playwright non rejoué sur cette tranche.
- Deux fichiers centraux très chargés :
runtime.ts(691 lignes) etJourney.tsx(467). - Interface sans accents, et plus de 15 documents à tenir à jour.
Chromatic River
Forces
- Idée centrale rendue dans l'espace : les suggestions flottent sur l'eau devant le bateau, avec un glyphe par famille d'intervalle.
- Identité visuelle forte et cohérente : reflets HDR, brume, lumière d'aube.
- Théorie pure et vérifiable : classement monotone, diversité des familles, octave distincte, palette OKLCH à clarté constante.
- Fontaine qui part de la touche jouée et converge dans le canal selon la hauteur.
- Organisation par contrat d'interface et paquets à fichiers exclusifs : parallélisation propre, audit croisé, PR.
Faiblesses
- Aucun test dans le dépôt : chaque régression se découvre à l'écran.
- Pas de types : le contrat entre modules n'est vérifié par aucun outil.
- Pas d'enregistrement ni de relecture, pas d'éditeur d'effets, pas de presets exportables.
- MIDI jamais essayé sur le DP1 réel.
- Décor hérité du template sans lien avec la musique (oiseaux, gondolier), qui consomme du budget de rendu.
- Dépendance au CDN : pas de jeu hors ligne, pas de version verrouillée par un lockfile.
État constaté dans le code, pas dans les documents
| Projet | Défaut | Conséquence | État |
|---|---|---|---|
| RJ | tick() appelle notify() à chaque tick de 25 ms | Les caches sont invalidés même sans changement ; Journey recalcule suggestions et couleurs du piano environ 60 fois par seconde, sur le thread partagé avec three.js | Présent |
| RJ | Le getter harmony modifie l'état pendant le rendu React | La stabilisation des accords à 40 ms ne tient que grâce au défaut précédent : corriger l'un sans l'autre casse la détection | Présent |
| RJ | Traces parcourues de la plus ancienne à la plus récente | Passé à 10 segments par note pour un plafond de 1 024 : au-delà de 102 traces visibles, les notes les plus récentes perdent leur ruban | Aggravé |
| RJ | Sélection de l'entrée MIDI non persistée | Resélection manuelle à chaque rechargement | Connu, en TODO |
| CR | Octave traitée comme un unisson, note de départ jamais affichée, fantômes sans hiérarchie | Le cœur pédagogique du prompt était faux | Corrigé, vérifié |
| CR | Fontaine en nuages blancs près de la caméra | Canal masqué, couleur de la note perdue | Corrigé, vérifié |
| CR | Aucun Panic MIDI, sortie toujours sur le premier port | Notes bloquées possibles, risque de boucle vers le piano | Corrigé, sur doublure |
| CR | Annonce de ports qui déclenche un Panic à chaque fois | Brancher n'importe quel périphérique coupe les notes relayées en cours | À trancher |
Quoi extraire, dans quel sens, et pourquoi
Effort estimé sur le socle RainbowJourney : S pour quelques heures, M pour une journée, L pour plusieurs jours. Les modules de théorie de Chromatic River n'importent pas three.js, ce qui les rend portables en TypeScript et testables immédiatement avec Vitest.
| Élément | Sens | Pourquoi | Effort |
|---|---|---|---|
scoreCandidates | CR → RJ | Classement pur, monotone, avec diversité de familles ; remplace l'heuristique de suggestions() et fournit rank et strong | S |
| Palette OKLCH | CR → RJ | Clarté constante sur les 12 classes de hauteur : répond au « progressif mais homogène » du prompt | S |
| Atlas de 13 glyphes | CR → RJ | Remplace le point générique ghost-dot ; distingue stable, tension et ouverture d'un coup d'œil | M |
| Bouées fantômes 3D | CR → RJ | Porte les suggestions dans le monde ; prolonge directement l'« hologramme de rivière future » du canon RJ | M |
| Fontaine depuis la touche | CR → RJ | Projection de la touche avec distance minimale de 8 m et taille plafonnée : lien visuel touche → rivière sans saturation | M |
| Canal vénitien comme décor | CR → RJ | RJ gère déjà des décors ; la scène de CR, impérative, se greffe à côté de World.tsx sans réécrire le monde | L |
| Méthode par contrat | CR → RJ | Découper les prochains lots en paquets à fichiers exclusifs, avec audit croisé avant fusion | S |
| Tests Vitest | RJ → CR | Si CR restait autonome : ses modules ES purs sont testables tels quels | M |
| Enregistrement et relecture | RJ → CR | Si CR restait autonome : revoir la route parcourue est une demande explicite du prompt | L |
| Styles « safe », frise, textes sourcés | RJ → CR | Si CR restait autonome : la couche pédagogique la plus aboutie des deux | M |
| Clavier AZERTY | RJ → CR | Jouer sans piano ni souris | S |
Dans quel ordre, et pourquoi cet ordre
- 1
Assainir le chemin chaud de RainbowJourney
Ne notifier React que sur un vrai changement, déplacer la stabilisation des accords dans
tick(), rendre les traces de la plus récente à la plus ancienne. À faire en premier : chaque élément porté ensuite ajoute du rendu sur ce thread. - 2
Porter la théorie de Chromatic River, avec tests
Classement des candidats et palette OKLCH en TypeScript, avec en tests les assertions déjà écrites pour CR : octave dans les deux sens, monotonie du score, diversité des familles.
- 3
Fantômes lisibles sur le clavier
Atlas de glyphes et hiérarchie forte / filigrane sur les touches. C'est le gain le plus visible pour l'utilisateur, à coût faible.
- 4
Suggestions et fontaine dans le monde
Bouées 3D, fontaine depuis la touche, puis la première variante d'hologramme de rivière du canon.
- 5
Décor canal vénitien
Ajouté comme second décor, avec des niveaux de qualité qui pilotent réellement la résolution de réflexion.
- 6
Retest sur le DP1 et mesure
Relancer Playwright et le protocole matériel, puis mesurer les FPS par niveau de qualité : aucun des deux projets n'a de mesure fiable aujourd'hui.
À trancher avant l'étape 2 : le canon de RainbowJourney impose une interface en ASCII sans accents, tandis que Chromatic River est en français accentué. Porter des libellés de CR exige de choisir l'une des deux conventions pour le projet combiné.