Cómo se hacen las animaciones de 3Blue1Brown [video]

 (youtube.com)
2 puntos por GN⁺ 2024-10-13 | 1 comentarios | Compartir por WhatsApp
  • Las visualizaciones de 3Blue1Brown se codifican con Manim, una biblioteca de Python creada por Grant Sanderson, y el video sigue el flujo real de producción junto con Ben Sparks
  • Manim se dividió en el entorno personal de producción de Grant y Manim Community, que refuerza documentación, pruebas y atención a issues; para principiantes, normalmente conviene la versión comunitaria
  • El trabajo se parece a conectar Sublime Text con una terminal de Python para ejecutar fragmentos de código al instante y usar checkpoint paste para cachear estados intermedios y experimentar de forma iterativa
  • La demo calcula el atractor de Lorenz con SciPy y luego combina curvas, puntos, updaters, cámara 3D y efecto de estela para mostrar cómo se separan condiciones iniciales cercanas
  • La escena final se revisa con una ejecución previa para confirmar errores y duración, luego se renderiza como MP4 y después pasa a una herramienta de edición para continuar el proceso de creación del video de YouTube

El punto de partida de Manim y sus dos versiones

  • La herramienta central de las animaciones de 3Blue1Brown es Manim, una biblioteca de Python creada por el propio Grant Sanderson
  • Manim construye todas las escenas de forma programática y ha evolucionado como una herramienta a medida para el estilo de producción de 3Blue1Brown
  • Hacia el final de sus estudios de grado, Grant escribió código en Python para visualizar mejor funciones matemáticas como transformaciones, y ese código nació junto con los primeros videos del canal
  • A medida que aumentó la cantidad de videos, la herramienta fue mejorando, y esas mejoras a su vez hicieron posibles videos más complejos
  • Los efectos visuales del video reciente sobre hologramas habrían sido mucho más difíciles hace 2 o 3 años, pero gracias a varios años de mejoras en el workflow, la dificultad de producción bajó

Manim Community y la versión personal de Grant

  • Grant ha ido publicando en GitHub tanto el código usado en sus videos como Manim en sí
  • Sin embargo, al combinar producción de videos con mantenimiento open source, la atención a issues y Pull Requests no fue suficiente
  • La comunidad hizo un fork del repositorio para crear una herramienta más robusta, y esa versión es Manim Community
    • Tiene una atención más activa a issues y Pull Requests
    • Cuenta con mejores pruebas y documentación
    • En general, es la versión recomendada para quienes recién empiezan
  • En la demo del video se usa la versión que Grant utiliza directamente
    • En los últimos años se ha vuelto más interactiva y rápida
    • Para usuarios que valoran documentación y pruebas, la versión comunitaria es más adecuada

Forma de producción: escribir código y verlo de inmediato

  • Cada escena de Manim se escribe como una class de Python, y el código a renderizar va dentro del método construct
  • Se agregan objetos como círculos, rectángulos o texto a la pantalla, y con el método play se ejecutan animaciones como Write o Transform
  • La mayoría de los objetos se colocan por defecto en el centro de la pantalla, y su posición se cambia con operaciones como to_edge o shift
  • El entorno de trabajo de Grant combina Sublime Text con una terminal de Python
    • Al copiar líneas de código y ejecutarlas en la terminal, se reflejan de inmediato en la escena actual
    • Un atajo de Sublime automatiza el proceso de copiar y ejecutar el código seleccionado
    • La terminal está conectada con la escena actual, por lo que permite ver al instante el resultado de las modificaciones
  • En escenas largas, es importante poder experimentar solo con secciones intermedias sin volver a ejecutar todo el código cada vez
    • El ejemplo del video de hologramas era un código Python largo que generaba un MP4 de 4 minutos y 30 segundos
    • Para escenas largas, mantener todo en un solo archivo resultaba útil porque compartían mucho contexto y variables locales
    • checkpoint paste cachea el estado de la escena en una ubicación específica marcada por un comentario, vuelve a ese estado y luego ejecuta el código seleccionado
    • Este enfoque se parece a un workflow híbrido entre un archivo de texto puro y un Jupyter notebook

La intuición básica de una animación en Manim

  • Una de las filosofías importantes de Manim es que “cualquier cosa puede transformarse en cualquier otra”
  • Por ejemplo, se puede crear una escena en la que la primera letra H del texto hello world se transforma en un círculo
    • No hace falta agregar el círculo directamente a la escena; se puede definir como destino de la transformación
    • El texto es un grupo de caracteres, por lo que se pueden extraer y manipular caracteres individuales
  • Transform usa por defecto una rate function suave
    • El valor predeterminado es smooth, que se ve como un movimiento suave basado en cubic bezier
    • Con linear, el inicio y el final se sienten más rígidos
    • Cuando se necesita mostrar tal cual el avance matemático del tiempo, hace falta usar linear
  • Estos ajustes finos marcan la diferencia entre una “escena que se mueve” y una “escena que se ve bien”
  • Animaciones familiares de los videos de 3Blue1Brown, como Write, también pueden invocarse como funciones integradas de Manim

Demo del atractor de Lorenz

  • El ejemplo central de la demo es el atractor de Lorenz
    • Es una forma que surge de ecuaciones diferenciales tridimensionales
    • Define con reglas deterministas cómo cambia un punto en el espacio 3D a medida que pasa el tiempo
    • Al variar varias condiciones iniciales, se obtienen resultados visuales interesantes
  • Grant le pidió a ChatGPT que escribiera una función en Python para la parte de cálculo matemático
    • Se usaron integrate de SciPy y una función para resolver problemas de valores iniciales
    • El código generado estaba pensado para renderizar con Matplotlib, y luego se ajustó para Manim
  • El estado de las ecuaciones de Lorenz tiene coordenadas x, y, z, y se expresa como una función que calcula las derivadas en cada instante
  • El resultado numérico viene como valores de tiempo y valores x, y, z, y Grant usa un wrapper para manejarlo con más comodidad
    • La representación de SciPy puede ser algo confusa porque trata y como salida
    • Ajusta el arreglo de estados y su forma transpuesta de la manera que le resulta más cómoda
  • Al poner la condición inicial en (0, 0, 0), todos los valores daban 0 y no resultaba adecuado; al cambiar una coordenada a 10, se generaron puntos interesantes
  • En Manim, para convertir los puntos calculados en una curva se usa set_points_as_corners
  • Para convertir el sistema de coordenadas de los ejes al sistema de coordenadas de Manim se usa c2p, abreviatura de coords_to_point
  • La sintaxis * de Python se usa para desempaquetar un iterable y pasarlo como argumentos de una función
    • En el ejemplo, se separan las listas de coordenadas x, y, z y se pasan a la función

Escena donde condiciones iniciales cercanas se separan

  • La clave de la visualización del atractor de Lorenz es mostrar cómo condiciones iniciales muy cercanas se mueven de forma similar al principio, pero luego se separan
  • Grant crea una lista de condiciones iniciales y configura la coordenada z para que difiera por un pequeño epsilon
    • Al principio empieza con 2 condiciones
    • Luego aumenta a 10 condiciones
  • Para contener varias curvas usa VGroup
    • Indicar que se trata de un grupo de objetos vectorizados puede acelerar el renderizado
  • En el extremo de cada curva coloca un glow dot
    • GlowDot es un objeto creado para mostrar de forma visualmente agradable un punto en movimiento
    • Cada punto lleva un updater que lo mueve en cada frame hasta el extremo de la curva
  • zip se usa para recorrer en paralelo listas correspondientes, como puntos y curvas, o estados y colores
    • Si las dos listas tienen longitudes distintas, se detiene cuando termina la más corta
    • Con color_gradient se crea la misma cantidad de colores que de estados para hacer coincidir las longitudes
  • Al dibujar curvas con ShowCreation, usar el smoothing predeterminado puede distorsionar el avance real del tiempo, por lo que en las partes que muestran la dinámica tal cual se utiliza una linear rate function
  • Las condiciones iniciales cercanas al principio se mueven casi juntas, pero con el tiempo se dispersan como si estuvieran en posiciones completamente distintas
  • El atractor de Lorenz se trata como un strange attractor: no es un simple punto ni un ciclo, sino que es atraído hacia una forma específica, aunque la posición exacta es sensible a las condiciones iniciales

Código alternativo del modo interactivo y efectos de escena

  • Durante la demo aparece código “maldito” como globals().update(locals())
  • Ese código es una solución temporal para evitar un problema del entorno IPython embed de Manim, donde una función no puede ver variables del scope externo
    • En un script normal de Python, el mismo código funciona correctamente
    • En el entorno interactivo embebido de Manim puede producirse un NameError
    • El problema se esquiva colocando las variables locales en el diccionario de variables globales
  • En código real de una biblioteca, este enfoque sería inapropiado, pero en una sesión interactiva temporal para desarrollar escenas el riesgo es relativamente menor
  • Una mejor forma sería hacer que la función reciba explícitamente como argumentos las variables que necesita
  • Para hacer que una curva desaparezca con el tiempo, se puede usar FadeOut
    • Si el run_time de play se hace coincidir con el evolution time, la curva se vuelve transparente gradualmente durante ese tiempo
  • El efecto de dejar una estela detrás del punto se implementa con TracingTail
    • Se puede crear una cola que sigue a un punto
    • Si time_traced aumenta de 1 segundo a 3 segundos, se ve una cola de mayor duración
    • Si se agrega una cola a cada uno de los 10 puntos, se ve con más claridad cómo se dispersan las múltiples trayectorias

Cámara 3D y manejo de fórmulas

  • Las escenas de Manim pueden tener coordenadas 3D por defecto, pero la mayoría de las escenas de 3Blue1Brown se configuran para verse como un pizarrón 2D por razones educativas
  • Como el atractor de Lorenz requiere 3D, se agregan ejes 3D
  • En una pantalla 3D, para mantener la sensación de profundidad resulta útil que la cámara rote o se mueva lentamente
    • Grant usa un atajo que guarda en el portapapeles la posición actual de la cámara
    • Con una forma como frame.animate.reorient(...), anima el frame de la cámara hacia una posición específica
  • Las fórmulas se pueden agregar a la escena como objetos LaTeX
    • Con MathPix se puede leer una ecuación en pantalla mediante OCR y obtener LaTeX o SVG
    • Para fijar una fórmula en la pantalla dentro de una escena 3D, se usa fix_in_frame
  • Se pueden colorear variables específicas de una fórmula LaTeX
    • En el ejemplo, x, y, z se asignan a colores distintos
    • La capacidad de separar el texto en componentes matemáticos para resaltarlos o transformarlos es útil para explicaciones matemáticas
  • Manim también tiene transforms especiales que hacen coincidir strings
    • Términos como A^2 y B^2 se mueven de forma natural hacia la posición de la misma cadena en la línea siguiente
    • El matching basado en strings también permite efectos como animaciones de anagramas, enviando letras a sus posiciones correspondientes
  • Con animaciones como flash around e indicate se pueden resaltar caracteres o términos específicos de una fórmula

Renderizado y flujo real de producción

  • Cuando una escena queda bien, se renderiza con un comando de Manim especificando el archivo Python y el nombre de la escena
  • pre-run es una etapa para revisar toda la animación antes de usarla de verdad
    • Permite estimar la duración total
    • Ayuda a detectar errores antes, no durante un renderizado intermedio
  • W es una opción para escribir a archivo, y las opciones relacionadas con Finder sirven para abrir el archivo resultante en el Finder de macOS
  • El resultado final se renderiza como un archivo MP4
    • Grant normalmente renderiza en 4K, por lo que puede tardar más
    • Luego, el archivo renderizado se incorpora a una herramienta de edición
  • La forma anterior de usar Manim consistía principalmente en repetir el ciclo de renderizar escenas desde la línea de comandos y revisar el MP4
  • Más adelante, en una época similar al cambio hacia la implementación en OpenGL, surgió un flujo de trabajo basado en una shell interactiva, y el proceso pasó a ser resaltar código y ver el resultado de inmediato
  • El workflow concreto de Grant depende de scripts de Sublime Text y de la extensión Terminus
    • En otros editores de texto se puede imitar un comportamiento similar
    • También se puede construir un flujo del mismo estilo en entornos de la familia Visual Studio
  • Para buscar funciones se pueden usar escenas de ejemplo, la carpeta animation de la biblioteca y el repositorio de GitHub 3b1b/videos, que contiene código de videos anteriores
  • Grant prefiere un autocompletado más simple que Copilot
    • En Manim, a menudo ya sabe qué comportamiento quiere
    • Le resulta más natural expresar la petición en código que en inglés

Lecturas relacionadas

1 comentarios

 
GN⁺ 2024-10-13
Opiniones en Hacker News

  • 3B1B está haciendo un trabajo realmente increíble.
    Personalmente, sus videos de YouTube me han ayudado muchísimo, y ojalá en la secundaria o en ingeniería nos hubieran enseñado matemáticas de esta forma.

    • Me pasa algo parecido. Aunque también creo que mucha gente recién llega a apreciar de verdad las matemáticas cuando ya es un poco mayor, y ahí es cuando termina atraída por canales como este.

  • También vale la pena ver https://sinerider.com/
    Es un juego creado por alguien que a veces ayuda a Grant Sanderson con su trabajo en 3B1B; un excelente juego educativo de matemáticas donde creas pistas como en LineRider, pero con ecuaciones.
    Tanto 3B1B como SineRider fueron lo que más influyó en mi comprensión intuitiva de la composición de funciones.

  • Me impresionó la escena en la que descubre en tiempo real un bug del motor de renderizado y hasta encuentra una solución alternativa.
    https://youtu.be/rbu7Zu5X1zI?feature=shared&t=693

    • A mí me pareció más bien que ya conocía las limitaciones de la nueva lógica de renderizado en la que estaba trabajando en el backend, y que también sabía una solución alternativa sencilla a alto nivel.
      Aun así, es un trabajo impresionante.
    • En las grandes empresas, este tipo de ingeniero bombero-pirómano también suele lucirse así: porque arregla, de forma muy visible, bugs que él mismo creó.
    • Él conocía ese bug, pero desarrollar este software no es su trabajo principal; su trabajo principal es producir videos.
      Que sepa dónde está y cuál es la causa, y que se le ocurra una solución alternativa en vivo, significa que invierte tiempo en mejorar sus propias herramientas, y no solo de vez en cuando, sino activamente.
      A mí me sigue pareciendo genial.

  • Me dio curiosidad cómo funcionaba el REPL interactivo de Python que aparecía abajo a la derecha.
    Edición: parece ser un flujo de trabajo completamente personalizado: https://github.com/3b1b/videos?tab=readme-ov-file#workflow

    • Creo que es uno de los pocos grandes creadores de YouTube que no se han comercializado por completo. Me recuerda a Mark Rober.

  • Después de haber escuchado solo su voz durante años sin verle la cara, verlo de pronto se siente como entrar de lleno en el valle inquietante, y eso me da risa.

    • Me parece que varios de los creadores que veo últimamente empezaron a mostrar la cara. Un ejemplo grande que se me viene enseguida es el presentador de Real Engineering.
      En varios videos recientes actúa como presentador, entrevistador y narrador.
      También se siente raro cuando un creador se encarga de algunos videos en lugar de otro, como en veratasium.
      Si hablamos de una revelación de verdad grande, sería AvE.
    • Su discurso de graduación podría sorprenderte aún más. Por ejemplo: https://youtu.be/z7GVHB2wiyg
    • Empezó a mostrar la cara en 2020, durante el confinamiento, para ayudar a que la gente mantuviera una sensación de conexión humana.
      En ese entonces, muchos comentarios de sus videos eran sobre el nombre y el ícono del canal, y de hecho uno de sus ojos se ve así.
    • Ya había aparecido varias veces antes en videos con Matt Parker y Brady Haran (Numberphile), así que me sorprende que no lo hayas visto.
      Aun así, parece que incluso dentro de estos canales de nicho los gustos varían bastante.
    • En particular, la voz de narración tiene mejor calidad de audio que la voz de una persona grabada de forma casual, así que esa pequeña diferencia puede sentirse bastante extraña.

  • Su voz es realmente buena. Es tranquila y cómoda; puedo ponerlo de fondo mientras hago tareas de la casa y aun así aprender algo.
    Creadores así merecen reconocimiento.

    • Creo que una voz así influye mucho en el éxito, ya sea en YouTube o en podcasts.
    • Esta persona es un educador nato. Llamarlo solo creador de contenido no alcanza para abarcar su valor social.
    • Para mi gusto suena demasiado nasal. Somehow siento que eso le resta un poco a la rigurosidad que hay en su contenido.

  • Su video más reciente sobre hologramas está entre los videos de YouTube de mayor calidad que he visto.

  • Sería genial hacer con esta herramienta un video explicativo sobre el algoritmo de bridging[1].
    Desde 2016 soy fan de cómo se usa este algoritmo en procesos de democracia participativa con herramientas como Pol.is, y quería contribuir a mejorar la comprensión de las matemáticas que lo sustentan.
    Si hubiera conocido Manim cuando se hizo Summer of Math Exposition[2], seguro me habría sumado.
    [1]: https://bridging.systems/
    [2]: https://some.3b1b.co/

    • No sabía que existía algo así. Gracias por el enlace; ahora estoy leyendo el paper y, si haces un video explicativo, definitivamente me gustaría verlo.
      Mi sitio web está en mi perfil, así que si algún día lo haces, me gustaría que me mandaras el enlace por redes sociales.
    • Me pregunto qué matemáticas incluye en la práctica. Seguí el enlace [1], pero casi no encontré contenido matemático.
    • Creo que lo vería si lo haces. Soy fan de pol.is.

  • Enlace a Manim: https://github.com/3b1b/manim

  • Me sorprende la enorme cantidad de producción que hay detrás de cada uno de sus videos. Se merece recibir el botón de reproducción de YouTube.

    • Eso también es justamente lo malo de YouTube. Hacer videos de alta calidad requiere una cantidad absurda de esfuerzo, varios órdenes de magnitud más que escribir un buen post de blog ilustrado.
      Como con los blogs, si no tienes suerte, gran parte de ese esfuerzo se desperdicia. Pero un blog al menos tiene varias oportunidades de obtener exposición. Puede llegar a la portada de HN, difundirse en X o en otros lugares. Incluso dentro de una misma plataforma normalmente hay varias oportunidades.
      En cambio, en YouTube el algoritmo básicamente decide una sola vez. Si no tienes ya una cantidad enorme de suscriptores, le muestra el video a unas pocas personas casi al azar y, si no reaccionan, ahí termina todo.