Chismes del Lince 59: cuaderno de animación

El Lince de la Noche volvió a la cueva con el teléfono lleno de vídeos de meteoros y se encontró con un suelo cubierto de papeles. Podemos hacer un cuaderno de animacion.

Había dibujos por todas partes. Una pelota roja en cada hoja, cada una un poco más arriba que la anterior.

La Gata Montesa estaba en medio, con un lápiz entre los dientes y manchas de tinta en las patas.

—¿Qué es todo esto?

—Una película —dijo ella sin levantar la cabeza—. De doce fotogramas.

—¿Doce dibujos de una pelota?

—Doce dibujos de una pelota que bota. Cuando los pases rápido, se moverá.

El Lince cogió una hoja, luego otra, y las movió delante de la cara. Parpadearon.

—No pasa nada.

—Tienes que pasarlas bien. Siempre a la misma velocidad y en orden. Para eso está el ordenador.

—Esto es cosa de artistas —refunfuñó el Lince—. Yo trabajo con datos.

La Gata levantó por fin los ojos.

—Esto son datos. Cada dibujo es una imagen, y doce imágenes ordenadas son un vídeo. El mismo que acabas de analizar con tus meteoros, solo que hecho a mano.

El Lince dejó de mover las hojas.

—¿Entonces puedo aplicar a tu pelota lo mismo que a mis estrellas?

—Puedes hacerle una estela, quitarle el fondo o buscar qué se mueve —sonrió la Gata, y le tendió el lápiz—. Pero primero tendrás que dibujar tú.

Introducción

En este chisme tienes un cuaderno de animación en el navegador. Dibujas una animación fotograma a fotograma, con papel cebolla para ver el dibujo anterior, y la reproduces a la velocidad que quieras.

Luego hacemos lo que no se puede hacer con un cuaderno de papel: tratar tu animación como un vídeo. Le calculas la media, la estela del movimiento o la diferencia entre fotogramas.

No hace falta saber dibujar. Si no te atreves, hay dos ejemplos listos: una pelota que bota y una estrella fugaz.

Por qué un cuaderno de animación

En el chisme 58 vimos que un vídeo es una lista de imágenes. Aquí lo comprobamos desde el otro lado: si una animación es una lista de imágenes, puedes fabricarla tú.

Así se entiende de verdad qué es un vídeo. Y también el cine, los dibujos animados y los GIF.

Es el siguiente paso después del filtro de imágenes del chisme 56. Allí tratamos un fotograma como una matriz de píxeles. Aquí ponemos esos fotogramas en fila y los hacemos moverse.

Cómo funciona el cuaderno de animación

Tres ideas bastan para entenderlo.

1. Una animación es una lista de imágenes. Cada dibujo es un fotograma. Los fotogramas van en orden: el 1, el 2, el 3… En el programa es un array, igual que el vídeo del chisme 58.

2. Los fotogramas por segundo mandan sobre el tiempo. Reproducir es enseñar una imagen detrás de otra, esperando un rato entre ellas. Lo que dura la animación sale de una división:

duración = fotogramas / (fotogramas por segundo)

Con 8 fotogramas a 8 f/s dura 1 segundo. Con 12 fotogramas a 6 f/s, 2 segundos. El cine usa 24 f/s, y por eso necesita mucho dibujo: un minuto son 1440 fotogramas.

3. El papel cebolla enseña de dónde viene el movimiento. Para que una pelota bote, cada dibujo debe ser un poquito distinto del anterior. Si no ves el anterior, no sabes cuánto moverla.

El cuaderno lo dibuja por debajo en rojo y transparente. Si activas «el siguiente», verás también el de después en azul.

Dos maneras de hacer un fotograma

La pelota y la estrella fugaz de los ejemplos no están dibujadas a mano. Cada fotograma sale de una fórmula: la posición de la pelota depende del número de fotograma.

Tienes, pues, dos caminos. Dibujar a mano, que da libertad. O calcular el fotograma con una fórmula, que da precisión. Es lo mismo que pasaba en el chisme 54, donde el programa dibujaba por ti y aquí dibujas tú.

El cuaderno de animación de la Gata

Aquí está el cuaderno. Si no se ve bien dentro de la entrada, ábrelo en una página aparte.

Primer paso: mira un ejemplo

1. Pulsa Pelota que bota. A la derecha verás la animación en marcha.
2. Cambia la velocidad. ¿A cuántos f/s parece una pelota de verdad? ¿Y a cuántos se ve a saltos?
3. Pulsa un fotograma de la tira para verlo en el lienzo. Con el papel cebolla verás el anterior en rojo.
4. Marca Ida y vuelta. La pelota va y vuelve en lugar de saltar del último fotograma al primero.

Segundo paso: dibuja la tuya

1. Pulsa Cuaderno en blanco. Tienes 8 fotogramas vacíos.
2. Dibuja algo sencillo en el 1: una cara, un cohete, un círculo.
3. Pulsa el fotograma 2 y dibuja lo mismo, un poquito movido. El papel cebolla te dice dónde estaba.
4. Repite hasta el 8. Si te hacen falta más, usa + Fotograma nuevo (hasta 12).
5. Si un fotograma se parece mucho al anterior, usa Duplicar este y cámbiale solo lo que se mueve.
6. Pulsa Reproducir y ajusta los f/s.

Tercer paso: guárdala

• Descargar GIF animado: un archivo que puedes enviar o poner en una web.
• Guardar cuaderno: un archivo para abrir otro día y seguir dibujando. El cuaderno no se guarda solo.

Todo ocurre en tu navegador. Nada de lo que dibujas se sube a ningún servidor.

Trata tu animación como un vídeo

La tercera parte del cuaderno aplica a tus fotogramas las mismas operaciones del detector de meteoros. Prueba cada una con la pelota que bota.

Operación	Qué hace con cada píxel	Qué verás en la pelota
Media	Promedia todos los fotogramas	Una pelota fantasma en cada posición, más oscura donde pasa más tiempo
Mínimo (estela)	Se queda con lo más oscuro	Todas las posiciones nítidas a la vez, como una cronofotografía
Mediana	Se queda con el valor central	La pelota desaparece y queda el suelo
Diferencia	Resta el fotograma anterior	Se oscurece lo que se ha movido

La estela es una vieja técnica. Marey y Muybridge la usaban hace más de cien años para estudiar el movimiento; hoy se llama cronofotografía.

Un truco con la mediana

Dibuja en cada fotograma el mismo fondo (una casa, un árbol, una línea de suelo) y un personaje que se mueve. Calcula la Mediana.

El personaje está en cada sitio solo unos pocos fotogramas, así que no es el valor central de ningún píxel. El fondo está en todos. Resultado: el fondo limpio, sin personaje.

Es el mismo principio por el que el detector de meteoros ignoraba las estrellas fijas y marcaba lo que aparecía de golpe.

Y con la estrella fugaz

Carga el ejemplo Estrella fugaz y compara. Con la Diferencia, se marca en oscuro dónde estaba la estrella y dónde está ahora. Con la Mediana, desaparece y queda el cielo. Con el Mínimo, que busca lo más oscuro, apenas ocurre nada, porque la estela es clara sobre fondo oscuro. ¿Qué operación del chisme 58 haría aquí lo que el mínimo hace con la pelota?

Qué estamos midiendo realmente

Un cuaderno de animación parece solo un juego, pero esconde ideas de ciencia.

El movimiento es una ilusión. Una animación no se mueve: son imágenes fijas que cambian. Nuestro cerebro las une a partir de cierta velocidad. Cuál es esa velocidad depende de la persona y de la imagen, así que no hay un número mágico. Experiméntalo con el control de f/s.

Muestrear es perder información. Si la pelota se mueve mucho entre un fotograma y el siguiente, el cerebro no sabe por dónde ha ido. Es el mismo problema que con el muestreo del osciloscopio: pocos fotogramas, movimiento a saltos.

Cada operación responde a una pregunta. La media dice cuánto tiempo está algo en cada sitio. El mínimo dice por dónde ha pasado. La mediana dice qué es fijo. La diferencia dice qué cambia. Elegir mal la operación da un resultado inútil, aunque el programa funcione.

El resultado depende de cómo dibujas. Si el fondo cambia un poco de un fotograma a otro (porque lo has dibujado a mano), la mediana no lo recupera del todo y la diferencia marca zonas donde no hay movimiento. Es el mismo problema de las falsas alarmas del detector de meteoros.

El GIF no es un vídeo. Guarda cada fotograma entero con una paleta de solo 216 colores. Pesa más que un vídeo comprimido y los bordes se ven algo más duros. Es una limitación de la técnica, no del dibujo.

Sigue valiendo la regla de la serie: medir no es medir bien. Y aquí, además, un resultado bonito no prueba que la operación fuera la adecuada.

Para el aula

Preguntas para trabajar en clase:

• Con 8 fotogramas a 8 f/s, ¿cuánto dura la animación? ¿Y con 12 a 6 f/s? Comprueba tu cálculo con el cronómetro.
• Dibuja una cara que parpadea con 4 fotogramas y pruébala a 2, 6 y 24 f/s. ¿A partir de cuántos parece natural?
• En la pelota que bota, ¿cuántos fotogramas tardas en un bote? ¿Cómo cambiaría el movimiento con la mitad de fotogramas?
• La Media de la pelota, ¿por qué es más oscura donde está en el suelo? Relaciónalo con el tiempo que pasa en cada sitio.
• Dibuja un personaje que camina sobre un fondo fijo y calcula la Mediana. ¿Sale el fondo limpio? ¿Qué defectos tiene si has dibujado el fondo a mano?
• Con la Diferencia, ¿qué zonas se marcan en un fotograma donde casi nada se mueve?
• Haz una animación de 10 fotogramas de una estrella fugaz y compárala con el vídeo real del detector del chisme 58. ¿En qué se parecen y en qué no?

Una secuencia posible de dos sesiones:

1. Sesión 1: ejemplos y primer dibujo. Cada alumno hace una animación de 8 fotogramas y descarga su GIF.
2. Sesión 2: tratamiento. Aplican las cuatro operaciones y escriben qué ha cambiado y por qué.

Retos

• Reto 1. Haz que funcione: reproduce la pelota que bota y cambia la velocidad.
• Reto 2. Modifícala: dibuja encima de la pelota para que gire o cambie de color.
• Reto 3. Haz una animación propia de 8 fotogramas y descarga el GIF.
• Reto 4. Amplía a 12 fotogramas y compara con la de 8: ¿qué se gana y qué se pierde?
• Reto 5. Calcula la estela de tu animación y guárdala como PNG.
• Reto 6. Dibuja un fondo fijo con un personaje en movimiento y recupera el fondo con la Mediana.
• Reto 7. Haz una animación con el papel cebolla del siguiente activado. ¿Es más fácil o más difícil?
• Reto 8. Conviértelo en investigación: mide cuántos f/s necesitas para que tu clase vea movimiento continuo en tres animaciones distintas y anota los resultados.

Qué hemos aprendido

Una animación es una lista de imágenes que se enseñan una detrás de otra a cierta velocidad. Los fotogramas por segundo deciden cuánto dura, y el papel cebolla ayuda a dibujar el siguiente.

También hemos aprendido que lo que sirve para analizar un vídeo sirve para analizar un dibujo. La media, el mínimo, la mediana y la diferencia responden preguntas distintas, y hay que elegir la que haga falta.

El Lince se ha quedado un buen rato mirando cuánta ciencia cabía en una pelota que bota. La Gata, con la tinta hasta los bigotes, ya está dibujando la siguiente.