Que fait animate ?
Transformez des références et une idée approximative en un MP4 dont chaque frame est dessinée par le code et dont le son est synthétisé. L'utilisateur apporte le goût ; vous faites la mise en scène. Un brief sommaire suffit, donc prenez les décisions créatives vous-même et ne demandez que ce qui changerait l'ensemble de l'œuvre.
Tout se trouve dans animations/<slug>/ :
refs/ study/ style.md beats.md piece.html score.json out/<slug>.mp4
Ajoutez-y des scripts d'aide ou des notes si nécessaire. examples/bee-dance/ dans le dossier de ce skill est un film complet réalisé.
Dans les commandes ci-dessous, $SKILL désigne le dossier de ce skill. Exécutez-les depuis le projet de l'utilisateur avec $SKILL/.venv/bin/python
si ce chemin existe, sinon python3. Si un paquet manque, consultez la configuration dans README.md. Ces commandes nécessitent ffmpeg et Chrome.
Choisir le travail
| L'utilisateur veut | Travail | Comment faire |
|---|---|---|
| "Animer cette image" | Déplacer l'illustration | Découpez l'image en calques et déplacez-les. Lisez references/move-an-image.md. Sautez les étapes 3-4 du piece.html ; le rendu est un script Python. |
| "Peindre ceci", "recréer cette scène" | Repeindre | Dessinez toute la scène dans piece.html, en correspondant étroitement à la référence. |
| Un sujet ou une histoire "dans ce style" | Nouveau film | Processus complet ci-dessous. Les références définissent le look ; le sujet est nouveau. |
S'ils ne donnent pas de durée ou de format, utilisez 15 secondes en 1080x1920 pour un film et 5 secondes pour une image animée.
Le code est fort en formes, lignes, dégradés et texture : vecteur plat, dessin au trait, papier découpé, risographie, aquarelle, décors d'anime, planches botaniques. Il est faible en photoréalisme et en visages expressifs. Si une référence est photoréaliste, dites-le avant de construire et proposez une interprétation illustrée.
Étape 1 : Étudier chaque référence
L'utilisateur peut vous donner de nombreuses références, alors assignez à chacune un rôle plutôt que de les moyenner en une bouillie.
python3 $SKILL/scripts/study.py animations/<slug>/study <fichiers ou dossiers...>
Cela vous donne, par référence, une planche-contact, une palette, et pour les vidéos les coupes et la courbe de rythme. Si seulement une partie
d'une vidéo importe, ajoutez sa plage en secondes, comme dans "reel.mp4@0-12", ou si des images de tête parlante faussent les résultats.
Ensuite, regardez les planches vous-même, et recadrez là où la texture compte. Les chiffres ne peuvent pas vous dire pourquoi quelque chose
est agréable.
Écrivez style.md :
- Ce que chaque référence nous apporte, une ligne chacune : texture de celle-ci, type de celle-là, rythme d'une autre.
- Ce que nous ne copierons pas : poses, personnages, logos, signatures, compositions exactes. Prenez le style, pas le travail ; l'exception est un travail de Repeindre ou Déplacer sur une image que l'utilisateur a demandé d'animer.
- Palette sous forme de valeurs hexadécimales, type (
assets/fonts/en contient deux pour commencer, ou copiez n'importe quelle police ouverte), texture, sensation de mouvement. - Un procédé qui lie l'ensemble : un objectif, une ondulation, une ligne qui ne se brise jamais. Les films sans cela ressemblent à un diaporama.
Ajoutez une courte fiche pour chaque nouvelle référence dans animations/library.md, afin que ses leçons survivent à ce projet. Réutilisez
les fiches lorsque l'utilisateur pointe vers un style qu'il a déjà utilisé, et ne développez une fiche que lorsque vous avez appris quelque
chose de nouveau.
Porte : vous pouvez dire en une phrase à quoi ressemble cette pièce et pourquoi cela sert le sujet.
Étape 2 : Beats
S'il y a des faits dans la pièce, vérifiez-les d'abord. Une affirmation erronée magnifiquement dessinée reste erronée, et les "faits" populaires sont souvent approximatifs. Notez tout ce que vous avez adouci pour le rapport final.
Écrivez beats.md sous forme d'un seul tableau. L'image et le son sont planifiés ensemble car cette synchronicité est ce qui donne
l'impression de qualité :
| Temps | Image | Son |
|---|---|---|
| 0-1,5 s | Une goutte orange tombe et s'étale | Goutte, éclatement humide, nappe entre |
| 1,5-3 s | Ligne de titre, détails apparaissent | Pincement par mot, petits tics |
Porte : quelque chose bouge dans la première demi-seconde ; la forme est crochet, construction, respiration, aboutissement ; pas de tronçon de plus de 2 secondes sans une nouvelle idée visuelle ; la fin dure environ 1,5 seconde pour pouvoir être lue. Laissez l'image porter les nouvelles idées plutôt que les mots : chaque légende nécessite environ 1,5 seconde à l'écran, donc coupez les légendes avant de les raccourcir. Gardez le texte hors des 12 % supérieurs et 18 % inférieurs d'un cadre vertical.
Étape 3 : Construire l'image
Copiez assets/piece-template.html vers piece.html et dessinez dedans. Le contrat est window.PIECE plus
window.renderFrame(t).
renderFrame(t) doit dépendre uniquement de t, et peut être asynchrone. Les images fixes sautent directement à n'importe quel moment, donc
toute chose mémorisée entre les trames, ou tout Math.random() non ensemencé, les brise. Peignez les couches statiques coûteuses une fois
dans window.ready, à partir d'un générateur ensemencé, puis compositez par trame.
Pour montrer un autre film à l'intérieur d'une pièce, extrayez ses trames vers clips/ sous forme de JPEG numérotés, chargez celle dont
vous avez besoin avec une Image dans un renderFrame asynchrone, et dessinez-la sur le canvas.
Lisez references/styles.md avant de dessiner ; il contient des recettes fonctionnelles (nuages cel, feuillage, personnages en marche,
eau, aquarelle, papier) et les fichiers sources à copier. La profondeur vient des couches se déplaçant à des vitesses différentes, la vie
vient d'un petit mouvement secondaire : balancement, dérive, scintillement, clignotement.
Révisez les images fixes tôt et souvent, bien avant un rendu complet :
python3 $SKILL/scripts/render.py animations/<slug>/piece.html --stills 0.5 3 7 12
Regardez-les en taille réelle, comparez-les côte à côte avec les références, et corrigez ce qui ne va pas. Attendez-vous à plusieurs tours. La première image fixe est généralement une ébauche, et cette boucle est là où la qualité se crée.
python3 $SKILL/scripts/compare.py animations/<slug>/out/compare.jpg <images fixes et images de référence...>
Porte : une image fixe du milieu ressemble à celle faite avec les mêmes matériaux que les références : même papier, peinture, ligne et couleur. Le sujet peut être nouveau. Les versions clipart de la référence ne passent pas.
Étape 4 : Son
Écrivez score.json avec les mêmes temps que beats.md. Voir l'en-tête de scripts/synth.py pour les sons
disponibles : pincements, cloches, nappes, gouttes, tics, gonflements, whoosh, impacts, kicks et nappes de bruit.
python3 $SKILL/scripts/synth.py animations/<slug>/score.json animations/<slug>/out/score.wav
Restez dans une tonalité. Placez les impacts sur les événements visuels, pas sur une grille. Laissez un vrai silence avant l'aboutissement, car le contraste est ce qui le fait ressortir. Générez de longues séquences de notes avec quelques lignes de Python plutôt que de les taper.
Vous ne pouvez pas l'entendre, alors lisez le rapport de niveau que synth.py imprime : recherchez les baisses non planifiées, et
le son signature enterré sous le reste.
Si la pièce est narrée
La narration vient avant l'image, car les timings des mots définissent chaque beat. Enregistrez-la avec l'outil vocal dont dispose l'utilisateur, transcrivez-la avec les timings des mots (faster-whisper fonctionne), puis construisez les beats et légendes à partir de ces temps. Whisper peut commencer un mot tôt dans le silence qui le précède, donc vérifiez la forme d'onde avant de couper une pause.
Mixez la voix sur le score, puis effectuez le rendu avec le résultat en tant que --audio. Le score s'atténue sous la voix, donc la
musique monte dans les pauses :
python3 $SKILL/scripts/mix.py animations/<slug>/out/voice.wav animations/<slug>/out/score.wav animations/<slug>/out/mix.wav
Étape 5 : Rendu, vérification, correction
python3 $SKILL/scripts/render.py animations/<slug>/piece.html --audio animations/<slug>/out/score.wav
python3 $SKILL/scripts/qc.py animations/<slug>/out/<slug>.mp4
render.py écrit out/<slug>.mp4, maîtrisé à -14 LUFS. Il imprime la progression, et prend environ 1 à 2 minutes pour 15
secondes d'une pièce typique ; exécutez-le en arrière-plan si une pièce est lourde. Après un changement uniquement sonore, ajoutez --remux
pour échanger l'audio en quelques secondes sans redessiner.
qc.py signale les tronçons morts, les scintillements d'une trame et la sonie, et écrit une planche-contact. Il ne peut pas juger si
le mouvement est bon, alors lisez aussi la planche, puis parcourez les moments risqués trame par trame en recadrant en gros plan :
transitions, apparition et disparition de texte, là où les calques se chevauchent, et un cycle complet de tout mouvement répété. Corrigez
et refaites le rendu jusqu'à ce que ce soit propre.
Remise du travail
Rapportez dans le langage clair de l'utilisateur : ce que vous avez fait, comment chaque référence a été utilisée, ce que vous avez vérifié, et ce que vous n'avez pas pu vérifier. Vous ne pouvez pas entendre le score ni le regarder en vitesse, alors dites-le. Ajoutez :
- Un fait à savoir, si vous avez adouci une affirmation.
- Réglages faciles : 3 ou 4 changements spécifiques qu'ils pourraient demander ensuite.
- Si une référence appartient à quelqu'un d'autre et nécessite une réflexion avant une utilisation commerciale.