Films codés
Ce skill crée une page HTML qui dessine l'image f à partir de (f, seed), une bande-son calculée de la même manière, et un MP4. Le sujet du film, son apparence et son mouvement sont à vous de décider. Le skill repose sur trois éléments : l'intention que vous écrivez d'abord, le goût qui guide votre jugement, et les vérifications qui confirment si le film final respecte l'intention.
Configuration
Exécutez bash assets/doctor.sh une fois sur une nouvelle machine. Il vérifie la présence de Chrome (ou un chemin CHROME), Node 22 ou supérieur, ffmpeg, et Python 3 avec numpy et Pillow, et indique comment corriger les éventuelles absences.
1. Écrire l'intention
Copiez assets/intent.md à côté de la page sous le nom piece.intent.md. Remplissez d'abord le message clé et le ressenti : ce qu'un nouveau spectateur peut dire après un visionnage, et ce qu'il ressent à la fin. Laissez le reste jusqu'à ce qu'une esquisse soit choisie, car une fiche écrite en premier fixe l'idée, et les esquisses ne peuvent ensuite que modifier son apparence. C'est ainsi que les trois esquisses du film "Ledger" sont devenues une seule idée sous trois formes.
Une fois une esquisse choisie, terminez la fiche. Ses lignes "Jugées" indiquent ce que nous suivons, le point que seul ce sujet pouvait apporter, l'apparence et pourquoi, si et comment le texte apparaît, les films de la galerie dont il s'inspire, et comment la fin répond au début. Ses lignes "Mesurées" donnent la durée, le rythme, le son et le beat. Chaque choix ultérieur sert cette fiche. Quand le travail montre que la fiche était erronée, modifiez la fiche et dites-le.
2. Juger par la galerie
reference/gallery.md contient 29 films où Claude a dessiné chaque image en code, dans les domaines de la musique, des explications, des histoires et des expériences, ainsi que ce que les films appréciés ont en commun :
- Il y a une chose à suivre à travers chaque scène.
- Chaque image raconte quelque chose. Aucune n'est là seulement pour la variété.
- Cela se termine là où cela a commencé, mais transformé.
- Quelque chose montre où nous en sommes : un indicateur, un compteur, une horloge.
- L'apparence est un matériau réel, utilisé avec ses défauts, choisi pour cette histoire.
- Le son et l'image ne font qu'un.
- Le texte est rare, grand et fait partie du monde.
- Il a un point de vue et une certaine chaleur.
- Il est aussi court que l'idée.
Ce sont des jugements, pas des règles. Enfreignez-en un si la fiche explique pourquoi. reference/taste.md contient les corrections que Kartik, l'auteur du skill, a apportées pendant sa construction : un goût de départ, pas le vôtre. Là où ils divergent de la galerie, dites-le et demandez à la personne à qui le film est destiné.
3. Vérifier le résultat
Signalez les trois niveaux dans la note de livraison.
- Les défauts bloquent la construction. La page s'analyse, s'exécute et dessine la même image à chaque fois. Aucune image ne clignote ni ne saute lors d'une coupe. Le mix se situe entre -28 et -8 dBFS et ne sature pas.
check.py,seamcheck.py,verify.pyetbuild.shles imposent. - L'intention est mesurée.
python3 assets/verify.py piece.mp4vérifie les lignes Mesurées de la fiche. Un écart signifie que le film ou la fiche est erroné. Corrigez l'un et dites lequel. - Le test de visionnage est le vôtre. Chaque ligne deux fois a passé tous les nombres et était quand même mauvais. Répondez aux cinq questions que
verify.pyaffiche : racontez-le en tant que nouveau spectateur, nommez chaque vignette, regardez sans le son, regardez-le à côté de son film de galerie, jugez la dernière image.
lookcheck.py et soundcheck.py ne bloquent jamais. Ils décrivent le rythme, la couleur, la synchronisation et le beat, et vous les lisez par rapport à la fiche.
Flux de travail
Chaque étape a une ligne de rapport, donc elle ne peut pas être cochée sans dire comment.
- S'ils ont partagé une référence, démontez-la d'abord. Un clip, une image fixe ou une page HTML comptent tous. Lisez
reference/references.md. Rapportez quelle forme c'est, ce qu'elle fait, quels écarts sont comblables, et ce que vous reprenez et laissez. - Écrivez le message clé et le ressenti. Seulement ces deux lignes. Rapportez-les.
- Regardez les deux ou trois films de la galerie les plus proches en entier. Rapportez ce que vous reprenez de chacun, et ce que vous ne copierez pas.
- Esquissez trois histoires différentes sous forme d'images fixes. Chacune est une chose différente qui se passe, racontée en une ligne, pas la même idée sous trois apparences. Au moins une devrait être un monde dans lequel le spectateur pourrait vivre, pas un diagramme. Dessinez chacune avec l'apparence finale, en utilisant le moteur et la finition d'impression, jamais en fil de fer. Une esquisse ignore les vérifications de défauts, pas le savoir-faire.
assets/sketchcheck.pyéchoue sur une esquisse plate, et sur une copie si vous lui donnez les images approuvées avec--refs. Montrez à la personne à qui le film est destiné et laissez-la choisir ou mélanger. Rapportez la ligne de chaque histoire. Puis terminez la fiche. - Écrivez les mots, s'il y en a. Un paragraphe dans une seule voix, avant tout code, sauvegardé sous
piece.chain.txt. Lisez "Les mots qui sonnent comme une voix" dansreference/story.md. Rapportez le paragraphe et son ratio de connectivité. - Planifiez. Les temps forts dans l'ordre, ce que chaque image signifie en une ligne, ce qui montre où nous en sommes, et la fin. Rapportez le plan. C'est un plan, pas un contrat.
- Construisez la page. Commencez à partir de
assets/engine.html, ou écrivez votre propre page selon le contrat ci-dessous. Vérifiez chaque scène seule avant de les assembler. Rapportez ce que vous avez redessiné après avoir regardé. - Créez le son. Écrivez d'abord la mélodie, dans
TUNEetSECTIONS, puis les quatre à huit accents pour les tournants de l'histoire. Ou apportez votre proprepiece.score.py, unpiece.wavque la page génère, ou du silence. Rapportez la partition quescore.pyaffiche, et pourquoi le son correspond à la fiche. - Construisez.
assets/build.sh piece.html out.mp4.ROUGH=1devant produit une ébauche à montrer tôt. Rapportez les nombres. - Vérifiez. Les trois niveaux. Rapportez chacun.
- Livrez sous forme de nouveau fichier. Ne jamais écraser la dernière construction.
Deux looks dans un même film
Un film peut alterner entre deux moteurs de rendu, comme des scènes riso et un grand livre à l'encre. Donnez au second sa propre portée, dessinez ses actes avec l'option de plaque { raw: (ctx, u, f, size) => {} }, et placez ses coupes dans EXTRA_CUTS. assets/examples/parcel42-day/ fait exactement cela. C'est aussi l'exemple de travail canonique de l'ensemble du flux, alors lisez son README, et lisez-le pour la méthode, jamais pour l'apparence.
Le contrat de la page
Toute page qui répond à ces critères construit et vérifie. Elle définit const FPS = n. En ?capture=1, elle définit window.__frames comme le nombre d'images et window.__render(f) pour dessiner l'image f de la même manière à chaque fois, puis définit son titre sur capture ready N. Sa première ligne de script écrit toute erreur dans document.title, afin qu'un crash ne ressemble pas à une page blanche.
Les pages construites sur le moteur bénéficient également de ?play=1, ?f=N, ?grid=1, ?scene=id et ?cuts=1, et score.py lit leurs actes depuis plate().
Les fichiers
| fichier | description |
|---|---|
assets/intent.md | le modèle de fiche d'intention |
assets/engine.html | un point de départ optionnel : grille d'images, actes et plans, bibliothèque de scènes, mouvements, une presse riso, le stylo d'écriture manuscrite, trois mondes de démonstration |
assets/score.py | la partition calculée sur la grille de beats de la page, avec tonalité, harmonie, kit, swing et fin propres à chaque pièce |
assets/build.sh | portail, capture, raccords, partition, encodage, mesure, vérification, en une commande |
assets/verify.py | le film par rapport à sa fiche d'intention, plus le volume sonore et l'écrêtage, puis les questions du test de visionnage |
assets/check.py | le portail de la page : analyse, gestion des erreurs, modes, grille, rendu |
assets/seamcheck.py | flashs, sauts lors d'une coupe, à-coups dans un mouvement, une ancre épinglée qui dérive |
assets/sketchcheck.py | les esquisses d'histoire : pas plates, pas une copie des images approuvées (--refs), pas de monde interdit (--world), pas de stub laissé |
assets/lookcheck.py, assets/soundcheck.py | mesures de l'image et du son, lues par rapport à la fiche et à la galerie |
assets/printcheck.py | vérifie si une image a l'air imprimée ou calculée, par rapport à une image de référence. Recadre au centre une image large en carré |
assets/refpage.mjs | démonte une référence qui est une page HTML : sa palette, ses marques, ses calques et son kit audio tels qu'ils les dessinent, plus un MP4 pour que les vérifications de clip fonctionnent dessus |
assets/capture.mjs | capture d'image via CDP. build.sh l'appelle |
assets/capture-range.mjs, assets/capture-par.sh | capture à n'importe quelle largeur et hauteur, dans plusieurs Chrome à la fois. Pour le 16:9 et tout ce qui dépasse une minute |
assets/doctor.sh | cette machine est-elle prête : Chrome, Node 22+, ffmpeg, numpy, Pillow |
assets/examples/parcel42-day/ | la source du film approuvé, avec un README sur la façon dont il a été construit |
assets/example-print-still.html | le modèle de finition riso |
Quand lire quoi
Lisez chaque fichier en entier, avec un seul appel par fichier. Une exécution Codex lisait trois ou quatre fichiers de skill par appel en dessous d'une limite de sortie. Elle perdait environ 13k tokens au milieu de ces lectures sans s'en rendre compte, y compris la moitié de gallery.md. Si une lecture indique que les tokens ont été tronqués, relisez ce fichier seul.
- Avant la fiche d'intention, et avant de montrer quoi que ce soit, lisez
reference/gallery.md. Puisreference/taste.md. - Quand ils partagent un clip de référence, une image fixe ou une page HTML, lisez
reference/references.md. - Quand vous planifiez l'histoire ou écrivez des légendes, lisez
reference/story.md. - Quand l'image et le son partagent une grille de beats, lisez
reference/time.md. - Quand vous planifiez les transitions ou la caméra, lisez
reference/moves.md. - Quand le look est riso ou toute impression, lisez
reference/press.md, puisreference/surface.mdavant de régler la texture. - Quand vous ajoutez de l'écriture manuscrite, lisez
reference/hand.md. - Quand vous créez le son, lisez
reference/sound.md. - Quand vous construisez, lisez
reference/export.md. - Quand le film dure plus d'une minute, lisez la fin de
reference/export.md. - Quand le film est une leçon narrée pour YouTube, utilisez le skill
lesson-film, qui s'appuie sur celui-ci. - Les pièges, toutes les façons dont cela a échoué jusqu'à présent, sous forme de listes de contrôle par phase. Avant la fiche et les esquisses, et avant de montrer quoi que ce soit,
reference/traps-story.md. Avant de construire la page,reference/traps-page.md. Quand vous planifiez les mouvements, la caméra ou la grille de beats,reference/traps-motion.md. Quand le look est imprimé,reference/traps-print.md. Quand vous créez le son,reference/traps-sound.md. Avant la première construction complète,reference/traps-build.md.
Modifier ce skill
Énoncez l'intention et le jugement, et vérifiez le résultat par rapport à l'intention. Ne transformez jamais le style d'un film en règle : c'est ainsi que chaque pièce est devenue une copie d'une seule référence. Une leçon va dans le seul fichier qui la possède, et chaque autre fichier y pointe en une ligne. Un nouveau film approuvé par quelqu'un va dans la section "Notre" de la galerie, avec la raison de son succès.
Emprunté, avec remerciements
Le modèle de remplissage plat avec finition écrêtée, ainsi que la forme de wob, crayon, hatch, grain, dotScreen et scribble, proviennent du skill hand-drawn-canvas-animation par alesha-pro (MIT, github.com/alesha-pro/tools). Sa règle selon laquelle la texture est une finition plutôt qu'un dégradé, et que le remplissage d'une forme et son contour ne doivent jamais coïncider, est ce qui a débloqué le look d'impression de ce skill.
À quoi ressemble un bon résultat
Un nouveau spectateur le regarde une fois et le raconte, et le récit correspond au message clé. Chaque vignette de la planche contact est une image de quelque chose qui a du sens. Il pourrait s'asseoir à côté des films de la galerie sans être une copie de l'un d'eux. La dernière image le conclut. Les défauts sont nuls, la fiche correspond, et vous l'avez regardé quand même.