Caricatura en código

Cómic de código

Una película aquí es una página web. Cada escena es un archivo JavaScript que dibuja el fotograma u de su propio mundo; un pequeño motor reproduce las escenas sobre una línea de tiempo construida a partir de las voces grabadas; Chrome sin cabeza captura cada fotograma; ffmpeg los une con una mezcla de voces, efectos de sonido generados y ambiente. No interviene ningún modelo de imagen ni de video en la imagen.

example/ es una película completa hecha así: EL GLOBO, 2:41, 13 estilos, 16 escenas. Comienza una nueva película copiando example/ y reemplazando sus escenas; el motor, las herramientas y el contrato están diseñados para reutilizarse tal cual.

El orden del trabajo (no lo reordenes)

1. Primero el tablero de estilos (references/styles.md). Una imagen fija por estilo candidato, cada una con una técnica diferente, todas mostrando el mismo personaje. Los estilos que comparten paleta y tipografía se leen como un solo estilo, así que haz que difieran en paleta, textura, dimensión y técnica a la vez. Obtén la aprobación del tablero antes de cualquier animación.
2. Historia (references/story.md). Un objeto portador que esté en cada toma, y una razón para cada cambio de estilo. Escribe el guion con una etiqueta para la emoción de cada línea.
3. Voces antes que imágenes (references/voices.md). Graba cada línea, luego construye la línea de tiempo a partir de las duraciones reales. Las escenas se animan contra esa línea de tiempo, nunca al revés.
4. Motor y contrato. Reutiliza example/balloon.html, example/balloon/film.js, example/tools_balloon.mjs y example/balloon/CONTRACT.md. Lee el contrato antes de escribir cualquier escena: es corto y cada regla existe porque algo se rompió sin ella.
5. Escenas (references/styles.md para la receta de cada estilo, references/parallel-build.md para construir varias a la vez). Un archivo por escena, draw(u, S) una función pura de u.
6. Sonido (references/sound.md). Cada escena declara sus propios efectos, tiempos de señal y ambiente; la herramienta los genera y los mezcla.
7. Renderizar por escena, luego unir. bash balloon/final.sh renderiza un MP4 por escena, así que una escena modificada es lo único que se renderiza de nuevo.
8. Verificar el archivo terminado (references/checking.md). No puedes ver ni escuchar, así que verifica lo que se puede medir y di claramente lo que no se verificó.

Reglas que aplican a cada escena

• Un fotograma es una función pura del tiempo. Los fotogramas se renderizan uno a la vez y a veces fuera de orden. Sin estado del fotograma anterior, sin reloj, sin aleatoriedad sin semilla. El trabajo fijo costoso va en init.
• El portador abre y cierra cada escena en la misma posición de pantalla (en el ejemplo: el globo rojo en (700, 560), radio 64). La siguiente escena se revela mediante un círculo que crece desde exactamente ese punto, lo que convierte cada transición en un corte de coincidencia gratis.
• El héroe mantiene sus proporciones en cada estilo. Reestiliza el renderizado, nunca la forma.
• Quien habla, se mueve, y nadie más lo hace. No hay sincronización de labios; un rebote, un pico o un cursor parpadeante es suficiente.
• Los números en pantalla son verdaderos. Un contador que dice 600 líneas o 512 rayos muestra lo que el fotograma realmente usó.
• El movimiento tiene una causa: anticipación antes de un salto, compresión al aterrizar, el efecto en el fotograma del impacto, un tercio a medio segundo de quietud antes de un remate.
• Los subtítulos pertenecen al motor; las escenas mantienen caras y manos fuera de esa banda.

Comandos (ejecutar desde la carpeta de la película)

npm install                                             # three + puppeteer-core; configura CHROME_PATH si Chrome no está en la ubicación predeterminada
node tools_styles8.mjs                                  # el tablero de estilos: una imagen fija por estilo -> out/styles8/board.jpg
python tools_balloon_vo.py                              # voces + línea de tiempo (necesita ELEVENLABS_API_KEY); --timeline reconstruye solo la línea de tiempo
node tools_balloon.mjs --scene=book --sheet=auto        # 8 imágenes fijas de una escena + una hoja en mosaico
node tools_balloon.mjs --glide=book                     # la pose final de una escena
node tools_balloon.mjs --film --sheet=13.1,24.8         # imágenes fijas de toda la película en esos segundos (úsalas en los límites de las escenas)
bash balloon/final.sh                                   # renderiza cada escena, sonido, unión, multiplexado; `final.sh comic pixel` re-renderiza solo esas

Necesita Node 18+, Chrome, ffmpeg, Python 3 con requests numpy soundfile pyloudnorm. La imagen no necesita clave API; las voces y el sonido necesitan una clave de ElevenLabs.

Archivos de referencia

Archivo	Léelo cuando
references/styles.md	elijas estilos, o construyas una escena en uno de los trece
references/story.md	escribas el guion
references/voices.md	hagas casting, grabación, sincronización
references/sound.md	efectos, ambiente, la mezcla
references/checking.md	antes de decir que una escena o la película están terminadas
references/parallel-build.md	se construyan varias escenas al mismo tiempo, o la máquina tenga una GPU débil
example/balloon/CONTRACT.md	siempre, antes de la primera escena