Clase 1 · 15 min
En el motion por código, el video es una página que sabe dibujar cualquier instante. Un navegador sin pantalla pide el fotograma 0, el 1, el 2, y FFmpeg junta todo en un MP4. Si la misma entrada da siempre los mismos fotogramas, puedes rehacer, corregir y versionar el video como código. En esta lección lo compruebas en tu máquina.
Empezar la clase
Objetivo: comprobar en tu máquina que la misma composición da los mismos fotogramas y encontrar lo que lo rompe.
Haz clic en cada pieza. HyperFrames (HTML) y Remotion (React) siguen el mismo diseño.
Determinístico = correr dos veces en el mismo entorno y obtener los mismos fotogramas. Es lo que permite corregir un detalle sin rehacer todo lo demás.
Tres fuentes de azar que el lint de HyperFrames detecta.
Cada render sortea de nuevo: los mismos 12 puntos nacen en lugares distintos.
El reemplazo es un sorteo con semilla (mulberry32): la misma semilla da los mismos números, siempre.
const sorteio = mulberry32(42); luego sorteio() en lugar de Math.random().
La hora actual cambia en cada render y en cada fotograma.
Todo lo que anima debe venir del tiempo que entrega el motor, nunca del reloj de la computadora.
Buscar datos en internet durante el render puede traer otra respuesta o fallar a la mitad.
Búscalos antes, guárdalos en un archivo de la carpeta y léelos desde ahí (la lección 7 hace esto con los subtítulos).
Dos composiciones casi iguales: una usa Math.random, la otra un sorteo con semilla. Cada una se renderiza dos veces y se compara por el hash de cada fotograma.
git clone https://github.com/inematds/formacao-cinema-ia-motion-v72 ~/projetos/formacao-cinema-ia-motion-v72
K=~/projetos/formacao-cinema-ia-motion-v72/kit
export HYPERFRAMES_NO_TELEMETRY=1
E=${TMPDIR:-/tmp}/ensaio-motion/a1; rm -rf "$E"; mkdir -p "$E"
for ex in a1-sorteio a1-semente; do
cp -r "$K/exemplos/$ex" "$E/$ex"; cd "$E/$ex"
for n in 1 2; do
npx -y hyperframes@0.8.176 render --quality draft --workers 1 --quiet --output "render-$n.mp4" > /dev/null 2>&1
done
echo "## $ex"; bash "$K/comparar-quadros.sh" render-1.mp4 render-2.mp4; echo "saída: $?"
done## a1-sorteio DIFEREM: 89 de 90 quadros saída: 1 ## a1-semente IGUAIS: 90/90 quadros saída: 0
Son 90 fotogramas (3 s a 30 fps). Con Math.random solo coincide el primero; con la semilla, los 90. El primer render descarga hyperframes@0.8.176 y el navegador, por eso tarda más.
Comparar el MP4 con md5sum puede dar distinto aunque los fotogramas sean iguales (metadatos del archivo). El comparar-quadros.sh decodifica y compara la imagen de cada fotograma con ffmpeg -f framemd5.
El mismo par de composiciones pasado por el lint de HyperFrames. Señala la línea y sugiere la semilla.
K=~/projetos/formacao-cinema-ia-motion-v72/kit export HYPERFRAMES_NO_TELEMETRY=1 NO_COLOR=1 for ex in a1-sorteio a1-semente; do cd "$K/exemplos/$ex" npx -y hyperframes@0.8.176 lint; echo "saída: $?" done
◆ Linting a1-sorteio/index.html
✗ [~/projetos/formacao-cinema-ia-motion-v72/kit/exemplos/a1-sorteio/index.html:24:24] non_deterministic_code: Script contains `Math.random()` which produces non-deterministic output. Renders may differ between frames or runs.
Fix: Use a seeded PRNG (e.g. a simple mulberry32) so renders are deterministic across frames.
◇ 1 error(s), 0 warning(s)
saída: 1
◆ Linting a1-semente/index.html
◇ 0 errors, 0 warnings
saída: 0El lint sale con código 1 cuando encuentra un error: puedes usarlo como compuerta antes de cualquier render.
Ensayo, lint y tu semilla.
Clona el curso en ~/projetos y ejecuta el bloque "dos renders de cada uno y la comparación".
Listo cuando: a1-sorteio termina en DIFEREM: 89 de 90 quadros y saída: 1; a1-semente en IGUAIS: 90/90 quadros y saída: 0. (En tu computadora el número de fotogramas distintos puede variar; lo que no puede pasar es que la semilla dé distinto.)
Ejecuta el bloque del lint.
Listo cuando: a1-sorteio muestra non_deterministic_code y saída: 1; a1-semente muestra 0 errors, 0 warnings y saída: 0.
En /tmp/ensaio-motion/a1/a1-semente, cambia mulberry32(42) por mulberry32(7), renderiza dos veces (render-3.mp4 y render-4.mp4, con el mismo comando del bloque) y compara: 3 con 4, después 1 con 3.
Listo cuando: bash ~/projetos/formacao-cinema-ia-motion-v72/kit/comparar-quadros.sh render-3.mp4 render-4.mp4 → IGUAIS: 90/90 quadros; lo mismo con render-1.mp4 render-3.mp4 → empieza con DIFEREM:.
La explicación aparece después de tu respuesta.
Pregunta 1 de 4
¿Quién decide qué instante dibuja la composición?
Pregunta 2 de 4
Dos renders de la misma composición dieron 89 de 90 fotogramas distintos. ¿Qué buscar primero?
Pregunta 3 de 4
¿Para qué sirve el sorteo con semilla?
Pregunta 4 de 4
¿Por qué comparar fotograma a fotograma y no el MP4 completo?
Elige una alternativa. La explicación aparece después de tu intento.