Pip y el brillo perdido: un corto infantil dibujado solo con código

En el jardín de Pip, el agua lleva la luz. Cada tarde baja por un canal de piedra, y cada flor brilla cuando el agua pasa por sus raíces. Una noche el canal se seca y la flor de Pip se apaga. Él y dos amigos nuevos, Bram el escarabajo y Luma la polilla, siguen el canal río arriba para descubrir por qué.

Pip and the Missing Glow («Pip y el brillo perdido») es una animación de papel recortado de 135 segundos para niños y niñas de 6 a 8 años. No tiene imágenes, ni motor 3D, ni dibujos generados con IA. Cada fotograma lo dibujan unas 8.000 líneas de JavaScript sobre un canvas 2D, y el código está en un repositorio que puedes leer, ejecutar y adaptar.

Un fotograma real de la película.

** Mira la película en YouTube ** (2 minutos y 15 segundos, narración en inglés, con subtítulos).

Una regla que se ve

Toda buena historia pequeña empieza con una regla sobre cómo funciona su mundo. Aquí es el agua lleva la luz, y la película la muestra antes de necesitarla. En los primeros segundos el agua llega a la raíz de una flor y su luz sube por el tallo. Cuando después las flores se apagan, quien mira ya sabe qué falta.

El problema es una hoja seca enroscada, atascada en el caño de piedra río arriba, con el tallo sujeto bajo una piedra. Pip lo intenta solo y cae de espaldas. Hacen falta tres fuerzas distintas: Bram empuja la piedra, Luma levanta la punta de la hoja y Pip desenrolla el rizo. La hoja se suelta, el estanque revienta y la luz corre a casa antes que ellos.

Prueba el mismo patrón con tu propia idea: una causa visible, un obstáculo, una solución compartida.

Cómo dibuja el código una película

El motor es pequeño. Una cámara estenopeica mira tarjetas de papel planas colocadas a distintas profundidades; cada tarjeta es una forma con un degradado, una textura de fibra y una sombra suave. El motor las ordena de lejos a cerca, las ilumina, las desenfoca según su distancia al plano de foco y gradúa el fotograma con brillo, viñeta y grano.

Encima trabajan cuatro departamentos, un archivo cada uno: el jardín (`world.js`), los tres títeres recortados y articulados (`cast.js`), el agua, los brillos y las salpicaduras (`fx.js`) y la historia (`shots.js`, con un archivo por acto). La historia convierte el tiempo de la película en un estado compartido: hasta dónde ha llegado el agua, qué flores están encendidas, cuánto está enroscada la hoja. Cada plano lee ese estado y decide la cámara, las poses y la luz.

La regla que lo sostiene todo: cada fotograma es una función pura del tiempo. Sin azar, sin reloj, sin memoria del fotograma anterior. El fotograma 3.000 se ve igual si lo renderizas primero, último o solo. Eso hace posible lo que sigue.

Hecha dirigiendo agentes de programación con IA

Casi nada del código de dibujo se escribió a mano. Lo escribieron agentes de programación con IA trabajando en paralelo, dirigidos como un pequeño estudio de animación dirige sus departamentos:

1. Una sola imagen de referencia para el estilo. Los agentes convergen hacia lo que pueden ver, así que todos imitaron una imagen de un jardín de papel al anochecer visto a la altura de un insecto. La imagen no está en la película; es un objetivo.
2. Un contrato escrito antes de cualquier módulo. Unidades y geografía, el estado compartido, la API de cada módulo y las reglas (sin imágenes, sin azar, sin relojes). Así tres agentes con tres archivos encajan a la primera.
3. Un responsable por archivo, cada uno con su laboratorio. Un laboratorio es una escena de prueba que usa solo el núcleo y un módulo, de modo que el jardín, los títeres y el agua se construyeron a la vez.
4. Revisiones mirando fotogramas, no código. Un segundo agente renderiza imágenes en los momentos que elige y las juzga frente a un corto animado de primer nivel, a tamaño de móvil y sin sonido.
5. Revisiones externas por rondas. Otro modelo revisó cada versión completa. Las notas se corrigieron ronda a ronda y cada ronda se volvió a juzgar.

Las últimas rondas trataron de cosas que solo nota quien mira: el sobresalto de los tres segundos era demasiado rápido y en un móvil se veía doble, y la parte de Pip en el trabajo en equipo tenía que desenrollar la hoja de forma visible. Cada arreglo fue un cambio pequeño, comprobado en los fotogramas exactos que lo mostraban.

Sonido hecho en local

La banda sonora tiene tres pistas. La narración son once frases cortas, cada una dirigida y grabada con un modelo abierto de texto a voz que funciona en local. La música son siete piezas cortas de un modelo abierto de música, una por sección, para que la música gire donde gira la historia. Cada efecto, desde los grillos hasta la hoja que se desenrosca, son unas líneas de código de procesamiento de señal, tan repetibles como la imagen. Un pequeño mezclador lo coloca todo en la línea de tiempo, baja la música bajo la voz y escribe los subtítulos.

Pruébalo

El repositorio incluye la película completa, el mezclador, las instrucciones que dimos a los agentes y una guía del método. Necesitas Node.js 20 o posterior, y FFmpeg para la película completa.

npm install
npx playwright install chromium
python3 -m http.server 8000 -d film

Abre `http://localhost:8000/comp.html?play` para ver la película en el navegador, o `comp.html?t=68` para un solo fotograma. `node film/render.mjs --out out/picture.mp4` renderiza los 4.050 fotogramas a 1920x1080.

Empieza por algo pequeño: cambia un color en `world.js`, renderiza una imagen y mírala. Después prueba un plano propio.

Límites, con honestidad

• Los archivos de narración y música no están en el repositorio. La guía de sonido explica cómo los hicimos, y el mezclador funciona con las grabaciones que tú aportes.
• Renderizar la película completa tarda alrededor de una hora en un portátil rápido; un fotograma suelto, medio segundo.
• La narración está en inglés.

Sigue construyendo

Aviso: el equipo detrás de esta película también crea los productos de abajo. Son opcionales, y el código de ejemplo nunca les envía datos.

• ** ProcVideos ** muestra más videos hechos con código.
• ** Attain OS ** es un espacio de trabajo para briefs, tareas y documentos, útil para planificar una serie.
• ** AttainSoft ** desarrolla software a medida, si quieres tu propio flujo de producción de historias.

Empieza con una frase sobre cómo funciona tu mundo, y luego haz que una pequeña acción la demuestre.