Dans le cadre de mon cours “git” et de mon cours de “projet intégré” pour le 1er master ing. physicien, j’aurais aimé pouvoir mettre en ligne le résultat d’un code de calcul écrit en C++.
L’idée est assez simple: j’utilise la bibliothèque graphique Pixel Game Engine (PGE) qui permet une compilation en WebAssembly via Emscripten. J’avais vu que c’était possible dans une vidéo de l’auteur de PGE. Sa chaîne YouTube (javidx9) est d’ailleurs une de mes favorites, le genre de chaîne dont je regarde systématiquement toutes les vidéos dès leur sortie.
Il faut tout d’abord avoir une application PGE qui fonctionne. J’en ai beaucoup parce que j’aime bien programmer avec cette bibliothèque. Elle me rappelle le “bon vieux temps” où je codais avec peu de choses déjà toutes faites en Basic sur mon C64, en AMOS sur Amiga 500 et en Borland C sur mon premier PC. En ce temps-là, pas de “moteur de jeu” à la Unity ou Unreal Engine. Il fallait tout faire soi-même et on s’émerveillait de choses toutes simples comme tracer une fractale sur l’écran.
Dans la version minimale de PGE (un simple fichier .h), on est presque à ce stade-là: en gros, la bibliothèque permet d’ouvrir une fenêtre et d’afficher des pixels ou tracer des formes simples (droites, cercles, rectangles). Pour renforcer la nostalgie, il est possible d’utiliser des gros pixels, c’est-à-dire que chaque pixel est représenté par 2, 3, 4 pixels de l’écran. Ca a deux bénéfices: donner un look très retro au résultat et accélérer les performances des méthodes qu’on utilise.
Javid (a.k.a. OneLoneCoder), l’auteur de PGE utilise sa bibliothèque pour faire des démonstrations d’algorithmes et du “creative coding”, c’est-à-dire “coder pour le plaisir des yeux”.
Dans ce contexte, étant fan également de la chaîne The Coding Train, j’utilise régulièrement le contenu de cette deuxième chaîne comme exercice d’utilisation de PGE. The coding train utilise la bibliothèque javascript p5.js, langage que je ne maîtrise pas aussi bien que le C++, mais qui a l’énorme avantage d’être “regardable” immédiatement sur le web.
C’est donc une très bonne nouvelle que le code C++/PGE peut être converti en WebAssembly pour tourner, comme du javascript, dans un navigateur web. Plus besoin de maîtriser les finesses du javascript pour publier ce genre de programme sur le web.
Même si je n’avais jamais essayé de compiler du C++ en WebAssembly, je savais que c’était assez simple. En gros, il suffit d’installer Emscripten et de l’utiliser comme compilateur. Ca marche très bien sous Linux (au bureau) et sous Windows (à la maison). L’étape qui me manquait consiste à produire ces “binaires magiques” pour le web dans un conteneur docker qui tournerait à chaque “git push” de mon projet-démo git (et oui, le but est bien de faire un démonstrateur qui servirait d’exemple dans mon cours “git”!). C’est donc cette étape que j’ai réalisée hier en essayent de ne pas trop m’éparpiller de lien en lien quand je vois des choses qui m’intéressent sur le web (j’ai tout de même passé près de 2 heures sur Dear ImGui et j’ai fini la soirée en regardant des tutos raylib et SDL).
Pour faire une 3e chose en parallèle, je me suis dit que j’allais me faire aider de ChatGPT. Il pourrait me conseiller sur la manière d’organiser les choses dans mon dépôt git, écrire les makefiles (CMakeLists.txt) et même me créer le script (Dockerfile) d’une image Docker appropriée. Tout s’est très bien passé et le résultat est visible ici:
https://git.gitlabpages.uliege.be/cpp_wasm/
Et voici une capture:
Le code est une adaptation du Coding Challenge “Fluid Simulation” de Daniel Shiffman de Coding Train. La méthode est très similaire à ce que je demande à mes étudiants comme première étape dans leur projet intégré cette année (voir mon post précédent sur le cours).