Sommaire (5 parties)
Je voulais faire une carte de Noël toute simple pour ce site : un chat perché en haut d'un sapin, sous la neige. Je l'ai fait coder par Claude Code, l'assistant de programmation d'Anthropic, qui lit les fichiers d'un projet et les modifie lui-même. L'IA derrière s'appelle Claude. La carte utilise Three.js, une boîte à outils de code toute prête qui dessine de la 3D dans une page web.
Le chat est arrivé sur son sapin sans que j'écrive une ligne de géométrie. Alors j'ai continué : une cheminée, un Père Noël qui tombe dedans et se brûle les fesses, un juke-box, un petit train. Deux jours plus tard, la carte simple était devenue Le Chat Étoile, un salon entier rempli de surprises.
La 3D fait peur pour une raison : il faut des maths. Des vecteurs, des angles, des rotations, tout ce qui fait refermer le tutoriel au deuxième chapitre. Ce mur-là, l'IA le franchit pour toi. Ce qu'il te reste à faire est bien plus amusant, et voici comment je m'y suis pris.
Le Chat Étoile a fini par avoir trois petites sœurs dans le Labo 3D du site, codées de la même façon. Chacune se lance d'un clic, sur ordinateur comme sur téléphone.
Une carte simple, deux jours de clins d'œil
Le plus dur, avec une IA qui code vite, c'est de s'arrêter. Chaque idée tenait en une phrase, et chaque phrase devenait un gag qui marchait. Alors j'ai caché dans la pièce des clins d'œil aux films de Noël :
- Gremlins : Gizmo est assis par terre comme une peluche, avec une assiette et un verre d'eau à côté de lui. Dans le film, on ne le mouille jamais et on ne le nourrit pas après minuit, sinon c'est la catastrophe. Fais-lui goûter quand même.
- Maman, j'ai raté l'avion : un flacon d'after-shave attend sur la cheminée. Touche-le, et le chat se plaque les pattes sur les joues en hurlant comme Kevin. Il prépare aussi ses pièges contre le Père Fouettard, le croque-mitaine des enfants pas sages, plan de bataille compris.
- L'Étrange Noël de monsieur Jack : touche la citrouille, et c'est le traîneau-cercueil de Jack qui passe à la fenêtre. Un cadeau maudit descend ensuite par la cheminée.
- Le Grinch : quand plus personne ne touche à rien, un long bras vert et poilu sort du foyer pour voler les cadeaux. Attrape-le à temps, et un cœur grandit de trois tailles dans le conduit.
Un carnet compte les surprises que tu as trouvées, et la pièce en cache des dizaines. Je ne te les donne pas toutes.
J'ai minuté une crèche sur un épisode de South Park
Au pied du sapin, il y a une crèche faite maison. Ses huit santons sont des bestioles de la forêt : un cerf, un ours, un castor, un renard, un lapin, un raton laveur... Elle a l'air adorable. Dans un épisode de South Park, ces mêmes bestioles fêtent Noël en attendant en secret la naissance de l'Antéchrist.
Touche-la, insiste, et elle se trahit. La lumière baisse, les yeux virent au rouge, le chœur démarre et une queue de diable sort de derrière le berceau. Puis le Père Noël entre, comme dans l'épisode, et il a apporté son fusil. La bande-son est l'extrait de l'épisode, en version française.
Ce gag-là, je le voulais pile au rythme de l'épisode. Les coups de feu ont été repérés sur la forme d'onde de l'extrait, le dessin du son où chaque bruit fort fait un pic. Ensuite, on a écouté l'extrait en tapant du doigt à chaque coup, pour vérifier. Les coups de fusil tiennent dans une ligne : chaque nombre est un coup, en secondes depuis le début de l'extrait.
// secondes dans l'extrait : pics trouvés sur la forme d'onde, confirmés au doigt en écoutant
const RAMPAGE_BLASTS = [4.58, 6.66, 7.75, 8.24, 13.63, 17.39, 18.88, 23.47];Claude a écrit les bestioles, les lumières et l'animation. Mon travail à moi, c'était l'oreille : est-ce que chaque santon tombe pile sur son coup de fusil ? C'est là que j'ai compris comment on travaille la 3D avec une IA.
Mon workflow : une phrase, un écran, plusieurs sessions
Chaque gag suivait le même chemin, du début à la fin :
- Une phrase. Je décris l'idée comme je la raconterais à un ami : « quand on touche l'after-shave, le chat fait le cri de Kevin ». Pas de coordonnées, pas de formule. Claude écrit tout, la géométrie comprise. Le cri n'est même pas un enregistrement : Claude l'a fabriqué en code, un « Aaaah » d'enfant qui tremble.
- Claude vérifie seul. Il ouvre la page dans un navigateur qu'il pilote lui-même, et regarde le résultat avant de me le rendre. J'ai raconté dans un autre article comment donner un navigateur à Claude Code.
- Je regarde l'écran. Je joue avec la scène, je tourne la caméra, et je renvoie une capture d'écran ou une phrase quand quelque chose cloche.
- Plusieurs sessions en parallèle. Une session de Claude Code, c'est une conversation de travail avec Claude, qui ne connaît que les fichiers qu'elle a lus. J'en ouvrais plusieurs en même temps, chacune sur un gag différent.
Plusieurs sessions sur le même projet, c'est plusieurs cuisiniers dans la même cuisine. Deux règles ont rendu ce rythme tenable.
La première tient à l'organisation du code.
Chaque gag vit dans son propre fichier : gizmo.js, voleur.js, creche.js.
Pour le brancher sur la scène, il suffit d'une ligne à trois endroits.
Le premier est la boucle d'animation, le code qui redessine toute la scène à chaque image.
Les deux autres sont le carnet des surprises et les sons.
Une session qui ajoute un gag touche à peine au travail des autres.
La seconde est écrite dans le CLAUDE.md du projet, un fichier d'instructions que Claude Code lit au début de chaque session. Elle dit : « éditer par remplacement exact, jamais réécrire un fichier entier ». Autrement dit, on change seulement les lignes voulues. Une session qui réécrit un fichier entier part de sa copie, et sa copie peut dater d'avant le travail d'une autre session. C'est arrivé une fois malgré la règle : un correctif a disparu, très probablement écrasé de cette façon, et il a fallu le refaire.
Les maths de Three.js, c'est l'IA qui les tape
Avant de coder, j'ai enseigné les maths et la physique, alors je guettais les erreurs de formule. Ce qui m'a le plus surpris, c'est que celles que j'ai vues étaient justes. La chute d'un bonnet, la surface inclinée d'un sapin, la courbe qui adoucit les lumières trop fortes : Claude écrivait ces formules sans se tromper.
Ce que l'IA rate, c'est l'objet sur lequel elle applique la formule. Le gag du Père Noël en est le parfait exemple. Il tombe dans la cheminée, se brûle les fesses et repart en fusée par le conduit. Son bonnet retombe du haut de la pièce, tournoie, et finit à moitié enfoncé dans le parquet.
Dans Three.js, chaque objet a une origine : un seul point. Quand le code dit « mets le bonnet là », c'est ce point-là qu'il pose à cet endroit, et le reste de l'objet s'étend autour. Claude arrêtait la chute quand l'origine du bonnet arrivait juste au-dessus du sol. Or cette origine est au milieu du bonnet, donc le bas passait sous les lattes. Le correctif arrête la chute un peu plus haut et couche le bonnet sur le côté : son bord repose enfin sur le parquet.
La formule de chute était juste. Il manquait à Claude de savoir où se trouve l'origine du bonnet, et aucun calcul ne le lui disait. Ce genre de défaut, il faut le voir à l'écran, puis le dire avec le bon mot. « Le bonnet traverse le parquet parce que son origine est au milieu » : avec cette phrase, Claude sait exactement quoi corriger.
Le calcul a changé de mains
Je voulais une carte simple. J'ai fini avec un salon hanté de gremlins, de bestioles diaboliques et d'un bras vert voleur de cadeaux. Le mur des maths est tombé : l'IA tape les formules à ta place.
Ce qui reste à faire, c'est regarder. Il faut voir ce qui cloche, puis le nommer avec quelques mots justes : origine, rotation, échelle. Ces mots-là s'apprennent vite quand on les voit bouger à l'écran. C'est ce que j'ai mis dans le cours Three.js par les maths : sept leçons, chacune avec sa démo à manipuler. Le chapitre Translation, rotation, échelle : les matrices montre justement ce point d'origine, qui sert aussi de pivot quand l'objet tourne.
Commence comme moi, par une phrase. La mienne était : « un chat perché en haut d'un sapin, sous la neige ». Regarde ensuite où elle t'emmène.