nzl153/paint-video-skill

Cortometraje Animado Dibujado a Mano

El flujo completo: cada fotograma es una función pura de t (segundos), dibujado con pinceles (línea de tinta, relleno plano, acuarela, tramado). Chrome headless renderiza los fotogramas en paralelo como imágenes, y ffmpeg los compila en MP4. La excepción son los fluidos y la arena: tienen estados de simulación entre fotogramas, por lo que solo se pueden renderizar secuencialmente. No hay ni una sola imagen generada por IA en la escena; todo está dibujado con código.

Ocho motores:

Estilo	Motor	Desde dónde empezar
Acuarela, tinta china (tramado para efecto de grabado)	p5.js + p5.brush, velocidad variable según complejidad de la cámara	ClaudeAnimationBase (MIT)
Crayón, libro ilustrado, cómic	Canvas 2D puro, 10–50ms por fotograma	crayon-kit/ de este repositorio, ver crayon.md
Sombras chinesas, siluetas, teatro de sombras	Canvas 2D puro, 2–10ms por fotograma, tambores sintetizados con código	piying-kit/ de este repositorio, ver piying.md
Pelea al estilo tinta china (estilo Montaña de Niebla de las Cinco Líneas)	Canvas 2D puro, 20–100ms por fotograma	inkfight-kit/ de este repositorio, ver wushan.md
Video explicativo (diagramas, subtítulos, narración)	Canvas 2D puro, 60–130ms por fotograma, efectos de sonido sintetizados con código, narración con edge-tts	explainer-kit/ de este repositorio, ver explainer.md
Serie de grabados (serigrafía, aguafuerte, cianotipia, semitonos, etc.)	SVG, ~1s por fotograma, renderizado paralelo en múltiples hilos; música con Tone.js + samples de instrumentos reales	prints-kit/ de este repositorio, ver prints.md, music.md
Tinta fluida abstracta (impulsada por notas musicales)	WebGL2 fluido estable, ~65ms por fotograma, solo renderizado secuencial	fluid-kit/ de este repositorio, ver fluid.md
Arte en arena (caja de luz, un dibujo se funde en el siguiente)	WebGL2 campo de altura, ~90ms por fotograma, solo renderizado secuencial	sand-kit/ de este repositorio, ver sand.md
Garabatos en cuaderno (bolígrafo, lápiz de color, papel fotografiado)	Canvas 2D puro, página completa prerrenderizada como textura, 2–10ms por fotograma	doodle-kit/ de este repositorio, ver doodle.md
Montaje de punto común (relevo de estilos artísticos)	Node + @napi-rs/canvas genera fotogramas directamente, sin navegador	montage-kit/ de este repositorio, ver montage.md

Trabajo de referencia: PDoomVideo, un MV de dos minutos y medio, generado por Claude en Claude Code. Ese repositorio no tiene licencia; solo se puede aprender de él, no usar su código para publicar. ClaudeAnimationBase es la base MIT que el mismo autor organizó después.

Entorno

• Este skill proviene del repositorio paint-video-skill. Los directorios crayon-kit/, piying-kit/, inkfight-kit/, explainer-kit/, prints-kit/, fluid-kit/, sand-kit/, doodle-kit/, montage-kit/, examples/, tools/ están en ese repositorio, no en el directorio del skill; si no se encuentran localmente, preguntar al usuario dónde está clonado el repositorio, o clonarlo de nuevo.
• Node 22.12 o superior, Chrome o Chromium (si no se encuentra, pasar --chrome=<ruta> a render.mjs o establecer CHROME_PATH), ffmpeg en el PATH.
• La herramienta de subtítulos requiere Python 3, numpy y Pillow.
• npm install descarga y ejecuta código de terceros; preguntar antes al usuario. Al iniciar un nuevo proyecto, copiar el directorio de plantilla ya instalado (incluyendo node_modules) para evitar reinstalar cada vez.

Pasos para empezar (acuarela / tinta china)

1. Copiar la base a un nuevo directorio de proyecto, excluyendo out, docs, .git. En Windows: robocopy <base> <nuevo_directorio> /E /XD out docs .git /XJ; el código de salida 1 indica éxito.
2. Leer primero ANIMATION_GUIDE.md en el nuevo directorio. Contiene todas las reglas y API: paint(), inkLine(), cámara, transiciones, todos los parámetros de clawd(); no se repiten aquí.
3. Escribir primero STORYBOARD.md, mostrarlo al usuario, luego escribir el código. El formato sigue la guía: resumen de una frase, mundo y paleta de colores, motivo recurrente, arco emocional, y tabla de momentos clave por toma. Antes de escribir, leer directing.md (manual de dirección: encuadre, eje, punto de corte, ritmo, composición, actuación); escribir la tabla de tomas según su formato, y al final revisarla con su lista de verificación.
4. Modificar la duración y bpm en src/config.js. Las escenas se escriben como nuevos archivos src/scenes/<nombre>.js, envueltos en una IIFE, y al final llaman a shots([...]). En studio.html, reemplazar la línea de demo.js con la nueva escena.
5. Trabajar toma por toma; después de cada una, usar el ciclo de verificación inferior para revisarla.
6. Generar el video: node render.mjs --clip --out=out/video.mp4. Para duraciones largas, usar --frames --workers=4 para renderizado paralelo, luego --encode para componer.

En este repositorio, examples/brush/ contiene dos escenas completas y ejecutables: stars.js ("Recogiendo estrellas", 14.5 s, bpm 90) y ink.js ("Firma", tinta china, 16.8 s, bpm 80). Colocarlas en src/scenes/, reemplazar demo.js en studio.html, y ajustar duración y bpm en config.js con los valores entre paréntesis. Solo usar como referencia de escritura, no copiar la historia.

Dos parches aplicados a la base (dos parámetros de ffmpeg y uno de Chrome en render.mjs):

• Salida con rango TV estándar: reemplazar '-pix_fmt', 'yuv420p' por '-vf', 'scale=out_range=tv,format=yuv420p', '-color_range', 'tv'. De lo contrario, algunos reproductores muestran negro total.
• En portátiles con doble GPU en Windows, añadir --force_high_performance_gpu; de lo contrario, Chrome usa la GPU integrada y se ralentiza. crayon-kit/render.mjs ya incluye ambos parches.

Reglas más importantes

Aplicables a todos los estilos

Los puntos donde los modelos suelen fallar al hacer animaciones:

• El fotograma es una función pura de t: Los fotogramas se renderizan en paralelo y fuera de orden, así que no puede haber estado entre fotogramas. No usar Math.random(); todos los valores aleatorios se calculan a partir del tiempo y el ID del elemento.
• Canvas 2D puro, sin proyección 3D: La profundidad se logra con oclusión, tamaño y temperatura de color.
• No escribir texto: No poner etiquetas, carteles o bocadillos con texto. Expresar todo dibujando, usando emoticonos (!, ?, gotas de sudor, bombilla). La excepción son los subtítulos de canciones en MV: se superponen como una capa separada, según la sección de subtítulos en mv-workflow.md.
• Cada toma debe tener un evento: Mostrar solo una cosa a la vez al espectador; primero la causa, luego la reacción.
• El ritmo es lo que más suele fallar: El espectador solo ve una vez. Dejar tiempo suficiente para cada "momento clave": encontrarlo, entenderlo, y hacer una pausa. Lo rápido es acción, lo lento es significado. La primera versión casi siempre es demasiado rápida.
• Cada unión necesita una transición: Incluyendo el inicio y el final. No cortar directamente ni terminar abruptamente. La transición debe estar relacionada con la historia, no usar la misma siempre. Las escenas de lucha son la excepción: los cortes se hacen directamente en medio de la acción, sin transiciones decorativas (ver wushan.md).
• Los personajes deben ser grandes: En una resolución de 1080p, un personaje en plano medio debe ocupar aproximadamente 1/3–1/2 de la altura de la imagen; un primer plano de la cara debe ocupar más de la mitad. Un tamaño menor a 1/10 solo se usa para planos generales de establecimiento. Los parámetros de tamaño de diferentes motores tienen significados distintos; no mezclar valores.

Específico para p5.brush (acuarela / tinta china)

De ANIMATION_GUIDE.md de la base:

• Para valores aleatorios fijos, usar hash(i); para líneas temblorosas, usar jit(). Al inicio de cada elemento independiente, llamar a boilSeed(key), de lo contrario, un objeto en movimiento hará que todos los objetos estáticos detrás tiemblen.
• Usar solo pinceles: Solo paint() y inkLine(). No usar rect, ellipse, fill() nativos de p5; se verían como Flash de los años 2000.
• Los giros se hacen cambiando entre varios ángulos clave predefinidos (turn()).
• u en clawd(): plano medio 20–28, primer plano 40–70, menor de 12 solo para planos generales.

La API, números aleatorios y tamaños de personajes del motor de crayón son diferentes; ver crayon.md.

Estética por defecto

Cuando el usuario no especifica un estilo, usar el siguiente. Tiende a "papel y tinta": colores cálidos de baja saturación, textura hecha a mano, animación contenida. Si el usuario tiene su propia descripción de estilo, priorizarla.

Paleta de colores: Sobrescribir la paleta al inicio del archivo de escena. La paleta por defecto de la base tiende a ser saturada (azul cielo, púrpura, rosa):

Object.assign(PAL, {
  paper: '#f7f2e6', cream: '#faf7f0', ink: '#2e2a24',
  clay: '#bb5f3c', clayDk: '#8f4428', clayLt: '#d98a6c',
  sky: '#a9bfc4', sap: '#8a9a6a', ochre: '#c9a25a', teal: '#6f9590',
  rose: '#c98a8a', indigo: '#4a5670', night: '#262a38', violet: '#7d6f8f'
});

Con elegir 3–5 colores de ahí es suficiente; no usar todos. La paleta debe tener un arco dramático: por ejemplo, comenzar con colores fríos y oscuros y terminar con cálidos y brillantes.

Textura: La base ya incluye textura de papel y grano; mantenerla. El tramado (hatch) es adecuado para efecto de grabado, pero usarlo solo en sombras y áreas localizadas, no en toda la imagen.

Riqueza no es igual a baratija:

• Puede ser animado: un fotograma puede tener muchas cosas en movimiento; es una toma "actoral".
• No debe ser barato: no llenar el espacio con confeti, estrellas o chispas solo para animarlo. Los efectos especiales deben ser elementos de la historia: estrellas que caen, una lámpara que se enciende.
• Autoverificación: si eliminas este elemento, ¿la imagen pierde significado? Si solo pierde animación, elimínalo.
• Contención no es vacío: El espacio negativo debe tener capas; debe haber entorno, fondo, plano medio y primero, y textura. No solo un gran espacio de color de papel con dos o tres objetos solitarios. Una toma solo muestra una cosa, pero esa cosa debe estar en un mundo que se sienta vivo.

Los trazos deben parecer hechos a mano: Para personajes, está bien usar relleno plano con líneas de tinta según la guía, pero el grosor de la línea no debe ser uniforme en todo el video: variar sw en inkLine(pts, sw, colour, brush) según distancia e importancia, y usar los pinceles 'inkfine' y 'dry' para detalles. Para fondos y entorno, usar acuarela con fill y wash para crear capas de seco y húmedo. Si todo tiene la misma línea negra gruesa y relleno plano, se verá como un collage recortado.

Una restricción invariable: Cada video debe definir un invariante que lo recorra, como la misma posición de composición, la misma forma, la misma pose del personaje, alrededor del cual giren las transiciones y los cortes, y que el final haga eco del inicio.

Música y ritmo: Todo en la base está sincronizado con el bpm. Si no hay banda sonora, usar un bpm lento (80–100) para un ritmo pausado.

Lecciones aprendidas de videos de prueba

"Recogiendo estrellas" (examples/brush/stars.js)

Clawd sostiene un frasco vacío y atrapa estrellas que caen; un frasco de luz estelar calienta lentamente la noche.

• Los emoticonos deben desactivarse manualmente: Las emociones excited, proud de la base generan automáticamente chispas spark alrededor de la cabeza, que son decoración barata. Usar emotions(t, [[0, 'excited', { emote: null }], ...]) para desactivarlas. Los emoticonos significativos como !, ?, corazones pueden mantenerse.
• "Calentar" no significa cambiar todo el cielo a tonos cálidos: Si el fondo de la noche se mezcla con marrón amarillento, toda la imagen se vuelve terrosa y sucia. Mantener el cielo nocturno y solo reducir los colores fríos (mezclando hacia #4b4356), colocando la calidez en el resplandor del horizonte y los objetos brillantes.
• Los objetos deben identificarse de inmediato: El frasco de vidrio sobre un fondo oscuro inicialmente se dibujó en gris, parecía un basurero. Se cambió a vidrio claro ligeramente frío con un brillo para que se reconociera.
• El cierre del diafragma debe hacerse en tres partes: Primero cerrar sobre el sujeto, hacer una pausa, luego cerrar completamente. Si se cierra de una vez, parece un apagón repentino.
• Los brazos de Clawd son muy cortos: No alcanzan objetos por encima de la cabeza; levantarlos parece que los tiene sobre la cabeza. Para "sostener", hay que dibujar la acción de abrazar.
• Velocidad real: 14.5 s, 348 fotogramas, 4 procesos en paralelo ~6 minutos, ~1 s por fotograma (RTX 4060 portátil), codificación ffmpeg 10 s. La hoja de contacto tarda 0.1–1.7 s por fotograma; es barata, ver varias iteraciones.

"Préstamo de rocío" (contraejemplo)

Un caracol lleva una gota de rocío para salvar una plántula sedienta. Se siguieron todas las reglas (sin texto, sin chispas, paleta correcta, personajes sin deformarse), pero el video no funcionó:

• El cambio de estado en la historia debe ser exagerado para que se note de inmediato: La plántula estaba igual de animada al principio y al final; la comparación "agachada por falta de agua → erguida al beber" no se percibía, y todo el video perdió su causa-efecto. Colocar los fotogramas antes y después del estado clave uno al lado del otro; si un ojo inexperto no nota la diferencia, no es suficiente; hay que exagerar.
• El objeto que impulsa la trama debe ser al menos del tamaño de la cabeza del personaje: La gota de rocío era más pequeña que el ojo del caracol y de color tenue; al caer sobre su caparazón, desaparecía. Si el objeto es pequeño, acercar la cámara o añadir brillo y contorno.
• Si el guion gráfico dice que algo se mueve, la imagen debe moverse realmente: El guion decía que el caracol llevaba el agua hasta la raíz, pero el desplazamiento real era mínimo; la mayor parte del tiempo parecía una imagen estática. Revisar cada entrada del guion: "¿quién se mueve de dónde a dónde?".
• La imagen estaba demasiado vacía: Solo había una plántula, un caracol y una hoja. Ver "contención no es vacío" arriba.
• Las transiciones deben tener un motivo: Una franja verde sin relación con la historia barría la pantalla; solo era un corte duro disfrazado.

Autoverificación después de escribir: Colocar el primer y último fotograma de cada toma uno al lado del otro. Si no se puede decir qué cambió en esa toma, no funciona; hay que ampliar el evento.

"Firma", tinta china (examples/brush/ink.js)

• Cambiar de estilo solo requiere cambiar la paleta y la técnica de dibujo; la base no se toca: Todo el video usa solo tres tonos de tinta más el rojo cinabrio de Clawd. "Una pincelada de rojo en un mar de tinta" es una técnica clásica de la pintura china; Clawd es precisamente ese toque de rojo.
• La tinta se expande: Cada punto de la forma se extiende desde el punto de caída de la tinta, en orden de distancia (bloom()); es más realista que un fundido de entrada de toda la forma.
• Capas de tinta china: Primero aplicar una capa base clara; luego, en la cima de la montaña, superponer una capa de tinta oscura que se desvanece hacia abajo; en la base, añadir una niebla del color del papel; las montañas lejanas se mueven más lentamente con el paralaje.
• El mundo se construye junto con el personaje, trazo a trazo: Dondequiera que vaya, allí se dibujan juncos, río y piedras; el evento en sí es dibujar. Esto también asegura que el primer y último fotograma de cada toma tengan un cambio evidente.
• La restricción de composición también debe considerar el destino: Para que el personaje pueda ver el camino por delante, debe estar en el lado posterior de la dirección de movimiento; al final, naturalmente termina en esa esquina de la imagen.

Segundo estilo: Crayón / libro ilustrado

Cuando el usuario quiera un estilo infantil, de libro ilustrado, crayón, cómic, o simplemente no quiera acuarela, leer crayon.md en el mismo directorio. Este estilo no usa p5.brush; es un motor propio de crayón en canvas 2D (crayon-kit/), un orden de magnitud más rápido que la acuarela. Contiene: principios del motor y API, parámetros de personajes, transformaciones visuales y técnicas de viñetas, subtítulos con crayón, y cómo usar sondas para que los subtítulos no cubran a los personajes.

Tercer estilo: Sombras chinesas

Cuando el usuario quiera sombras chinesas, siluetas, teatro de sombras, o un corto sin canción solo con tambores, leer piying.md en el mismo directorio. El motor está en piying-kit/: cada pieza de sombra se talla por separado con recortes y luego se multiplica sobre la pantalla translúcida; los personajes son marionetas articuladas con palancas; los puntos de tambor se sintetizan con numpy. Contiene: principios del motor y API, parámetros de personajes, cómo sincronizar acciones con los tambores, espejos de posición de cámara, contorno de siluetas, y el sintetizador.

Cuarto estilo: Pelea con tinta china (estilo Montaña de Niebla de las Cinco Líneas)

Cuando el usuario quiera peleas, artes marciales, acción, o mencione explícitamente Montaña de Niebla de las Cinco Líneas o tinta china de color, leer wushan.md en el mismo directorio. El motor está en inkfight-kit/: los personajes se dibujan con líneas de pincel de tinta más relleno plano y sombras; los movimientos siguen curvas suaves a través de fotogramas clave; los pies se mueven por separado según los puntos de apoyo; los fotogramas de impacto usan inversión de color y rojo cinabrio; finalmente, la tinta de fuego explota en toda la pantalla. Contiene: API del motor y del cuerpo humano, cómo coreografiar una pelea (primero definir los puntos de contacto, luego deducir las posiciones, usando probe.mjs para obtener números), disposición de tomas, y errores cometidos.

Quinto estilo: Video explicativo

Cuando el usuario quiera un video educativo, explicar un descubrimiento o principio, leer explainer.md en el mismo directorio. La base es explainer-kit/ ("Usando la luz, abre el cerebro", Premio Nobel de Optogenética 2026, 3:05). Cada sección usa un estilo artístico diferente; se permiten subtítulos, capítulos y anotaciones gráficas; la imagen, los efectos de sonido y la narración comparten un mismo timeline.js; si la narración es más larga que la imagen, se alarga esa sección según la duración de las frases.

Sexto estilo: Serie de grabados

Cuando el usuario quiera una textura material, un estilo no plano y minimalista, o mencione grabado, serigrafía, aguafuerte, cianotipia, semitonos, leer prints.md en el mismo directorio. La base es prints-kit/ ("Luz lejana", 93 s, seis etapas del viaje de una semilla de diente de león). Contiene:

• El horizonte y la fuente de luz permanecen fijos durante las seis etapas; la técnica cambia en cada una.
• Las seis técnicas y sus respectivas implementaciones en SVG.
• Cómo usar números aleatorios fijos para evitar parpadeos al redibujar fotograma a fotograma.
• Tres elementos para que la imagen "cuente": el protagonista y su compañero, la hora del día, y etiquetas a lápiz.
• Cinco métodos de transición de impresión.
• Renderizado paralelo en múltiples hilos (cada hilo consume unos 2–3 GB de RAM; por defecto 4 hilos).

Séptimo estilo: MV de tinta fluida (impulsado por notas musicales)

Cuando se quiera una imagen en movimiento constante, sin una historia concreta, que cambie al ritmo de la música, leer fluid.md en el mismo directorio. La base es fluid-kit/ ("Una gota de tinta", 91 s, clásica + rock). Fluido estable en WebGL2: los pigmentos se superponen según la absorbancia; se exporta una tabla de notas de la partitura, cada instrumento tiene un estilo de dibujo fijo (violín = pincel, bombo = impacto, platillo = floración); cada sección es un "comportamiento acuático" diferente; la floración del clímax tiene 7 tipos de explosión que se alternan. No se dibujan personas, no hay tomas de cámara; los fotogramas solo se pueden renderizar secuencialmente.

Octavo estilo: Arte en arena (caja de luz, un dibujo se funde en el siguiente)

Para contar una historia corta sin dibujar personas, pero con una imagen en constante cambio que no parezca un PPT dinámico, leer sand.md en el mismo directorio. La base es sand-kit/ ("Reloj de arena", 75 s, un año visto por un grano de arena, nueve imágenes conectadas). Campo de altura en WebGL2 simulando arena: esparcir, trazar con el dedo, empujar con la palma, ángulo de reposo, cortina de arena, alisar, resplandor triangular, abrir la luna; la luz de fondo se transmite por tres canales, las partes finas se ven grano a grano. La regla es que la luz es la protagonista, las transiciones se basan en formas que se conectan, y hay espacio negativo. Primero se define la imagen, luego se escribe la música, 60 pulsaciones por minuto, un pulso = un segundo. Los fotogramas solo se pueden renderizar secuencialmente.

Noveno estilo: Garabatos en cuaderno (bolígrafo + lápiz de color + papel fotografiado)

Para una sensación de "papel", "cuaderno", "dibujos en clase", con un protagonista que es una criatura de garabato que cobra vida, leer doodle.md en el mismo directorio. La base es doodle-kit/ ("Margen", 38 s, una bolita en el margen da una vuelta mientras el bolígrafo no está). La línea del bolígrafo se corta, el lápiz de color es tramado diagonal con textura de diente de papel; la página completa tiene luz de fotografía; un bolígrafo real con sombra le da realismo fotográfico. Las cosas vivas tiemblan en sus líneas; cuando se detienen, vuelven a ser dibujo. Plano secuencia; la música sigue la acción. La segunda mitad también documenta la experiencia de usar este estilo para un MV de canción completa: no dibujar personas, usar dos bolígrafos y un cuaderno deslizante para interpretar a dos personas.

Décimo estilo: Montaje de punto común (la misma forma cae en el mismo punto)

Para un montaje rápido de muchas imágenes inconexas que terminan en un frenazo, donde cada corte hace que la misma forma caiga en el mismo punto de la imagen, leer montage.md en el mismo directorio. La base es montage-kit/ ("Un bocado", 25.8 s): una rosquilla llena la pantalla; en el agujero, un vaquero galopa; en cada pulso, el agujero cambia de estilo artístico; el borde exterior se une un pulso después; 24 estilos en relevo; al final, un mordisco. La animación continua se basa en un esqueleto compartido de nivel anatómico; cada estilo solo se preocupa por cómo dibujar. Otra variante, "un corte, un mundo", también está documentada allí.

Cómo componer música propia

Cuando no haya una canción existente y se necesite música para el cortometraje, leer music.md en el mismo directorio. Usar Tone.js con samples de instrumentos reales, sin sonidos sintetizados. Contiene: reglas de arreglo, cómo eliminar el sonido mecánico, trampas con la notación de octavas de los samples de orquesta VSCO2, cómo alinear el volumen después de cambiar de fuente de sonido, caché local de samples, exportación offline con Chrome headless con normalización de sonido de dos pasadas, y cómo usar el "pulso" para alinear imagen y música. Las canciones de estilo clásico + rock tienen una sección adicional: batería real con múltiples intensidades (DRSKit), guitarra distorsionada, exportación por pistas, y una mesa de mezclas propia en Python (ecualización, compresión, saturación, reverberación de convolución, alineación de volumen por secciones, limitación).

Ciclo de verificación (cada toma, no saltarse)

Solo leer el código no muestra el resultado de la animación; hay que renderizarlo para verlo:

node render.mjs --sheet=0.1,0.8,1.6,2.4 --cols=4 --w=480 --out=out/check/sheet.jpg        # Hoja de contacto: primer, medio y último fotograma de cada toma
node render.mjs --strip=2.1:2.6 --cols=6 --w=320 --out=out/check/strip.jpg               # Fotogramas consecutivos: giros, saltos, transiciones
node render.mjs --sheet=2.3 --crop=760,420,500,400 --w=500 --out=out/check/face.jpg     # Ampliación local: expresiones, manos, puntos de contacto

Si todos los ms/frame de la hoja de contacto son 0, significa que la página no dibujó nada (probablemente un error de sintaxis en el archivo de escena); revisar primero [page error] en la terminal.

Abrir con un visor de imágenes y revisar punto por punto:

• ¿Se entiende el evento? ¿El personaje es lo suficientemente grande y contrasta con el fondo?
• ¿Hay fotogramas con teletransportación o cambios bruscos?
• Cuerpo y soportes: al sentarse, pararse, apoyarse en algo, debe haber transición de levantamiento de pierna, flexión de rodilla, asentamiento. El cuerpo no puede deslizarse hacia el objeto ni superponerse a él.
• Longitud de las extremidades constante: al estirar la mano para alcanzar algo, el brazo no debe alargarse; si no alcanza, que el personaje se acerque o se agache.
• Los objetos que se agitan o giran no deben atravesar objetos del escenario.
• ¿Las acciones tienen preparación y seguimiento? ¿Se mueven simétricamente a izquierda y derecha al mismo tiempo?
• ¿Hay transición en las uniones?
• ¿Hay texto?
• ¿Los colores se ven sucios? (El amarillo sobre azul se vuelve verde; los brillos deben usar glow()).
• ¿La paleta mantiene el tono definido?

Rendimiento y errores conocidos (p5.brush)

• La reanudación solo verifica si el archivo de fotograma existe: Si se modifica el código y se ejecuta --frames, los fotogramas existentes se conservan sin cambios, lo que mezcla imágenes antiguas en el video final, y no da error. El render.mjs de la base se comporta así; después de modificar el código, mover primero el directorio out/frames (no borrarlo) antes de renderizar. El render.mjs de crayon-kit firma los fotogramas con una firma de código; si el código cambia, se detiene y permite elegir --force (los fotogramas antiguos se mueven a out/frames_old_*) o --keep-frames (si ya se movieron manualmente los fotogramas modificados).
• Errores de página: El render.mjs de crayon-kit falla y sale si la página reporta un error; el de la base solo imprime una línea [page error] y continúa generando imágenes; hay que estar atento.
• La hoja de contacto muestra el tiempo por fotograma; el objetivo es ≤1.5 s/fotograma. La acuarela fill es lo más costoso: para formas grandes, usar wash; usar fill con moderación y con pocos vértices.
• Con GPU dedicada, aproximadamente 1 s por fotograma. Si se vuelve significativamente lento, usar node gpu_probe.mjs <ruta de chrome> para ver en qué GPU está Chrome.
• studio.html carga la fuente Permanent Marker desde Google Fonts; solo se usa con letter(). Si el video no tiene texto, eliminar esa línea <link> para evitar que se bloquee si no hay conexión.
• Cuando aparecen NaN en las coordenadas, el mensaje de error es Failed to construct 'OffscreenCanvas', y la pila apunta al código de la escena, no al NaN. Hay que revisar los cálculos geométricos.
• Cuando la cámara se acerca más de 2x, las líneas muy largas lejos del origen pueden colapsarse en un punto. Las líneas muy largas deben dibujarse en segmentos con inkLine.
• Ocasionalmente, 5 advertencias WebGL: INVALID_OPERATION son inofensivas; otros errores de página son reales.
• Las formas grandes solo con fill son casi transparentes: Las montañas lejanas, el agua, con miles de píxeles de ancho, apenas se ven si solo se usa fill. Primero aplicar una capa base con wash (washOp: 255, color más claro), luego superponer una capa de fill para difuminado y bordes.
• inkLine con solo dos puntos no dibuja nada y no da error: Incluso las líneas rectas necesitan 3 puntos o más, preferiblemente con algo de ondulación para parecer hechas a mano. Las ondas, marcas de agua y líneas cortas en el suelo son las que más sufren este problema.
• No dibujar la misma forma en segmentos: Si la sombra de la cima de una montaña se dibuja en varios segmentos, aparecen costuras verticales en las superposiciones. Dibujar toda la forma de una sola vez; para las ondulaciones de los bordes, usar hash(i).
• Al segmentar inkLine, verificar el número de puntos del último segmento: Al cortar, puede que solo quede 1 punto, lo que produce el error spline() requires at least 2 points.

Largometraje o MV

Leer primero mv-workflow.md en el mismo directorio: Análisis musical, tabla de tomas impulsada por el compás, biblioteca de piezas, trabajo por lotes, renderizado por secciones, retoques localizados, corrección de color final, subtítulos de canciones.

Otra opción: que el agente principal escriba el guion gráfico y la descripción del estilo, y luego divida por secciones entre múltiples subagentes, cada uno modificando su propio archivo de sección. Si el usuario no lo pide, una sola persona hace todo de principio a fin; el video queda más cohesionado.

Para sincronización de letras y análisis de ritmo de audio, también se puede consultar paint-mv-skills (MIT, chino).

Entrega

• El entregable es out/video.mp4, acompañado de una captura de pantalla de la hoja de contacto.
• En el informe, decir tres cosas: duración total, tiempo promedio por fotograma, y qué se encontró y corrigió durante la verificación. Las partes no revisadas deben declararse explícitamente como no revisadas.