code-film

Filmes desenhados por código

Este skill cria uma única página HTML que desenha o quadro f a partir de (f, seed), uma trilha sonora computada da mesma forma, e um MP4. O tema do filme, sua aparência e movimentos são definidos por você. O skill contém três elementos: a intenção que você escreve primeiro, o gosto pelo qual você julga, e as verificações que indicam se o filme finalizado atendeu à intenção.

Configuração

Execute bash assets/doctor.sh uma vez em uma máquina nova. Ele verifica a presença do Chrome (ou um caminho CHROME), Node 22 ou superior, ffmpeg, e Python 3 com numpy e Pillow, e informa como corrigir o que estiver faltando.

1. Escreva a intenção

Copie assets/intent.md para junto da página como piece.intent.md. Preencha primeiro o takeaway e o sentimento: o que um novo espectador pode dizer após uma única exibição, e o que ele sente quando o filme termina. Deixe o restante até que um esboço seja escolhido, porque um cartão escrito primeiro fixa a ideia, e os esboços podem então apenas mudar sua aparência. Foi assim que os três esboços do filme "ledger" se tornaram uma ideia em três peles.

Uma vez que um esboço é escolhido, finalize o cartão. Suas linhas Julgadas (Judged) dizem o que seguimos, o ponto que apenas este assunto poderia transmitir, a aparência e por quê, se e como o texto aparece, os filmes da galeria dos quais aprende, e como o final responde ao início. Suas linhas Medidas (Measured) fornecem a duração, ritmo, som e batida. Cada escolha posterior serve a este cartão. Quando o trabalho mostra que o cartão estava errado, mude o cartão e diga isso.

2. Julgue pela galeria

reference/gallery.md contém 29 filmes onde Claude desenhou cada quadro em código, abrangendo música, explicadores, histórias e experimentos, e o que os amados compartilham:

• Há algo para seguir ao longo de cada cena.
• Cada imagem diz algo. Nenhuma está ali apenas por variedade.
• Termina onde começou, transformado.
• Algo mostra onde estamos: um indicador, um contador, um relógio.
• A aparência é um material real, usado com suas imperfeições, escolhido para esta história.
• Som e imagem são uma peça só.
• O texto é raro, grande e faz parte do mundo.
• Tem um ponto de vista e alguma calidez.
• É tão curto quanto a ideia.

Estes são julgamentos, não regras. Quebre um quando o cartão disser por quê. reference/taste.md contém as correções que Kartik, o autor do skill, fez durante sua construção: um gosto inicial, não o seu. Onde eles e a galeria discordarem, diga isso e pergunte à pessoa para quem o filme é.

3. Verifique o resultado

Relate todas as três camadas na nota de entrega.

• Defeitos bloqueiam a construção. A página analisa, executa e desenha o mesmo quadro toda vez. Nenhum quadro pisca ou "pula" em um corte. A mixagem fica entre -28 e -8 dBFS e não clipa. check.py, seamcheck.py, verify.py e build.sh garantem isso.
• A intenção é medida. python3 assets/verify.py piece.mp4 verifica as linhas Medidas do cartão. Uma falha significa que o filme ou o cartão está errado. Corrija um e diga qual.
• O teste de visualização é seu. toda-linha-duas-vezes passou em todos os números e ainda assim era ruim. Responda às cinco perguntas que verify.py imprime: reconte como um novo espectador, nomeie cada "tile", assista sem som, assista junto com seu filme da galeria, julgue o último quadro.

lookcheck.py e soundcheck.py nunca bloqueiam. Eles descrevem ritmo, cor, sincronia e batida, e você os lê contra o cartão.

Fluxo de trabalho

Cada etapa tem uma linha de relatório, para que não possa ser marcada sem dizer como.

0. Se eles compartilharam uma referência, primeiro a analise. Um clipe, uma imagem estática ou uma página HTML contam. Leia reference/references.md. Relate qual é a forma, o que ela faz, quais lacunas são preenchíveis, e o que você pega e deixa.
1. Escreva o takeaway e o sentimento. Apenas essas duas linhas. Relate-as.
2. Assista aos dois ou três filmes da galeria mais próximos por completo. Relate o que você pega de cada um, e o que não copiará.
3. Esboce três histórias diferentes como imagens estáticas. Cada uma é uma coisa diferente que acontece, contada em uma linha, não a mesma ideia em três aparências. Pelo menos uma deve ser um mundo no qual o espectador poderia viver, não um diagrama. Desenhe cada uma com a aparência final usando o motor e o acabamento de impressão, nunca como wireframe. Um esboço pula as verificações de defeito, não o trabalho artesanal. assets/sketchcheck.py reprova um esboço sem profundidade, e uma cópia quando você fornece os quadros aprovados com --refs. Mostre à pessoa para quem é e deixe-a escolher ou misturar. Relate a linha de cada história. Em seguida, finalize o cartão.
4. Escreva as palavras, se houver. Um parágrafo em uma só voz, antes de qualquer código, salvo como piece.chain.txt. Leia "Palavras que soam como uma voz" em reference/story.md. Relate o parágrafo e sua taxa de conectivos.
5. Planeje. As batidas em ordem, o que cada imagem significa em uma linha, o que mostra onde estamos, e o final. Relate o plano. É um plano, não um contrato.
6. Construa a página. Comece a partir de assets/engine.html, ou escreva sua própria página seguindo o contrato abaixo. Verifique cada cena sozinha antes de juntá-las. Relate o que você redesenhou depois de olhar.
7. Faça o som. Escreva a melodia primeiro, em TUNE e SECTIONS, depois os quatro a oito acentos para as reviravoltas da história. Ou traga seu próprio piece.score.py, um piece.wav que a página gera, ou silêncio. Relate a pauta da melodia que score.py imprime, e por que o som se adequa ao cartão.
8. Construa. assets/build.sh piece.html out.mp4. Coloque ROUGH=1 na frente para fazer um rascunho para mostrar cedo. Relate os números.
9. Verifique. Todas as três camadas. Relate cada uma.
10. Entregue como um novo arquivo. Nunca sobrescreva a última construção.

Duas aparências em um filme

Um filme pode alternar entre dois renderizadores, como cenas risográficas e um livro-razão a nanquim. Dê ao segundo seu próprio escopo, desenhe seus atos com a opção de placa { raw: (ctx, u, f, size) => {} }, e coloque seus cortes em EXTRA_CUTS. assets/examples/parcel42-day/ faz exatamente isso. É também o exemplo prático canônico de todo o fluxo de trabalho, então leia seu README, e leia-o pelo método, nunca pela aparência.

O contrato da página

Qualquer página que atenda a isso constrói e verifica. Ela define const FPS = n. Em ?capture=1, ela define window.__frames para a contagem de quadros e window.__render(f) para desenhar o quadro f sempre da mesma forma, e então define seu título como capture ready N. Sua primeira linha de script escreve qualquer erro em document.title, para que uma falha não pareça uma página em branco.

Páginas construídas no motor também obtêm ?play=1, ?f=N, ?grid=1, ?scene=id e ?cuts=1, e score.py lê seus atos de plate().

Os arquivos

arquivo	o que é
assets/intent.md	o modelo do cartão de intenção
assets/engine.html	um início opcional: grade de quadros, atos e tomadas, biblioteca de cenas, movimentos, uma prensa risográfica, a caneta de caligrafia, três mundos de demonstração
assets/score.py	a trilha sonora computada na grade de batidas da página, com tom, harmonia, kit, swing e final por peça
assets/build.sh	verificação de portão, captura, emendas, trilha, codificação, medição, verificação, em um comando
assets/verify.py	o filme contra seu cartão de intenção, mais volume e clipping, e depois as perguntas do teste de visualização
assets/check.py	a verificação de portão da página: análise, manipulador de erros, modos, grade, renderização
assets/seamcheck.py	flashes, saltos em cortes, solavancos dentro de um movimento, uma âncora fixa que se desvia
assets/sketchcheck.py	os esboços da história: não sem profundidade, não uma cópia de quadros aprovados (--refs), nenhum mundo proibido (--world), nenhum stub deixado
assets/lookcheck.py, assets/soundcheck.py	medições da imagem e do som, lidas contra o cartão e a galeria
assets/printcheck.py	verifica se um quadro parece impresso ou computado, contra uma imagem de referência. Recorta o centro de um quadro largo para um quadrado
assets/refpage.mjs	analisa uma referência que é uma página HTML: sua paleta, marcas, camadas e kit de áudio à medida que os desenha, mais um MP4 para que as verificações de clipe funcionem nele
assets/capture.mjs	captura de quadros via CDP. build.sh o chama
assets/capture-range.mjs, assets/capture-par.sh	captura em qualquer largura e altura, em vários Chromes ao mesmo tempo. Para 16:9 e qualquer coisa acima de um minuto
assets/doctor.sh	esta máquina está pronta: Chrome, Node 22+, ffmpeg, numpy, Pillow
assets/examples/parcel42-day/	a fonte do filme aprovado, com um README sobre como foi construído
assets/example-print-still.html	o modelo de acabamento risográfico

Quando ler o quê

Leia cada arquivo por inteiro, com uma chamada por arquivo. Uma execução do Codex lia três ou quatro arquivos do skill por chamada sob um limite de saída. Perdeu cerca de 13 mil tokens do meio dessas leituras sem notar, incluindo metade de gallery.md. Se uma leitura disser que os tokens foram truncados, releia esse arquivo sozinho.

• Antes do cartão de intenção, e antes de mostrar qualquer coisa, leia reference/gallery.md. Depois reference/taste.md.
• Quando eles compartilharem um clipe de referência, imagem estática ou página HTML, leia reference/references.md.
• Quando você planejar a história ou escrever legendas, leia reference/story.md.
• Quando imagem e som compartilharem uma grade de batidas, leia reference/time.md.
• Quando você planejar transições ou a câmera, leia reference/moves.md.
• Quando a aparência for risografia ou qualquer impressão, leia reference/press.md, depois reference/surface.md antes de ajustar a textura.
• Quando você adicionar caligrafia, leia reference/hand.md.
• Quando você fizer o som, leia reference/sound.md.
• Quando você construir, leia reference/export.md.
• Quando o filme passar de um minuto, leia o final de reference/export.md.
• Quando o filme for uma aula narrada para o YouTube, use o skill lesson-film, que é construído sobre este.
• As armadilhas, todas as maneiras como isso já quebrou até agora, como listas de verificação por fase. Antes do cartão e dos esboços, e antes de mostrar qualquer coisa, reference/traps-story.md. Antes de construir a página, reference/traps-page.md. Quando você planejar movimentos, a câmera ou a grade de batidas, reference/traps-motion.md. Quando a aparência for impressa, reference/traps-print.md. Quando você fizer o som, reference/traps-sound.md. Antes da primeira construção completa, reference/traps-build.md.

Alterando este skill

Declare intenção e julgamento, e verifique o resultado contra a intenção. Nunca transforme o estilo de um filme em uma regra: é assim que cada peça se tornou uma cópia de uma referência. Uma lição vai para o único arquivo que a possui, e todos os outros arquivos apontam para lá em uma linha. Um novo filme que alguém aprove vai para a seção "Nossos" da galeria, com a explicação de por que funciona.

Tomado emprestado, com agradecimentos

O modelo de preenchimento sólido com acabamento recortado, e a forma de wob, crayon, hatch, grain, dotScreen e scribble, vêm do skill hand-drawn-canvas-animation por alesha-pro (MIT, github.com/alesha-pro/tools). Sua regra de que a textura é um acabamento, não um gradiente, e que o preenchimento de uma forma e seu contorno nunca devem coincidir, é a coisa que desbloqueou a aparência de impressão deste skill.

Como é algo bom

Um novo espectador assiste uma vez e reconta, e o reconto corresponde à linha de takeaway. Cada "tile" da folha de contato é uma imagem de algo que significa algo. Poderia ficar ao lado dos filmes da galeria sem ser uma cópia de um. O último quadro encerra. Os defeitos são zero, o cartão corresponde, e você o assistiu de qualquer maneira.