Dessin animé en code

Code cartoon (dessin animé en code)

Un film ici est une page web. Chaque scène est un fichier JavaScript qui dessine la frame u de son propre monde ; un petit moteur joue les scènes sur une timeline construite à partir des voix enregistrées ; Chrome headless capture chaque frame ; ffmpeg les assemble avec un mix de voix, d'effets sonores générés et d'ambiance. Aucun modèle d'image ou de vidéo n'intervient dans l'image.

example/ contient un film complet réalisé de cette façon : LE BALLON, 2:41, 13 styles, 16 scènes. Commencez un nouveau film en copiant example/ et en remplaçant ses scènes ; le moteur, les outils et le contrat sont conçus pour être réutilisés tels quels.

L'ordre du travail (ne pas le réordonner)

1. Tableau des styles d'abord (references/styles.md). Une image fixe par style candidat, chacune dans une technique différente, toutes montrant le même personnage. Les styles qui partagent une palette et une police de caractères sont perçus comme un seul style, donc différenciez-les par la palette, la texture, la dimension et la technique à la fois. Faites approuver le tableau avant toute animation.
2. Histoire (references/story.md). Un objet porteur présent dans chaque plan, et une raison pour chaque changement de style. Écrivez le script avec une balise pour l'émotion de chaque réplique.
3. Voix avant les images (references/voices.md). Enregistrez chaque réplique, puis construisez la timeline à partir des durées réelles. Les scènes sont animées en fonction de cette timeline, jamais l'inverse.
4. Moteur et contrat. Réutilisez example/balloon.html, example/balloon/film.js, example/tools_balloon.mjs et example/balloon/CONTRACT.md. Lisez le contrat avant d'écrire une scène : il est court et chaque règle existe parce que quelque chose s'est cassé sans elle.
5. Scènes (references/styles.md pour la recette de chaque style, references/parallel-build.md pour en construire plusieurs à la fois). Un fichier par scène, draw(u, S) une fonction pure de u.
6. Son (references/sound.md). Chaque scène déclare ses propres effets, moments de déclenchement et ambiance ; l'outil les génère et les mixe.
7. Rendu par scène, puis assemblage. bash balloon/final.sh génère un MP4 par scène, donc seule une scène modifiée est rendue à nouveau.
8. Vérification du fichier terminé (references/checking.md). Vous ne pouvez pas regarder ni écouter, alors vérifiez ce qui peut être mesuré, et dites clairement ce qui n'a pas été vérifié.

Règles qui s'appliquent à chaque scène

• Une frame est une fonction pure du temps. Les frames sont rendues une par une, parfois dans le désordre. Pas d'état de la frame précédente, pas d'horloge, pas d'aléatoire non ensemencé. Le travail fixe coûteux va dans init.
• L'objet porteur ouvre et ferme chaque scène à la même position à l'écran (dans l'exemple : le ballon rouge à (700, 560), rayon 64). La scène suivante est révélée par un cercle qui grandit exactement à partir de cet endroit, ce qui fait de chaque transition une coupe franche parfaite.
• Le héros conserve ses proportions dans chaque style. Restylez le rendu, jamais la forme.
• Quiconque parle, bouge, et personne d'autre. Il n'y a pas de synchronisation labiale ; un rebond, un bec ou un curseur clignotant suffit.
• Les nombres à l'écran sont vrais. Un compteur qui indique 600 lignes ou 512 rayons montre ce que la frame a réellement utilisé.
• Le mouvement a une cause : anticipation avant un saut, écrasement à l'atterrissage, l'effet sur la frame de l'impact, un tiers à une demi-seconde d'immobilité avant une chute.
• Les sous-titres appartiennent au moteur ; les scènes gardent les visages et les mains hors de cette bande.

Commandes (à exécuter dans le dossier du film)

npm install                                             # three + puppeteer-core ; définissez CHROME_PATH si Chrome n'est pas à l'emplacement par défaut
node tools_styles8.mjs                                  # le tableau des styles : une image fixe par style -> out/styles8/board.jpg
python tools_balloon_vo.py                              # voix + timeline (nécessite ELEVENLABS_API_KEY) ; --timeline reconstruit seulement la timeline
node tools_balloon.mjs --scene=book --sheet=auto        # 8 images fixes d'une scène + une feuille en mosaïque
node tools_balloon.mjs --glide=book                     # la pose finale d'une scène
node tools_balloon.mjs --film --sheet=13.1,24.8         # images fixes de tout le film à ces secondes (utilisez-les aux limites des scènes)
bash balloon/final.sh                                   # rend chaque scène, son, assemblage, muxage ; `final.sh comic pixel` ne re-rend que celles-ci

Nécessite Node 18+, Chrome, ffmpeg, Python 3 avec requests numpy soundfile pyloudnorm. L'image ne nécessite pas de clé API ; les voix et le son nécessitent une clé ElevenLabs.

Fichiers de référence

Fichier	À lire quand
references/styles.md	choisir des styles, ou construire une scène dans l'un des treize
references/story.md	écrire le script
references/voices.md	casting, enregistrement, timing
references/sound.md	effets, ambiance, mixage
references/checking.md	avant de dire qu'une scène ou le film est terminé
references/parallel-build.md	plusieurs scènes sont construites en même temps, ou la machine a un GPU faible
example/balloon/CONTRACT.md	toujours, avant la première scène