Como as animações do 3Blue1Brown são feitas [Vídeo]

 (youtube.com)
2 pontos por GN⁺ 2024-10-13 | 1 comentários | Compartilhar no WhatsApp
  • As visualizações do 3Blue1Brown são codificadas com a biblioteca Python Manim criada por Grant Sanderson, e o vídeo acompanha o fluxo real de produção junto com Ben Sparks
  • O Manim se divide entre o ambiente pessoal de produção do Grant e o Manim Community, com documentação, testes e tratamento de issues mais reforçados; para iniciantes, a versão da comunidade costuma ser a mais adequada
  • O trabalho é mais próximo de conectar o Sublime Text a um terminal Python para executar trechos de código imediatamente, usando checkpoint paste para armazenar em cache estados intermediários e repetir experimentos
  • A demonstração calcula o atrator de Lorenz com SciPy e depois combina curvas, pontos, updaters, câmera 3D e efeito de rastro para mostrar como condições iniciais próximas se separam
  • A cena final é renderizada em MP4 após uma execução prévia para verificar erros e duração, e depois segue para uma ferramenta de edição no processo de produção de vídeos para o YouTube

O ponto de partida do Manim e suas duas versões

  • A ferramenta central das animações do 3Blue1Brown é a biblioteca Python Manim, criada pelo próprio Grant Sanderson
  • O Manim monta todas as cenas de forma programática e evoluiu como uma ferramenta sob medida para o modo de produção do 3Blue1Brown
  • Perto de terminar a graduação, Grant escreveu código em Python para visualizar melhor funções matemáticas como transformações, e esse código deu início ao canal junto com os primeiros vídeos
  • À medida que os vídeos aumentavam, a ferramenta era aprimorada, e as melhorias por sua vez possibilitavam vídeos mais complexos
  • Os efeitos visuais do vídeo recente sobre hologramas seriam muito mais difíceis 2 ou 3 anos atrás, mas a dificuldade de produção caiu graças a vários anos de melhorias no fluxo de trabalho

Manim Community e a versão pessoal do Grant

  • Grant vem publicando no GitHub tanto o código usado nos vídeos quanto o próprio Manim
  • Mas, como a produção de vídeos acontecia em paralelo à manutenção open source, não havia resposta suficiente a issues e Pull Requests
  • A comunidade fez um fork do repositório para criar uma ferramenta mais robusta, e essa versão é o Manim Community
    • A resposta a issues e Pull Requests é mais ativa
    • Testes e documentação são mais completos
    • Em geral, é a versão recomendada para quem está começando
  • Na demonstração do vídeo, é usada a versão que o próprio Grant utiliza
    • Nos últimos anos, ela foi aprimorada para ser mais interativa e rápida
    • Para quem valoriza documentação e testes, a versão da comunidade é mais indicada

Um modo de produção baseado em escrever código e verificar na hora

  • Cada cena no Manim é escrita como uma class em Python, e o código a ser renderizado fica dentro do método construct
  • Objetos como círculos, retângulos e texto são adicionados à tela, e animações como Write e Transform são executadas com o método play
  • A maioria dos objetos é colocada no centro da tela por padrão, e sua posição é alterada com operações como to_edge e shift
  • O ambiente de trabalho do Grant combina Sublime Text e terminal Python
    • Ao copiar linhas de código e executá-las no terminal, o resultado é aplicado imediatamente à cena atual
    • Atalhos do Sublime automatizam o processo de copiar e executar o código selecionado
    • O terminal fica conectado à cena atual, permitindo ver o resultado das alterações na hora
  • Em cenas longas, é importante poder repetir experimentos apenas em trechos intermediários sem executar todo o código de novo a cada vez
    • O exemplo do vídeo de hologramas era um longo código Python que gerava um MP4 de 4 minutos e 30 segundos
    • Como cenas longas compartilham muito contexto e muitas variáveis locais, mantê-las em um único arquivo era útil
    • checkpoint paste armazena em cache o estado da cena em uma posição específica de comentário, volta para esse estado e executa o código selecionado
    • Esse método fica próximo de um fluxo híbrido entre arquivos de texto puros e Jupyter notebook

A sensação básica das animações no Manim

  • Uma das filosofias importantes do Manim é que “qualquer coisa pode ser transformada em qualquer coisa”
  • Por exemplo, é possível criar uma cena que transforma a primeira letra H do texto hello world em um círculo
    • Não é preciso adicionar o círculo diretamente à cena para defini-lo como alvo da transformação
    • O texto é um grupo de caracteres, então dá para extrair e manipular letras individualmente
  • Transform usa por padrão uma rate function suave
    • O padrão é smooth, que parece um movimento suave baseado em cubic bezier
    • Com linear, o início e o fim parecem mais rígidos
    • Quando é preciso mostrar a progressão temporal matemática como ela é, linear se torna necessário
  • Esses ajustes finos fazem a diferença entre uma cena simplesmente “em movimento” e uma cena “bonita de ver”
  • Animações familiares dos vídeos do 3Blue1Brown, como Write, também podem ser chamadas por funções nativas do Manim

Demonstração com o atrator de Lorenz

  • O exemplo central da demonstração é o atrator de Lorenz
    • É uma forma que surge em uma equação diferencial tridimensional
    • Ele define, por regras determinísticas, como um ponto no espaço 3D evolui ao longo do tempo
    • Alterar várias condições iniciais gera resultados visuais interessantes
  • Ao montar a parte de cálculo matemático, Grant pediu ao ChatGPT que escrevesse uma função em Python
    • Foram usados integrate do SciPy e uma função para resolver problemas de valor inicial
    • O código gerado tinha como referência a renderização no Matplotlib e depois foi adaptado para o Manim
  • O estado da equação de Lorenz é expresso pelas coordenadas x, y e z, em uma função que calcula a derivada em cada instante
  • O resultado da solução numérica retorna valores de tempo e valores de x, y e z, e Grant criou um wrapper para lidar com isso de forma mais prática
    • A forma como o SciPy trata y como saída pode ser um pouco confusa
    • Ele ajusta o array de estado e sua transposição para o formato mais conveniente no próprio fluxo
  • Quando a condição inicial foi definida como (0, 0, 0), todos os valores ficaram em 0 e isso não serviu; depois de mudar uma coordenada para 10, surgiram pontos interessantes
  • No Manim, set_points_as_corners é usado para transformar os pontos calculados em uma curva
  • Para converter coordenadas do sistema dos eixos para o sistema de coordenadas do Manim, usa-se c2p, abreviação de coords_to_point
  • A sintaxe * do Python serve para desempacotar um iterable e passá-lo como argumentos para uma função
    • No exemplo, listas de coordenadas x, y e z são separadas e passadas à função

A cena em que condições iniciais próximas se separam

  • O ponto central da visualização do atrator de Lorenz é que condições iniciais muito próximas se movem de forma parecida no começo, mas depois acabam se separando
  • Grant cria uma lista de condições iniciais e define a coordenada z com pequenas diferenças de epsilon
    • No início, ele começa com 2 condições
    • Depois amplia para 10 condições
  • VGroup é usado para reunir várias curvas
    • Informar que se trata de um grupo de objetos vetorizados pode acelerar a renderização
  • Em cada extremidade de curva, ele coloca um glow dot
    • GlowDot é um objeto criado para exibir de forma mais agradável um ponto em movimento
    • Cada ponto recebe um updater que o move até a ponta da curva a cada frame
  • zip é usado para percorrer em paralelo listas correspondentes, como ponto e curva, ou estado e cor
    • Se duas listas tiverem tamanhos diferentes, a iteração para quando a menor acabar
    • color_gradient cria a mesma quantidade de cores que de estados para manter os comprimentos alinhados
  • Ao desenhar curvas com ShowCreation, usar o smoothing padrão pode distorcer a progressão real do tempo; por isso, nas partes que mostram a dinâmica como ela é, usa-se uma linear rate function
  • Condições iniciais próximas quase se movem juntas no começo, mas com o tempo se espalham como se estivessem em posições completamente diferentes
  • O atrator de Lorenz não é tratado como um ponto simples nem como um ciclo, mas como um strange attractor: ele é atraído para uma certa forma, embora a posição exata seja sensível às condições iniciais

Código de contorno no modo interativo e efeitos de cena

  • Durante a demonstração aparece um código “amaldiçoado”, como globals().update(locals())
  • Esse código é uma solução provisória para contornar um problema do ambiente IPython embed do Manim, em que funções não conseguem enxergar variáveis do escopo externo
    • Em scripts Python normais, o mesmo código funciona normalmente
    • No ambiente interativo embutido do Manim, pode ocorrer NameError
    • O problema é contornado colocando variáveis locais no dicionário de variáveis globais
  • Em código real de biblioteca, esse tipo de abordagem seria inadequado, mas em uma sessão interativa temporária para desenvolver cenas o risco é relativamente menor
  • Uma forma melhor é fazer a função receber explicitamente, como argumentos, as variáveis de que precisa
  • Para fazer uma curva desaparecer com o tempo, pode-se usar FadeOut
    • Se o run_time de play for alinhado ao tempo de evolução, a curva vai ficando transparente gradualmente nesse intervalo
  • O efeito de rastro atrás do ponto é implementado com TracingTail
    • Ele permite criar uma cauda que acompanha um único ponto
    • Se time_traced for aumentado de 1 para 3 segundos, a cauda exibirá um intervalo maior de tempo
    • Ao adicionar caudas a cada um dos 10 pontos, a dispersão das trajetórias fica mais clara

Câmera 3D e tratamento de equações

  • As cenas do Manim podem ter coordenadas 3D por padrão, mas a maioria das cenas do 3Blue1Brown é montada para parecer um quadro 2D por motivos didáticos
  • Como o atrator de Lorenz exige 3D, eixos 3D são adicionados
  • Em cenas 3D, um efeito útil para manter a sensação de profundidade é fazer a câmera girar ou se mover lentamente
    • Grant usa um atalho que salva a posição atual da câmera na área de transferência
    • A câmera pode ser animada para uma posição específica no formato frame.animate.reorient(...)
  • Equações podem ser adicionadas à cena como objetos LaTeX
    • Com o MathPix, é possível usar OCR para ler equações da tela e obtê-las em LaTeX ou SVG
    • Em cenas 3D, fix_in_frame é usado para manter a equação fixa na tela
  • Variáveis específicas em fórmulas LaTeX podem receber cores
    • No exemplo, x, y e z recebem cores diferentes
    • A capacidade de separar texto em componentes matemáticos para destacar ou transformar é útil em explicações matemáticas
  • O Manim também tem transforms especiais que fazem correspondência entre strings
    • Termos como A^2 e B^2 podem se mover naturalmente para a mesma posição de string na linha seguinte
    • A correspondência baseada em strings também permite efeitos de animação tipo anagrama, enviando letras para posições correspondentes
  • Animações como flash around e indicate podem destacar caracteres ou termos específicos em uma fórmula

Renderização e fluxo real de produção

  • Quando a cena fica pronta, ela é renderizada com um comando do Manim especificando o arquivo Python e o nome da cena
  • pre-run é a etapa de revisar toda a animação antes de usá-la de fato
    • Serve para estimar a duração total
    • Também ajuda a detectar erros com antecedência, em vez de descobri-los no meio da renderização
  • W é a opção para gravar em arquivo, e opções relacionadas ao Finder servem para abrir o resultado no Finder do macOS
  • O resultado final é renderizado como um arquivo MP4
    • Grant normalmente renderiza em 4K, então isso pode levar mais tempo
    • Depois, o arquivo renderizado é levado para uma ferramenta de edição
  • Antigamente, o uso do Manim era baseado principalmente em renderizar cenas pela linha de comando e verificar o MP4 em ciclos repetidos
  • Mais tarde, em um período semelhante à transição para a implementação em OpenGL, surgiu um fluxo de trabalho com shell interativo, permitindo destacar código e ver o resultado imediatamente
  • O fluxo específico do Grant depende de scripts do Sublime Text e da extensão Terminus
    • É possível imitar comportamento semelhante em outros editores de texto
    • Também dá para montar um fluxo equivalente em ambientes da linha Visual Studio
  • Para encontrar funcionalidades, é útil consultar cenas de exemplo, a pasta animation da biblioteca e o repositório GitHub 3b1b/videos, que contém código de vídeos antigos
  • Grant prefere autocompletar mais simples em vez do Copilot
    • No Manim, muitas vezes ele já sabe exatamente o comportamento que quer
    • Para ele, expressar isso em código parece mais natural do que escrever um pedido em inglês

Leituras relacionadas

1 comentários

 
GN⁺ 2024-10-13
Opiniões no Hacker News

  • 3B1B faz um trabalho realmente incrível
    Pessoalmente, os vídeos dele no YouTube me ajudaram muito, e eu gostaria que matemática fosse ensinada desse jeito no ensino médio ou em cursos de engenharia

    • Eu me sinto de forma parecida. Só que, para muita gente, matemática só passa a ser devidamente apreciada quando a pessoa fica um pouco mais velha, e talvez seja aí que canais como esse acabem atraindo essas pessoas

  • https://sinerider.com/ também vale a pena ver
    É um jogo feito por um amigo que às vezes ajuda Grant Sanderson no trabalho do 3B1B; é um excelente jogo educativo de matemática em que você cria pistas como no LineRider, mas com equações
    Tanto o 3B1B quanto o SineRider foram, de longe, o que mais impactou minha compreensão intuitiva de composição de funções

  • Foi impressionante a cena em que ele encontrou um bug no motor de renderização em tempo real e ainda achou uma solução de contorno
    https://youtu.be/rbu7Zu5X1zI?feature=shared&t=693

    • Pelo que parece, ele já conhecia a limitação da nova lógica de renderização em que estava trabalhando no backend, e também sabia de uma solução simples em nível mais alto
      Ainda assim, é um trabalho impressionante
    • Em empresas grandes, esse tipo de engenheiro incendiário-bombeiro também acaba se destacando. Porque conserta, em um lugar bem visível, um bug que ele mesmo criou
    • Ele conhecia aquele bug, mas desenvolver esse software não é o trabalho principal dele; o trabalho principal é produzir vídeos
      Saber onde estava e qual era a causa, e pensar numa solução de contorno ao vivo, significa que ele investe tempo melhorando as próprias ferramentas — e não só de vez em quando, mas de forma ativa
      Ainda acho muito legal

  • Fiquei curioso sobre como funcionava o REPL interativo de Python no canto inferior direito
    Edit: parece ser um fluxo de trabalho totalmente personalizado: https://github.com/3b1b/videos?tab=readme-ov-file#workflow

    • Acho que ele é um dos poucos criadores excelentes no YouTube que não se comercializaram completamente. Mark Rober me vem à mente

  • Depois de anos ouvindo só a voz dele sem ver o rosto, achei engraçado ver o rosto e, de repente, sentir como se tivesse entrado no meio do vale da estranheza

    • Parece que muitos criadores que eu acompanho começaram a mostrar o rosto ultimamente. Um exemplo grande que me vem à cabeça é o apresentador do Real Engineering
      Em alguns vídeos recentes, ele passou a agir como apresentador, entrevistador e narrador
      Também acho estranho quando, como no veratasium, o criador deixa alguns vídeos para outra pessoa apresentar
      Uma revelação realmente grande seria a do AvE
    • O discurso de formatura dele pode surpreender ainda mais. Ex.: https://youtu.be/z7GVHB2wiyg
    • Ele começou a mostrar o rosto em 2020, durante o lockdown, para ajudar as pessoas a manterem uma sensação de conexão humana
      Na época, uma boa parte dos comentários dos vídeos era sobre o nome e o ícone do canal, e um dos olhos dele realmente tem aquela aparência
    • Ele já tinha aparecido várias vezes antes em vídeos com Matt Parker e Brady Haran (Numberphile), então me surpreende que você não tenha visto
      Ainda assim, mesmo dentro desses canais de nicho, parece que os gostos variam bastante
    • Em especial, a voz da narração tem uma qualidade de áudio melhor do que a voz de uma pessoa gravada de forma casual, então essa pequena diferença pode parecer bem estranha

  • A voz dele é muito boa. Calma e confortável, dá para deixar tocando enquanto faço tarefas de casa e ainda aprender alguma coisa
    Esse tipo de criador merece reconhecimento

    • Acho que uma voz assim deve ter um grande impacto no sucesso, seja no YouTube ou em podcasts
    • Esse cara é um educador nato. Chamá-lo apenas de criador de conteúdo não captura todo o valor social que ele tem
    • Para o meu gosto, é nasal demais. De algum modo, sinto que isso diminui um pouco o rigor que há no conteúdo

  • O vídeo mais recente sobre hologramas está entre os vídeos de maior qualidade que já vi no YouTube

  • Seria muito bom fazer um vídeo explicando o algoritmo de bridging[1] com essa ferramenta
    Desde 2016 sou fã de como esse algoritmo é usado em processos de democracia participativa com ferramentas como o Pol.is, e eu queria contribuir para melhorar a compreensão da matemática por trás disso
    Se eu tivesse conhecido o Manim na época em que acontecia o Summer of Math Exposition[2], com certeza teria me jogado nisso
    [1]: https://bridging.systems/
    [2]: https://some.3b1b.co/

    • Eu não sabia que isso existia. Obrigado pelo link; estou lendo o artigo agora e, se fizerem um vídeo explicativo, com certeza vou querer assistir
      Meu site está no perfil, então, se um dia você fizer, seria ótimo se me mandasse o link pelas redes sociais
    • Fico curioso para saber que matemática realmente entra nisso. Segui o link [1], mas encontrei pouquíssimo conteúdo matemático
    • Se fizerem, eu assistiria. Sou fã do pol.is

  • Link do Manim: https://github.com/3b1b/manim

  • É impressionante a quantidade de produção que entra em cada vídeo dele. Ele merece receber o botão de play do YouTube

    • Esse também é justamente um dos pontos ruins do YouTube. Para fazer vídeos de alta qualidade, é necessário um esforço absurdo, várias ordens de grandeza maior do que o necessário para fazer um bom post de blog com ilustrações
      Assim como em blogs, se a sorte não ajudar, boa parte desse esforço é desperdiçada. Mas um blog pelo menos tem várias chances de ganhar exposição. Pode chegar ao topo do HN, pode se espalhar pelo X ou por outros lugares. Mesmo dentro de uma plataforma, normalmente há várias oportunidades
      Em contraste, no YouTube, o algoritmo basicamente decide uma vez só. Se você ainda não tem uma base enorme de inscritos, ele mostra o vídeo para algumas pessoas quase aleatórias e, se elas não reagirem, acaba aí