Étude de cas · Animation avec l’IA
Créer une animation avec Claude : mon projet Charleroi en aquarelle et JavaScript
Une animation de 96 secondes créée avec Claude, JavaScript et Canvas 2D. Six versions pour corriger les décors, la caméra et le son, avec les photos de référence et les essais avant/après.
Théo EloyImpaaact
Pour créer cette animation de Charleroi avec Claude, j’ai utilisé JavaScript et Canvas 2D pour dessiner les décors et animer un petit zèbre. Le film dure 96 secondes : le zèbre traverse la ville, du parc Reine Astrid au stade du Pays de Charleroi. Les photographies servent de références, puis chaque trait est dessiné par le code. Les bruitages sont synthétisés ; le morceau de piano est importé.
Claude, l’assistant d’Anthropic, écrivait et modifiait le code, produisait les rendus et mesurait les essais. Je donnais la direction visuelle et les retours. Six versions ont été exportées. Cette étude de cas présente les techniques, les problèmes rencontrés et leurs corrections, avec les photos de référence et les comparatifs avant/après.
- 6
- versions jusqu’au résultat final
- 139
- captures d’analyse relues
- 35
- photos de Charleroi en référence
- 7 917
- lignes de JavaScript
- 13
- plans de caméra
- 0
- image dans le film
Comparer six versions de l’animation de Charleroi
Le moyen le plus simple de juger un changement est de rendre le même moment du film avant et après. Voici le réveil au parc, version par version. La première date du 14 octobre ; les cinq suivantes ont été faites le 16 octobre, entre 2 h et 21 h.
Le réveil au parc, version par version
v1 · 14 oct.
Pépin la graine, arbre en taches, kiosque générique
v2 · 3 h 14
moteur de peinture réécrit, kiosque d’après photo
v3 · 10 h 39
le zèbre remplace la graine, ciel grisé
v4 · 17 h 58
caméra plus proche, sol peint devant lui
v5 · 20 h 24
il commence roulé en ballon
v6 · 20 h 49
il dort, un rouge-gorge le réveille
Ce que le film doit à Charleroi
Le personnage est un zèbre parce que c’est l’animal des Zèbres, le surnom du Sporting de Charleroi. Le titre, « Tchålerwè », est le nom de la ville en wallon. Les feuilles du grand arbre sont des lettres tirées des quinze anciennes communes (Jumet, Marcinelle, Gosselies…), de mots wallons comme « gaillette » ou « ducasse », et de mots des langues arrivées avec les charbonnages : « casa », « miniera », « dom », « chleb », « ψωμί ».
Le trajet suit de vrais lieux, dans l’ordre d’une promenade : le parc et son kiosque, la rue de la Montagne, le beffroi, les quais de la Sambre sous le viaduc du métro, un terril face au haut-fourneau 4, puis le stade du Pays de Charleroi.
Le trajet du zèbre dans la version finale
Parc Reine Astrid
0:05
Rue de la Montagne
0:25
Le beffroi
0:33
La Sambre et le métro
0:47
Le terril
1:17
Le stade du Pays de Charleroi
1:35
Quelles photos de Charleroi ont servi de références ?
La première version était dessinée sans modèle, et cela se voyait : un beffroi rouge à flèche verte, un kiosque qu’on trouverait dans n’importe quel parc. Pour qu’un Carolo reconnaisse sa ville, il fallait des proportions, des matériaux et des couleurs justes. Les photos ont servi de modèles de forme. Aucune n’est collée dans le film : tout est redessiné par le programme.
La référence photographique
Le kiosque dessiné
Pourquoi Wikimedia Commons
J’ai choisi Wikimedia Commons pour trois raisons. Chaque photo y a un auteur et une licence libre connus : je peux la citer, et la montrer ici avec son crédit. Les lieux y sont rangés par catégories, avec 43 fichiers pour le seul stade. Enfin, la base s’interroge par programme : un petit script a lancé 11 recherches et récupéré 35 photos avec leur titre, rangées en planches de contact pour les comparer d’un coup d’œil.
La référence mesurée
Le beffroi dessiné
Les photos ont aussi servi à mesurer. Après la quatrième version, j’ai trouvé le beffroi trop étroit. Sur deux photos, le fût fait environ un quart de la hauteur visible au-dessus du toit de l’hôtel de ville : la tour a été élargie à cette proportion, avec une base évasée et un lanternon plus large.
Le beffroi en six versions, à 34 secondes
v1
rouge à flèche verte, dessiné sans modèle
v2
brique ocre et flèche sombre, d’après photos
v3
même tour, ville plus froide, usines au fond
v4
caméra plus basse, rue en pente
v5
fût élargi après mesure
v6
contre-plongée le long de la tour
Trop chaud pour le Pays Noir
La deuxième version était crème et dorée, avec un terril violet sous un couchant orange. Mon retour : « On appelle ça le pays noir, donc ça doit être un peu plus gris, même si tu peux conserver des touches de couleur. » La troisième version refroidit le ciel, noircit le schiste et détaille les usines membrure par membrure. La couleur ne reste qu’en touches : livres, métro, drapeaux, fenêtres.
Le terril à 1:08
v1
taches de camouflage
v2
terril violet, couchant orange
v3
schiste sombre, ciel du Pays Noir
Côté technique. Les couleurs du décor sont regroupées dans une palette JavaScript. Changer une famille de couleurs, rendre une image au même instant puis comparer prend quelques minutes. C’est plus utile qu’un retour vague sur « l’ambiance ».
La caméra : treize plans pour raconter la promenade
Jusqu’à la troisième version, la caméra restait accrochée au zèbre et le suivait de profil. Je trouvais que ça faisait « jeu vidéo, un peu fausse 3D ». La quatrième version découpe le film en treize plans : gros plan au réveil, contre-plongée le long du beffroi, plans larges, recul au sommet du terril. Dans les plans qui l’accompagnent, la caméra garde un léger retard et le laisse gagner du terrain.
Avant · une caméra accrochée
Après · un plan composé
Deux ajouts donnent la profondeur : un sol peint vu un peu d’en haut (gravier, pavés, pierre bleue) et des objets qui passent tout près de l’objectif, plus vite que le décor, comme la grille du parc.
Pourquoi j’ai abandonné le stade en perspective 3D
Pour le stade, j’ai choisi six photos parmi celles de la catégorie Commons. Celle-ci montre la disposition des tribunes et la pelouse.
Une des références du stade
La quatrième version calculait une vraie perspective. Le volume était lisible, mais il tranchait avec le papier découpé du reste du film. Mon retour tenait en une phrase : « Le stade de foot fait beaucoup trop 3D. » La cinquième version le redessine en coupe de face, comme un décor de théâtre : tribunes en escalier, sièges noirs et blancs, pelouse posée sur du papier noir.
Avant · trop 3D
Après · à plat
Les derniers réglages
Entre la cinquième et la sixième version, mes retours portaient sur des détails de récit et de lecture. Le zèbre commençait roulé en ballon ; je voulais qu’il dorme, pour garder le ballon comme surprise de la fin.
Avant · un ballon dès le début
Après · il dort
Les annotations étaient reliées à leur lieu par des flèches qui traversaient le ciel. Mon retour : pas besoin de flèche, le texte peut simplement rester près du lieu. Dans la dernière version, chaque annotation s’écrit à côté de ce qu’elle nomme et glisse avec le décor.
Avant · un texte loin de son lieu
Après · le texte près du lieu
Comment animer en JavaScript avec Canvas 2D ?
La peinture. Le dessin utilise Canvas 2D, la surface de dessin du navigateur. Une tache d’aquarelle est une forme au contour déformé, empilée jusqu’à vingt-quatre fois avec une faible opacité. Les traits sont des plumes à pression, effilées aux extrémités, posées sur un crayon gris de construction. Le décor est peint une fois au chargement, puis rejoué à chaque image.
Les plans superposés. Le décor est réparti en couches à plusieurs profondeurs qui glissent à des vitesses différentes, comme sur le banc-titre des anciens dessins animés. Chaque couche peut être exportée seule pour être vérifiée.
Une couche vérifiée seule
Le mouvement. Le zèbre change de pose douze fois par seconde, le trait tremble huit fois par seconde, et seule la caméra glisse en continu. Ses pattes sont calculées par cinématique inverse : un sabot posé reste fixe sur le sol pendant que le corps avance. Comme chaque image est une fonction du temps, le programme peut dessiner n’importe quel instant. Claude rendait donc des planches de poses rapprochées pour contrôler un geste.
La marche, pose par pose
La mise en boule, image par image
Les défauts. Une planche montre aussi ce qui cloche. Un petit rectangle gris apparaissait sous le ventre du zèbre. En rendant la même image avec et sans l’ombre portée, la cause est apparue : une ombre tournée au hasard dans une toile trop petite, qui la coupait en rectangle. La correction tient en un paramètre.
Avant · un rectangle gris
Le même cadre sans l’ombre
Comment les bruitages ont été créés avec Web Audio
La bande-son est un morceau de piano posé tel quel sur les 96 secondes. Tout le reste est généré dans le navigateur avec Web Audio : 20 familles de bruitages et 12 ambiances. Après la cinquième version, j’ai demandé des bruits de sabots et beaucoup plus d’ambiance sonore pour marquer les changements de paysage. Chaque lieu a donc reçu son lit sonore, qui entre et sort en fondu.
Une ambiance par lieu, sur les 96 secondes
Parcfeuillage, ville au loin
Rue et placeville qui s’éveille, voix
Sambreeau, moteurs des bateaux
Terrilgrondement des usines
Stadegrillons, projecteurs
Les 303 pas sont calculés sur la marche dessinée : un bruit part à l’instant exact où un sabot touche le sol, et sa matière suit le terrain (gravier au parc, pavés dans la rue, dalles au quai, schiste sur le terril).
Avant · la bande-son de la version 4
Après · la bande-son finale
Pendant ce projet, Claude contrôlait l’audio par des mesures. C’est ainsi qu’a été repéré le défaut le plus gênant : un bâillement beaucoup trop fort. En rendant chaque famille de bruitages seule, il culminait trois fois plus haut que le carillon. Une ligne de code l’a ramené au niveau des autres.
Le bâillement trouvé par une mesure
Bâillement, avant correction
0,753
Carillon
0,220
Sabots (303 pas)
0,197
Rebonds
0,152
Pop du ballon
0,107
Corne de bateau
0,105
Oiseaux
0,065
Bâillement, après correction
0,054
Mouettes
0,018
Le résultat final, après six versions
JavaScript a servi au dessin et au mouvement, Web Audio au son, Playwright à capturer les 2 880 images et FFmpeg à les assembler. Mais ce qui a fait le film, c’est la boucle répétée six fois : regarder un rendu, nommer précisément ce qui gêne, corriger, puis comparer le même instant avant et après.
Les rendus, planches et spectrogrammes proviennent des essais conservés du 16 octobre 2026 ; ils n’ont pas été recréés pour cet article. Les deux courbes sont tracées d’après les réglages et les mesures consignés dans le code. Les photographies de référence sont créditées sous chaque image ; un clic agrandit les comparatifs.
Un projet dirigé par Théo Eloy, fondateur d’Impaaact, réalisé avec Claude pour la programmation et l’analyse des rendus.