code-film

Películas dibujadas con código

Este skill crea una página HTML que dibuja el fotograma f a partir de (f, seed), una banda sonora calculada de la misma manera y un MP4. De qué trata la película, cómo se ve y cómo se mueve es decisión tuya. El skill se basa en tres pilares: la intención que escribes primero, el criterio con el que juzgas y las comprobaciones que determinan si la película terminada cumplió con lo que decía la intención.

Configuración

Ejecuta bash assets/doctor.sh una vez en una máquina nueva. Comprueba que tengas Chrome (o una ruta CHROME), Node 22 o superior, ffmpeg y Python 3 con numpy y Pillow, e indica cómo solucionar cualquier cosa que falte.

1. Escribe la intención

Copia assets/intent.md junto a la página como piece.intent.md. Completa primero la conclusión y la sensación: qué puede decir un espectador después de verla una vez y qué siente cuando termina. Deja el resto hasta que se elija un boceto, porque una tarjeta escrita primero fija la idea, y los bocetos solo pueden cambiar su apariencia. Así es como los tres bocetos de la película del libro de contabilidad se convirtieron en una sola idea con tres pieles.

Una vez elegido un boceto, termina la tarjeta. Sus líneas Juzgadas dicen qué seguimos, el punto que solo este tema podría dar, la apariencia y por qué, si aparece texto y cómo, las películas de la galería de las que aprende y cómo el final responde al inicio. Sus líneas Medidas dan la duración, el ritmo, el sonido y el compás. Cada decisión posterior sirve a esta tarjeta. Cuando el trabajo muestre que la tarjeta estaba equivocada, cámbiala y dilo.

2. Juzga con la galería

reference/gallery.md contiene 29 películas en las que Claude dibujó cada fotograma con código, abarcando música, explicaciones, historias y experimentos, y lo que comparten las que gustaron:

• Hay algo que seguir a lo largo de cada escena.
• Cada imagen dice algo. Ninguna está solo por variedad.
• Termina donde empezó, pero transformado.
• Algo muestra dónde estamos: un indicador, un contador, un reloj.
• La apariencia es un material real, usado con sus imperfecciones, elegido para esta historia.
• El sonido y la imagen son una sola pieza.
• El texto es escaso, grande y parte del mundo.
• Tiene un punto de vista y algo de calidez.
• Es tan corto como la idea.

Estos son juicios, no reglas. Rompe uno cuando la tarjeta diga por qué. reference/taste.md contiene las correcciones que Kartik, el autor del skill, hizo mientras se construía: un gusto inicial, no el tuyo. Donde ellos y la galería discrepen, dilo y pregúntale a la persona para quien es la película.

3. Verifica el resultado

Informa las tres capas en la nota de entrega.

• Los defectos bloquean la construcción. La página se analiza, se ejecuta y dibuja el mismo fotograma cada vez. Ningún fotograma parpadea o aparece de golpe en un corte. La mezcla se sitúa entre -28 y -8 dBFS y no se recorta. check.py, seamcheck.py, verify.py y build.sh lo exigen.
• La intención se mide. python3 assets/verify.py piece.mp4 comprueba las líneas Medidas de la tarjeta. Un fallo significa que la película o la tarjeta están mal. Arregla una y di cuál.
• La prueba de visualización es tuya. cada-fila-dos-veces pasó todos los números y seguía siendo mala. Responde las cinco preguntas que imprime verify.py: cuéntalo como un recién llegado, nombra cada viñeta, míralo sin sonido, míralo junto a su película de la galería, juzga el último fotograma.

lookcheck.py y soundcheck.py nunca bloquean. Describen el ritmo, el color, la sincronía y el compás, y los lees comparándolos con la tarjeta.

Flujo de trabajo

Cada paso tiene una línea de informe, por lo que no se puede marcar sin decir cómo.

0. Si compartieron una referencia, desmóntala primero. Vale un clip, una imagen fija o una página HTML. Lee reference/references.md. Informa qué forma tiene, qué hace, qué brechas se pueden cerrar y qué tomas y qué dejas.
1. Escribe la conclusión y la sensación. Solo esas dos líneas. Infórmalas.
2. Mira las dos o tres películas más cercanas de la galería enteras. Informa qué tomas de cada una y qué no copiarás.
3. Boceta tres historias diferentes como imágenes fijas. Cada una es una cosa diferente que sucede, contada en una línea, no la misma idea con tres apariencias. Al menos una debe ser un mundo en el que el espectador pudiera vivir, no un diagrama. Dibuja cada una con la apariencia final, con el motor y el acabado de impresión, nunca como un wireframe. Un boceto se salta las comprobaciones de defectos, no el arte. assets/sketchcheck.py rechaza uno plano y una copia cuando le das los fotogramas aprobados con --refs. Enséñaselo a la persona para quien es y deja que elija o mezcle. Informa la línea de cada historia. Luego termina la tarjeta.
4. Escribe las palabras, si las hay. Un párrafo con una sola voz, antes de cualquier código, guardado como piece.chain.txt. Lee "Palabras que suenan a voz" en reference/story.md. Informa el párrafo y su ratio de conectividad.
5. Planifícalo. Los compases en orden, qué significa cada imagen en una línea, qué muestra dónde estamos y el final. Informa el plan. Es un plan, no un contrato.
6. Construye la página. Empieza desde assets/engine.html o escribe tu propia página siguiendo el contrato de abajo. Comprueba cada escena por separado antes de unirlas. Informa qué redibujaste después de mirar.
7. Crea el sonido. Escribe la melodía primero, en TUNE y SECTIONS, luego los cuatro a ocho acentos para los giros de la historia. O trae tu propio piece.score.py, un piece.wav que haga la página, o silencio. Informa la hoja de melodía que imprime score.py y por qué el sonido encaja con la tarjeta.
8. Construye. assets/build.sh piece.html out.mp4. Pon ROUGH=1 delante para hacer un borrador que enseñar pronto. Informa los números.
9. Verifica. Las tres capas. Informa cada una.
10. Entrega como un archivo nuevo. Nunca sobrescribas la última construcción.

Dos apariencias en una película

Una película puede cortar entre dos renderizadores, como escenas de risografía y un libro de contabilidad de tinta. Dale al segundo su propio ámbito, dibuja sus actos con la opción de placa { raw: (ctx, u, f, size) => {} } y pon sus cortes en EXTRA_CUTS. assets/examples/parcel42-day/ hace exactamente esto. También es el ejemplo canónico trabajado de todo el flujo de trabajo, así que lee su README, y léelo para el método, nunca para la apariencia.

El contrato de la página

Cualquier página que cumpla esto se construye y verifica. Establece const FPS = n. En ?capture=1 establece window.__frames en el número de fotogramas y window.__render(f) para dibujar el fotograma f siempre de la misma manera, luego establece su título como capture ready N. Su primera línea de script escribe cualquier error en document.title, para que un fallo no parezca una página en blanco.

Las páginas construidas sobre el motor también obtienen ?play=1, ?f=N, ?grid=1, ?scene=id y ?cuts=1, y score.py lee sus actos de plate().

Los archivos

archivo	qué es
assets/intent.md	la plantilla de la tarjeta de intención
assets/engine.html	un inicio opcional: cuadrícula de fotogramas, actos y tomas, biblioteca de escenas, movimientos, una prensa de risografía, el bolígrafo de escritura a mano, tres mundos de demostración
assets/score.py	la partitura calculada sobre la cuadrícula de compás de la página, con tonalidad, armonía, kit, swing y final por pieza
assets/build.sh	puerta, captura, costuras, partitura, codificación, medición, verificación, en un solo comando
assets/verify.py	la película contra su tarjeta de intención, más sonoridad y recorte, luego las preguntas de la prueba de visualización
assets/check.py	la puerta de la página: análisis, manejador de errores, modos, cuadrícula, renderizado
assets/seamcheck.py	parpadeos, cortes bruscos, tirones dentro de un movimiento, un anclaje fijo que se desvía
assets/sketchcheck.py	los bocetos de historia: no planos, no copia de fotogramas aprobados (--refs), ningún mundo prohibido (--world), ningún fragmento dejado
assets/lookcheck.py, assets/soundcheck.py	mediciones de la imagen y el sonido, leídas contra la tarjeta y la galería
assets/printcheck.py	comprueba si un fotograma parece impreso o computado, contra una imagen de referencia. Recorta al centro un fotograma ancho a un cuadrado
assets/refpage.mjs	desmonta una referencia que es una página HTML: su paleta, marcas, capas y kit de audio mientras las dibuja, más un MP4 para que las comprobaciones de clips funcionen en ella
assets/capture.mjs	captura de fotogramas a través de CDP. build.sh lo llama
assets/capture-range.mjs, assets/capture-par.sh	captura a cualquier ancho y alto, en varios Chromes a la vez. Para 16:9 y cualquier cosa que supere un minuto
assets/doctor.sh	comprueba si esta máquina está lista: Chrome, Node 22+, ffmpeg, numpy, Pillow
assets/examples/parcel42-day/	el código fuente de la película aprobada, con un README sobre cómo se construyó
assets/example-print-still.html	el modelo de acabado de risografía

Cuándo leer qué

Lee cada archivo entero, con una llamada por archivo. Una ejecución de Codex leía tres o cuatro archivos del skill por llamada bajo un límite de salida. Perdía unos 13k tokens del medio de esas lecturas sin darse cuenta, incluida la mitad de gallery.md. Si una lectura dice que los tokens se truncaron, vuelve a leer ese archivo solo.

• Antes de la tarjeta de intención y antes de mostrar nada, lee reference/gallery.md. Luego reference/taste.md.
• Cuando compartan un clip de referencia, imagen fija o página HTML, lee reference/references.md.
• Cuando planifiques la historia o escribas subtítulos, lee reference/story.md.
• Cuando la imagen y el sonido compartan una cuadrícula de compás, lee reference/time.md.
• Cuando planifiques transiciones o la cámara, lee reference/moves.md.
• Cuando la apariencia sea risografía o cualquier impresión, lee reference/press.md, luego reference/surface.md antes de ajustar la textura.
• Cuando añadas escritura a mano, lee reference/hand.md.
• Cuando hagas el sonido, lee reference/sound.md.
• Cuando construyas, lee reference/export.md.
• Cuando la película supere un minuto, lee el final de reference/export.md.
• Cuando la película sea una lección narrada para YouTube, usa el skill lesson-film, que se basa en este.
• Las trampas, todas las formas en que esto se ha roto hasta ahora, como listas de verificación por fase. Antes de la tarjeta y los bocetos, y antes de mostrar nada, reference/traps-story.md. Antes de construir la página, reference/traps-page.md. Cuando planifiques movimientos, la cámara o la cuadrícula de compás, reference/traps-motion.md. Cuando la apariencia sea impresa, reference/traps-print.md. Cuando hagas el sonido, reference/traps-sound.md. Antes de la primera construcción completa, reference/traps-build.md.

Cómo modificar este skill

Declara la intención y el juicio, y comprueba el resultado contra la intención. Nunca conviertas el estilo de una película en una regla: así es como cada pieza se convirtió en una copia de una referencia. Una lección va en el único archivo que la posee, y cada otro archivo apunta allí en una línea. Una nueva película que alguien apruebe va en la sección Nuestra de la galería, con por qué funciona.

Tomado prestado, con agradecimiento

El modelo de relleno plano más acabado recortado, y la forma de wob, crayon, hatch, grain, dotScreen y scribble, provienen del skill hand-drawn-canvas-animation de alesha-pro (MIT, github.com/alesha-pro/tools). Su regla de que la textura es un acabado más que un degradado, y que el relleno de una forma y su contorno nunca deben coincidir, es lo que desbloqueó la apariencia de impresión de este skill.

Cómo es algo bueno

Un recién llegado lo ve una vez y lo vuelve a contar, y el relato coincide con la línea de conclusión. Cada viñeta de la hoja de contactos es una imagen de algo que significa algo. Podría colocarse junto a las películas de la galería sin ser una copia de ninguna. El último fotograma lo termina. Los defectos son cero, la tarjeta coincide y lo has visto de todos modos.