Discussion :

[Etienne38]

Bonjour à tous !

Je gère depuis quelques années un site de tablatures pour guitares basses, et je m'amuse comme un fou sous linux en python au départ, puis maintenant en java et en php pour générer les tablatures, les partitions et les fichiers midi des morceaux que je propose sur le site.

Je me suis mis en tête d'essayer de réaliser des animations vidéo où les notes à jouer défileraient en synchro avec la musique, du style des célèbres jeux de musique guitare hero ou rocksmith.

Attention, je ne veux pas programmer un jeu, mais uniquement construire une vidéo. Il n'y a aucune interaction avec l'utilisateur. Ce n'est qu'un défilement des formes en synchro avec la musique. Une sorte de tuto musical si on veut.

Voilà ce à quoi j'aimerais que ça ressemble :

Cette maquette rudimentaire a été réalisée à la main image par image pour vous montrer ce que je désire pouvoir réaliser de manière automatisée.

Je possède toutes les données permettant de construire la vidéo (timing et couleurs des formes), et je cherche le moyen le plus efficace pour pouvoir générer ce type de vidéo par programmation ou script.

Soit avec un langage de programmation (python, java, processing, pure data, ...) qui génère une vidéo (ou une série d'images qu'on assemble ensuite)

Soit avec un programme de dessin ou d'animation (adobe, krita, gimp, ...) auquel on peut fournir un script ou une série d'instruction pour que l'animation se construise automatiquement.

Ce langage de programmation ou ce programme peut fonctionner sous windows ou (de préférence) sous linux

D'après mes premières recherches, j'ai déjà découvert que les langages de programmation cités ci dessus (python, java, processing, pure data) permettent de générer des animations ou des séries d'images, mais j'aimerais choisir celui qui sera le plus efficace et le plus rapide à apprendre pour réaliser cette maquette (faire apparaître, défiler et disparaître des rectangles et des ronds dans un timing bien précis), et à la première lecture des tutoriels de ces langages, il est difficile de savoir si l'investissement d'apprentissage vaut la peine (ou si au contraire, je vais me retrouver dans une impasse).

C'est pourquoi je fais appel à vous, programmeurs, graphistes, vous qui connaissez mieux que moi les langages et programmes que vous utilisez, vos pistes et avis me seront précieux !

Merci beaucoup !

[LittleWhite]

Bonjour,

Je pense que vous pouvez y arriver avec Python et pygame.
Cet article pourra vous aider pour l'architecture : https://alexandre-laurent.developpez...boucle-de-jeu/ .
Après, je n'ai pas la méthode parfaite pour ce genre de question et plusieurs solutions sont possibles.

[ohnomorejmmings]

Pourquoi des vidéos ? Il t'en faudra une par tablature et au moindre changement visuel il te faudra tout regénérer. Dans ce cas une animation en temps réel prendrait tout son sens. Elle pourrait même être embarquée sur ton site sous la forme d'une applet Java. De toutes façons il y a peu de différence entre l'afficher et la générer sous forme d'images ou directement d'une vidéo.

Si apprendre à coder par la même occasion n'est pas ta priorité pourquoi pas juste utiliser un logiciel. Ça n'est pas le choix qui manque et à mon avis plusieurs dédiés à la création de partitions/tablatures doivent supporter l'exportation en vidéo. Par défaut on peut toujours le faire sous la forme d'images ou d'un document PDF… Donc pas besoin d'une solution spécialisée dans l'animation ou juste le graphisme même si évidemment certaines peuvent être scriptées et donc répondre à tes besoins. Au passage ne pas oublier le format SVG car en plus d'être vectoriel il permet l'animation procédurale (par programmation).

Sympa comme projet et n'hésite pas à référencer ton site.

[Etienne38]

Bonjour,

Je pense que vous pouvez y arriver avec Python et pygame.
Cet article pourra vous aider pour l'architecture : https://alexandre-laurent.developpez...boucle-de-jeu/ .
Après, je n'ai pas la méthode parfaite pour ce genre de question et plusieurs solutions sont possibles.

En effet, merci pour la piste.
Après y avoir réfléchi, l'animation est en effet très simple (et comme je me suis déjà amusé un peu avec python, au moins la syntaxe reviendra vite)
mais je me demandais comment générer une vidéo (plutôt que de simplement afficher l'animation sur la fenêtre du jeu)
Pour ceux que ça intéresse, mes pistes sont arrivées vers des articles (et ébauches d'articles) sur soit la capture vidéo en python de la fenêtre qui affiche l'animation, soit dans le programme, la possibilité de faire une capture de la fenêtre entre chaque frame et de la sauvegarder vers une image (et donc, de faire l'assemblage dans la suite du processus avec ffmpeg par exemple)
Voici les liens que j'ai trouvés rapidement :
https://stackoverflow.com/questions/...-pygame-screen
https://pyweek.org/d/4394/
https://www.editions-eni.fr/open/med...24787920feeeac
https://www.pygame.org/docs/tut/CameraIntro.html

Pourquoi des vidéos ? Il t'en faudra une par tablature et au moindre changement visuel il te faudra tout regénérer. Dans ce cas une animation en temps réel prendrait tout son sens. Elle pourrait même être embarquée sur ton site sous la forme d'une applet Java. De toutes façons il y a peu de différence entre l'afficher et la générer sous forme d'images ou directement d'une vidéo.

Si apprendre à coder par la même occasion n'est pas ta priorité pourquoi pas juste utiliser un logiciel. Ça n'est pas le choix qui manque et à mon avis plusieurs dédiés à la création de partitions/tablatures doivent supporter l'exportation en vidéo. Par défaut on peut toujours le faire sous la forme d'images ou d'un document PDF… Donc pas besoin d'une solution spécialisée dans l'animation ou juste le graphisme même si évidemment certaines peuvent être scriptées et donc répondre à tes besoins. Au passage ne pas oublier le format SVG car en plus d'être vectoriel il permet l'animation procédurale (par programmation).

Sympa comme projet et n'hésite pas à référencer ton site.

Pas de souci pour moi pour tout regénérer, c'est déjà ce que je fais avec les tablatures, partitions, fichiers midi, dès qu'un truc change, donc aucun souci pour moi de continuer dans ce style de processus.
A vrai dire, le site original (en 2009) était en pages statiques, générées par un programme python.
L'url de cet ancien site est www.ilovetabs.com
Il a eu beaucoup de succès, mais avec ma participation de plus en plus importante dans plusieurs groupes de musique (en plus du boulot), je n'ai plus eu le temps de m'en occuper.
Depuis un an maintenant, à cause d'un nouveau changement de travail, j'ai arrêté tous les groupes de musique, et j'ai retrouvé du temps, et j'ai décidé de refaire le site, mais en l'améliorant beaucoup (le principal étant le fait qu'il n'était pas du tout adapté pour les écrans modernes de smartphones, tablettes, etc)
J'en ai profité pour passer du python au java, du html statique au php/sql, et le résultat me plaît bien (il n'est pas encore visible publiquement car la nouvelle interface n'est pas encore terminée par le designer, le seul truc que je ne sais pas du tout faire, c'est le design, donc pour ce point, je dépend de quelqu'un d'autre)

Donc, j'ai gardé un peu l'esprit "je génère des tas de trucs avec mes moulinettes en programmation, puis hop je mets en ligne les jolis résultats"

J'aime bien le côté "vidéo" plutôt qu'une applet, parce que la vidéo est "portable". On peut la diffuser, la partager, l'enregistrer en local.
Un bassiste pourrait très bien, pour répéter un passage difficile, jouer la vidéo dans son lecteur favori en faisant un loop entre deux timestamps par exemple.
Si un utilisateur a une playlist d'un concert avec tous des morceaux que j'ai publiés, il pourrait même s'amuser à construire une vidéo avec les vidéos de chacuns des morceaux collés bout à bout, pour simuler de jouer son concert entièrement.

C'est aussi pour cette raison que sur le site original, j'avais donné acccès aux tablatures en mode pur texte ascii, ainsi les gens pouvaient les copier coller dans leur notepad, ou juste copier des parties (le début de l'intro de chaque morceau par exemple, comme "copions" pour un concert)
J'adore ce côté "matériau brut mais utile et utilisable comme l'utilisateur en a besoin".

J'ai l'impression que programmer une applet serait plus compliqué pour moi et moins "souple" pour l'utilisation que les gens pourraient en faire.

J'avais pensé au svg aussi, mais une vidéo est plus facilement utilisable par l'utilisateur (le lecteur gère les retours en arrière, la pause, etc), et je ne pense pas qu'une svg puisse faire autre chose que défiler, un peu comme une image animée gif, mais je me trompe peut-être)

Si on parle de programmes, je veux bien parler de programme de génération de vidéos, et pas de programmes de tablatures.
En effet, j'ai réalisé mon site justement parce qu'aucun des programmes existants ne satisfaisait mes besoins à ce sujet (au départ j'ai écrit les tablatures uniquement pour moi, puis j'ai juste décidé d'en faire profiter les autres, tant qu'à faire)

Voici le processus, si cela vous intéresse
Pour chaque tablature, j'écris mon code "source" en notation abc, qui est une notation permettant d'écrire de la musique sous forme de texte : https://fr.wikipedia.org/wiki/ABC_%28notation%29
Mon code source contient quelques informations supplémentaires (principalement des méta-données, certains effets spécifique à l'instrument, ainsi que le numéro de la corde qui doit être grattée)
Mon code java prend ce code source et le sépare en un fichier contenant du pur abc, un fichier contenant la tablature en mode texte, et un fichier contenant le sql pour populer la db avec les infos de cette tablature
Le pur abc est ensuite passé dans un programme existant qui génère la partition, et dans un autre programme qui génère le fichier midi.
Le fichier sql est exécuté et la base de donnée est peuplée
Le site (nouvelle version qui va bientôt arriver) est une page php qui lit les données dans la db, et qui affiche tablatures et partitions en format svg et pdf, ainsi que le fichier midi (et le tout avec un petit lecteur mp3 qui permet de lire le morceau original)

Le gros avantage, c'est que écrire une ligne de basse en notation abc "custom" est ultra rapide, donc je peux sans souci écrire entre 10 et 20 tablatures sur un week-end tranquille, tout le reste étant généré automatiquement et ne requiert aucune intevention de ma part.
Si je devais entrer à la main chaque tablature dans un truc genre guitar pro, ça me prendrait un temps beaucoup plus long rien que pour l'encodage, et je devrais de toute façon gérer le reste qui ne serait plus automatisé.

Ceci dit (tant qu'on parle de guitar pro), ce truc de vidéo est un des 3 éléments de mes futurs projets pour le site.
Les deux autres sont justement un "export" vers un fichier guitar pro
Et le top du top qui reste encore comme rêve lointain mais pas inaccessible, c'est d'exporter vers un fichier rocksmith qui permettrait aux gens de jouer les morceaux dans le jeu.


Dans tous les cas, un grand merci d'avoir parlé de l'applet, je garde l'idée en tête pendant cette période de réflexion (je compte me mettre à commencer à programmer à partir du 15 mars, ça me laisse deux semaines pour décanter les idées que je peux récolter un peu partout)

Et promis, dès que le nouveau site est officiellement public, je vous le poste ici ;-)

[ohnomorejmmings]

J'aime bien le côté "vidéo" plutôt qu'une applet, parce que la vidéo est "portable". On peut la diffuser, la partager, l'enregistrer en local.

Certes mais les tablatures servant de sources le sont déjà. 2 défauts d'une vidéo par rapport à une animation temps réel sont la taille et le côté statique. De plus dans le cas de tes exemples n'importe quel logiciel affichant des partitions permet de boucler comme n'importe quel lecteur multimédia. Je me souviens même de logiciels de composition permettant plein de fantaisies visuelles à base de thèmes, paramètres de personnalisation… Ça pourrait t'intéresser surtout que c'est même parfois une question d'accessibilité car certaines personnes préfèrent regarder une information en blanc sur fond noir plutôt que l'inverse. Certes on peut passer la vidéo en négatif dans son lecteur favori mais c'est juste pour te montrer la flexibilité du temps réel. L'exemple du montage de vidéos est sympa mais de nouveau on peut le faire avec des tablatures. Ça me semblerait plus logique de générer une nouvelle vidéo.

Après ça ne remet en rien l'intérêt d'animer mais la génération d'une vidéo reste secondaire je trouve. De toutes façons avant il faut bien afficher. Prends donc du recul sur ton processus, pertinent jusque là, afin qu'il ne prenne pas le dessus.

J'avais pensé au svg aussi, mais une vidéo est plus facilement utilisable par l'utilisateur (le lecteur gère les retours en arrière, la pause, etc), et je ne pense pas qu'une svg puisse faire autre chose que défiler, un peu comme une image animée gif, mais je me trompe peut-être)

Non comme mentionné précédemment SVG est scriptable et donc on peut afficher tout et n'importe quoi. D'une présentation à base de diapos à de petits jeux vidéo au moins pour ce que je connais. Il y a des bibliothèques pour l'utiliser dans un programme. En Java je me souviens du projet Batik notamment ou alors c'est la visionneuse SVG je ne sais plus. Sinon évidemment plein de logiciels de graphisme comme Inkscape le supporte.

Le site (nouvelle version qui va bientôt arriver) est une page php qui lit les données dans la db, et qui affiche tablatures et partitions en format svg et pdf, ainsi que le fichier midi (et le tout avec un petit lecteur mp3 qui permet de lire le morceau original)

Ahah je l'attendais ! Donc tu génères le MP3 à partir du MIDI ? Approche pertinente mais je suis curieux de savoir si HTML5 et les nouveaux navigateurs n'ont pas changé la donne. Mais c'est intéressant car on peut avancer des avantages et inconvénients similaires que ceux pour l'animation temps réel vs. vidéo. Par exemple certains musiciens préfèrent utiliser leur propre banque de sons et donc partir du MIDI.

Dans tous les cas, un grand merci d'avoir parlé de l'applet, je garde l'idée en tête pendant cette période de réflexion (je compte me mettre à commencer à programmer à partir du 15 mars, ça me laisse deux semaines pour décanter les idées que je peux récolter un peu partout)

Alors petit bémol l'applet a peut-être un côté rétro aujourd'hui mais je me souviens d'exemples musicaux sympas dans le JDK et les The Java Tutorials. Depuis HTML5/CSS est devenu très à la mode et permet de faire plein de choses. C'est le nouveau Flash au cas où. Python a aussi un écosystème très ouvert et on peut par exemple utiliser Java ou encore faire tourner ses scripts sous la forme d'application mobile. J'ai entendu parler de PyQT par exemple et sans doute qu'il existe des "convertisseurs" HTML5/CSS/JavaScript. C'est une tendance chez les moteurs de jeux vidéo : Godot, Unity… Tout le monde s'y met !

Enfin comme on peut s'y perdre dans un premier temps je te recommande de t'amuser avec les connaissances que tu as. Si tu t'intéresses à Pygame pense à de simples modules comme draw. Et si besoin il y a des biblios plus évoluées… Rien qu'une maquette fonctionnelle serait déjà une bonne étape ! Sinon merci pour les précisions techniques et bon courage pour ce projet car il y a plein d'idées sympas.

[Etienne38]

Mmmh, c'est vrai que je devrais peut-être me pencher un peu plus sur html5, si il permet de faire des animations, je préfèrerais utiliser les fonctionnalités en html (ou dans une svg) plutôt qu'embarquer un applet java. Ca me paraît plus abordable pour moi même si c'est peut-être complètement un apriori.

Pour le mp3, je ne génère pas de mp3 à partir du midi, je parle du mp3 du morceau original. Comme dans les jeux musicaux (guitar hero, rocksmith, ...) on joue en écoutant le morceau.

D'après un sondage chez mes visiteurs, ils utilisent le midi pour pouvoir l'importer dans des logiciels comme guitar pro pour pouvoir jouer la tablature plus lentement ou travailler des parties bien spécifiques en entendant ce que ça donne en même temps de voir la tablature.

Je vais aller voir ce qu'il est possible de scripter en html5 + javascript et dans les svg. Merci beaucoup pour les pistes !

[Etienne38]

Et bien, après quelques rapides recherches sur les possibilités dont tu as parlé, il apparaît qu'utiliser une svg pour l'animation serait idéale.
En effet, graphismes vectoriels, ultra facile à mettre en oeuvre dans mon cas de formes et d'animations simples.
J'ai trouvé des tonnes de tutoriels sur le net et il semble que maintenant la compatibilité avec tous les navigateurs est assurée (c'était le gros défaut il y a dix ans)

Restait à savoir si il était possible de synchroniser une musique audio (pas midi) à l'animation, et de pouvoir changer leur vitesse (je n'en avais pas parlé plus haut je pense, mais le but était de pouvoir jouer l'animation à différentes vitesses entre 50 et 100% du morceau original)

Et en faisant quelques recherches de plus, je suis tombé le cul par terre en voyant ceci :
https://codepen.io/sgestrella/full/OqONXW

Vraiment incroyable, non seulement la synchro image musique (j'ai bien vérifié, il s'agit bien d'un mp3 joué derrière, et pas d'un fichier midi, ce qui aurait été possible dans ce cas)
Egalement la possibilité de changer de tempo (même si la synchro est décalée à basse vitesse, mais on verra quand on y sera)
Je suis bluffé, et cela prouve en effet que c'est tout à fait adapté à mes besoins, tout en étant portable, redimensionnable sans devoir gérer tout soi même, très léger pour le taf que ça fait, pas de problème de stockage ou de bande passante, vraiment top !

Je vais me plonger dans tout ça à partir de la semaine prochaine !
Encore un tout grand merci pour tes pistes super intéressantes !

[ohnomorejmmings]

Mmmh, c'est vrai que je devrais peut-être me pencher un peu plus sur html5, si il permet de faire des animations, je préfèrerais utiliser les fonctionnalités en html (ou dans une svg) plutôt qu'embarquer un applet java. Ca me paraît plus abordable pour moi même si c'est peut-être complètement un apriori.

J'avais mentionné Java comme tu mentionnais tes connaissances et ton site. La création d'une applet est vraiment élémentaire et c'est sans doute le premier truc que j'ai fait. À l'époque c'était juste trop impressionnant de voir tourner des animations dans un navigateur et ce bien avant Flash ! Dans ton cas l'inconvénient d'HTML5/JavaScript ou SVG c'est l'apprentissage de quelque chose de nouveau. Mais JS reste proche de Java, PHP ou Python et l'élément Canvas d'HTML5 est très simple d'utilisation. Comme les fonctions GD de PHP et les modules de Pygame.

Donc comme les solutions sont multiples il suffit de procéder par élimination en fonction de tes besoins, de ce que tu veux obtenir…

D'après un sondage chez mes visiteurs, ils utilisent le midi pour pouvoir l'importer dans des logiciels comme guitar pro

D'où l'idée d'en faire un autre pour savoir sous quelle forme on aimerait animer. Un logiciel de bureau simplifierait les choses dans un premier temps et après rien n'empêcherait d'élargir les plates-formes visées.

J'ai trouvé des tonnes de tutoriels sur le net et il semble que maintenant la compatibilité avec tous les navigateurs est assurée (c'était le gros défaut il y a dix ans)

En effet les ressources pour s'aider sont là mais l'écosystème HTML5/JS est bien plus grand et d'ailleurs sans doute que la majorité des jeux vidéo par navigateur l'utilise. Par contre je trouve le SVG super sexy !! À vérifier sa compatibilité sur mobile… Je crois qu'il y a un dialecte réduit car le langage de base reste très riche et prend du temps à évoluer. L'élément Canvas lui reste très rudimentaire donc accessible et les possibilités sont illimitées.

Et en faisant quelques recherches de plus, je suis tombé le cul par terre en voyant ceci :
Bach SVG Music Animation - CodePen

Hé oui en matière de vectoriel mais 3D il y a aussi des merveilles en WebGL, une biblio OpenGL en JS.

Egalement la possibilité de changer de tempo (même si la synchro est décalée à basse vitesse, mais on verra quand on y sera)

En effet le manque de contrôle est sans doute un inconvénient par rapport à du Java ou un logiciel en Python par exemple. Certes en HTML5 on peut jouer de l'audio mais on peut sans doute pas encore demander à un navigateur de remplacer un séquenceur, logiciel de composition… Un bémol car je connais peu et certaines personnes sont douées pour repousser les limites !

Encore un tout grand merci pour tes pistes super intéressantes !

De rien mais avant que j'oublie je te conseille aussi de t'adresser aux forums spécialisés en musique. Il y en a d'excellents avec de vrais spécialistes et passionnés.