Cartoon em código

Code cartoon

Um filme aqui é uma página web. Cada cena é um arquivo JavaScript que desenha o quadro u do seu próprio mundo; um pequeno motor reproduz as cenas em uma linha do tempo construída a partir das vozes gravadas; o Chrome headless tira screenshot de cada quadro; o ffmpeg os junta com uma mixagem de vozes, efeitos sonoros gerados e ambiente. Nenhum modelo de imagem ou vídeo está envolvido na imagem.

example/ é um filme completo feito dessa forma: THE BALLOON, 2:41, 13 estilos, 16 cenas. Inicie um novo filme copiando example/ e substituindo suas cenas; o motor, as ferramentas e o contrato devem ser reutilizados como estão.

A ordem do trabalho (não reordenar)

1. Painel de estilos primeiro (references/styles.md). Uma imagem estática por estilo candidato, cada uma em técnica diferente, todas mostrando o mesmo personagem. Estilos que compartilham paleta e tipo de letra são lidos como um só estilo, então faça-os diferir em paleta, textura, dimensão e técnica ao mesmo tempo. Obtenha aprovação do painel antes de qualquer animação.
2. História (references/story.md). Um objeto portador que aparece em todos os planos e um motivo para cada mudança de estilo. Escreva o roteiro com uma etiqueta para a emoção de cada fala.
3. Vozes antes das imagens (references/voices.md). Grave cada fala, depois construa a linha do tempo a partir das durações reais. As cenas são animadas contra essa linha do tempo, nunca o contrário.
4. Motor e contrato. Reutilize example/balloon.html, example/balloon/film.js, example/tools_balloon.mjs e example/balloon/CONTRACT.md. Leia o contrato antes de escrever qualquer cena: é curto e cada regra existe porque algo quebrou sem ela.
5. Cenas (references/styles.md para a receita de cada estilo, references/parallel-build.md para construir várias ao mesmo tempo). Um arquivo por cena, draw(u, S) uma função pura de u.
6. Som (references/sound.md). Cada cena declara seus próprios efeitos, tempos de sinal e ambiente; a ferramenta gera e mixa tudo.
7. Renderizar por cena, depois juntar. bash balloon/final.sh renderiza um MP4 por cena, então uma cena alterada é a única coisa renderizada novamente.
8. Verificar o arquivo final (references/checking.md). Você não pode assistir ou ouvir, então verifique o que pode ser medido e diga claramente o que não foi verificado.

Regras que valem para cada cena

• Um quadro é uma função pura do tempo. Os quadros são renderizados um de cada vez e às vezes fora de ordem. Nenhum estado do quadro anterior, nenhum relógio, nenhuma aleatoriedade não seedada. Trabalho fixo caro vai em init.
• O portador abre e fecha cada cena na mesma posição da tela (no exemplo: o balão vermelho em (700, 560), raio 64). A próxima cena é revelada por um círculo que cresce exatamente a partir desse ponto, o que torna cada transição um corte de correspondência gratuito.
• O herói mantém suas proporções em todos os estilos. Reestilize a renderização, nunca a forma.
• Quem fala, se mexe, e ninguém mais. Não há sincronia labial; um pulo, um bico ou um cursor piscando é suficiente.
• Os números na tela são verdadeiros. Um contador que diz 600 linhas ou 512 raios mostra o que o quadro realmente usou.
• O movimento tem uma causa: antecipação antes de um salto, compressão na aterrissagem, o efeito no quadro do impacto, um terço a meio segundo de imobilidade antes de uma piada.
• As legendas pertencem ao motor; as cenas mantêm rostos e mãos fora dessa faixa.

Comandos (executar da pasta do filme)

npm install                                             # three + puppeteer-core; defina CHROME_PATH se o Chrome não estiver no local padrão
node tools_styles8.mjs                                  # o painel de estilos: uma imagem por estilo -> out/styles8/board.jpg
python tools_balloon_vo.py                              # vozes + linha do tempo (precisa de ELEVENLABS_API_KEY); --timeline reconstrói apenas a linha do tempo
node tools_balloon.mjs --scene=book --sheet=auto        # 8 imagens estáticas de uma cena + uma folha em grade
node tools_balloon.mjs --glide=book                     # a pose final de uma cena
node tools_balloon.mjs --film --sheet=13.1,24.8         # imagens estáticas de todo o filme naqueles segundos (use-as nos limites das cenas)
bash balloon/final.sh                                   # renderizar cada cena, som, juntar, multiplexar; `final.sh comic pixel` rerrenderiza apenas essas

Precisa de Node 18+, Chrome, ffmpeg, Python 3 com requests numpy soundfile pyloudnorm. A imagem não precisa de chave de API; vozes e som precisam de uma chave ElevenLabs.

Arquivos de referência

Arquivo	Leia quando
references/styles.md	escolhendo estilos, ou construindo uma cena em um dos treze
references/story.md	escrevendo o roteiro
references/voices.md	escalando, gravando, temporizando
references/sound.md	efeitos, ambiente, a mixagem
references/checking.md	antes de dizer que uma cena ou o filme está pronto
references/parallel-build.md	várias cenas são construídas ao mesmo tempo, ou a máquina tem GPU fraca
example/balloon/CONTRACT.md	sempre, antes da primeira cena