Comment sont réalisées les animations de 3Blue1Brown [vidéo]

 (youtube.com)
2 points par GN⁺ 2024-10-13 | 1 commentaires | Partager sur WhatsApp
  • Les visualisations de 3Blue1Brown sont codées avec Manim, une bibliothèque Python créée par Grant Sanderson, et la vidéo suit le flux de production réel avec Ben Sparks
  • Manim se divise entre l’environnement de production personnel de Grant et Manim Community, renforcé sur la documentation, les tests et le traitement des issues ; pour débuter, la version communautaire est généralement la plus adaptée
  • Le travail se rapproche d’une méthode où Sublime Text est relié à un terminal Python pour exécuter immédiatement des fragments de code, avec checkpoint paste pour mettre en cache les états intermédiaires et expérimenter de façon itérative
  • La démo calcule le Lorenz attractor avec SciPy, puis combine courbes, points, updaters, caméra 3D et effet de traînée pour montrer comment des conditions initiales proches divergent
  • La scène finale est rendue en MP4 après une exécution préalable pour vérifier les erreurs et la durée, puis intégrée dans un outil de montage pour poursuivre la production de la vidéo YouTube

Point de départ de Manim et ses deux branches

  • L’outil central des animations de 3Blue1Brown est Manim, une bibliothèque Python créée directement par Grant Sanderson
  • Manim compose toutes les scènes de manière programmatique et a évolué comme un outil sur mesure adapté à la méthode de production de 3Blue1Brown
  • Vers la fin de ses études, Grant a écrit du code Python pour mieux visualiser des fonctions mathématiques sous forme de transformations, et ce code a démarré avec les premières vidéos de la chaîne
  • À mesure que les vidéos se sont multipliées, l’outil s’est amélioré, et ces améliorations ont à leur tour permis des vidéos plus complexes
  • Les effets visuels de la récente vidéo sur les hologrammes auraient été bien plus difficiles il y a 2 ou 3 ans, mais plusieurs années d’amélioration du workflow ont réduit la difficulté de production

Manim Community et la version personnelle de Grant

  • Grant publie depuis longtemps sur GitHub le code utilisé dans ses vidéos ainsi que Manim lui-même
  • Mais comme la production vidéo et la gestion de l’open source avançaient en parallèle, le suivi des issues et des Pull Requests n’était pas suffisant
  • La communauté a forké le dépôt pour créer un outil plus robuste, et cette version est Manim Community
    • Le traitement des issues et des Pull Requests y est plus actif
    • Les tests et la documentation y sont mieux développés
    • C’est en général la version recommandée pour les débutants
  • La démo vidéo utilise la version que Grant emploie lui-même
    • Elle a été améliorée ces dernières années pour être plus interactive et plus rapide
    • Pour les utilisateurs qui accordent de l’importance à la documentation et aux tests, la version communautaire est plus adaptée

Une méthode de production où l’on écrit du code et on vérifie immédiatement le résultat

  • Chaque scène Manim est écrite sous forme de classe Python, avec le code à rendre dans la méthode construct
  • On ajoute à l’écran des objets comme des cercles, des rectangles ou du texte, puis on lance des animations comme Write ou Transform avec la méthode play
  • La plupart des objets sont placés par défaut au centre de l’écran, puis déplacés avec des manipulations comme to_edge ou shift
  • L’environnement de travail de Grant associe Sublime Text et un terminal Python
    • Copier une ligne de code pour l’exécuter dans le terminal l’applique immédiatement à la scène en cours
    • Des raccourcis Sublime automatisent la copie et l’exécution du code sélectionné
    • Le terminal étant relié à la scène actuelle, on peut voir immédiatement le résultat des modifications
  • Sur les scènes longues, il est important de pouvoir expérimenter de façon répétée sur une portion intermédiaire sans relancer tout le code à chaque fois
    • L’exemple de la vidéo sur les hologrammes consistait en un long code Python produisant un MP4 de 4 minutes 30
    • Les longues scènes partagent beaucoup de contexte et de variables locales, d’où l’intérêt de les garder dans un seul fichier
    • checkpoint paste met en cache l’état de la scène à l’emplacement d’un commentaire donné, puis y revient avant d’exécuter le code sélectionné
    • Cette méthode se rapproche d’un workflow hybride entre un fichier texte brut et un Jupyter notebook

La logique de base des animations Manim

  • Une philosophie importante de Manim est que « tout peut être transformé en n’importe quoi »
  • Par exemple, on peut créer une scène où la première lettre H du texte hello world est transformée en cercle
    • Il n’est pas nécessaire d’ajouter directement le cercle à la scène pour le définir comme cible de transformation
    • Le texte est un groupe de caractères, donc on peut extraire et manipuler chaque lettre individuellement
  • Transform utilise par défaut une rate function fluide
    • La valeur par défaut est smooth, qui donne un mouvement doux basé sur une courbe de Bézier cubique
    • Avec linear, le début et la fin paraissent plus raides
    • Lorsqu’il faut montrer fidèlement la progression temporelle mathématique, linear devient nécessaire
  • Ce type de réglage fin fait la différence entre une simple « scène animée » et une « scène agréable à regarder »
  • Des animations familières des vidéos 3Blue1Brown, comme Write, peuvent aussi être appelées via les fonctions intégrées de Manim

Démo sur le Lorenz attractor

  • L’exemple central de la démo est le Lorenz attractor
    • Il provient d’une équation différentielle en trois dimensions
    • Il fixe, selon une règle déterministe, la façon dont un point dans l’espace 3D évolue au fil du temps
    • En modifiant plusieurs conditions initiales, on obtient des résultats visuels intéressants
  • Pour créer la partie calcul mathématique, Grant a demandé à ChatGPT d’écrire une fonction Python
    • integrate de SciPy et une fonction de résolution de problème à valeur initiale sont utilisés
    • Le code généré s’appuyait sur un rendu Matplotlib, puis a été adapté à Manim
  • L’état des équations de Lorenz comporte les coordonnées x, y, z et s’exprime par une fonction calculant les dérivées à chaque instant
  • Le résultat de la résolution numérique fournit les valeurs du temps ainsi que x, y, z, et Grant ajoute un wrapper pour manipuler cela plus facilement
    • La représentation côté SciPy traite y comme une sorte de sortie, ce qui peut être un peu déroutant
    • Il adapte la forme du tableau d’état et sa transposée à la structure qui lui convient
  • Avec la condition initiale (0, 0, 0), toutes les valeurs restaient à 0, ce qui ne convenait pas ; après avoir mis une des coordonnées à 10, des points intéressants sont apparus
  • Dans Manim, set_points_as_corners sert à transformer les points calculés en courbe
  • Pour convertir les coordonnées du repère en coordonnées Manim, il utilise c2p, forme abrégée de coords_to_point
  • La syntaxe * de Python sert à déplier un iterable en arguments de fonction
    • Dans l’exemple, elle est utilisée pour transmettre séparément à la fonction les listes de coordonnées x, y, z

Une scène où des conditions initiales proches divergent

  • Le cœur de la visualisation du Lorenz attractor est que des conditions initiales extrêmement proches se déplacent d’abord de façon similaire, puis finissent par diverger
  • Grant crée une liste de conditions initiales et modifie la coordonnée z d’un petit epsilon
    • Il commence avec 2 conditions
    • Puis il passe à 10 conditions
  • Il utilise VGroup pour contenir plusieurs courbes
    • Indiquer qu’il s’agit d’un groupe d’objets vectorisés permet d’accélérer le rendu
  • À l’extrémité de chaque courbe, il ajoute un glow dot
    • GlowDot est un objet conçu pour rendre visuellement plus agréable l’affichage d’un point en mouvement
    • Chaque point reçoit un updater qui le déplace à chaque frame vers l’extrémité de la courbe
  • zip sert à parcourir en parallèle des listes correspondantes, comme points et courbes, ou états et couleurs
    • Si les listes n’ont pas la même longueur, l’itération s’arrête à la fin de la plus courte
    • color_gradient génère un nombre de couleurs égal au nombre d’états pour faire correspondre les longueurs
  • Lorsqu’il trace les courbes avec ShowCreation, le smoothing par défaut peut déformer la progression temporelle réelle ; pour les parties qui doivent montrer fidèlement la dynamique, il utilise donc une linear rate function
  • Des conditions initiales proches se déplacent presque ensemble au début, puis finissent par se disperser comme si elles occupaient des positions totalement différentes
  • Le Lorenz attractor n’est ni un simple point ni une période ; il est traité comme un strange attractor attiré vers une certaine forme tout en restant extrêmement sensible aux conditions initiales exactes

Code de contournement en mode interactif et effets de scène

  • Pendant la démo apparaît du code « maudit » comme globals().update(locals())
  • Il s’agit d’un contournement temporaire pour éviter, dans l’environnement d’embed IPython de Manim, le problème où une fonction ne voit pas les variables de la portée externe
    • Dans un script Python classique, le même code fonctionne normalement
    • Dans l’environnement interactif embarqué de Manim, un NameError peut se produire
    • Le problème est contourné en injectant les variables locales dans le dictionnaire des variables globales
  • Une telle approche serait inappropriée dans du vrai code de bibliothèque, mais le risque est relativement limité dans une session interactive temporaire de développement de scène
  • Une meilleure approche consiste à faire recevoir explicitement aux fonctions les variables nécessaires en paramètres
  • Pour faire disparaître progressivement une courbe au fil du temps, on peut utiliser FadeOut
    • Si le run_time de play est aligné sur le temps d’évolution, la courbe devient progressivement transparente pendant cette durée
  • L’effet de traînée derrière un point est implémenté avec TracingTail
    • Il permet de créer une queue qui suit un point
    • Si l’on augmente time_traced de 1 à 3 secondes, la traînée couvre une durée plus longue
    • En ajoutant une traînée à chacun des 10 points, on voit bien plus nettement la dispersion des différentes trajectoires

Caméra 3D et gestion des formules

  • Les scènes Manim peuvent par défaut utiliser des coordonnées 3D, mais la plupart des scènes de 3Blue1Brown sont construites pour ressembler à un tableau 2D pour des raisons pédagogiques
  • Le Lorenz attractor nécessite toutefois de la 3D, donc des axes 3D sont ajoutés
  • En 3D, un effet de rotation ou de déplacement lent de la caméra est utile pour conserver la perception de profondeur
    • Grant utilise un raccourci qui enregistre la position actuelle de la caméra dans le presse-papiers
    • La frame de la caméra est animée vers une position précise avec une forme comme frame.animate.reorient(...)
  • Les formules peuvent être ajoutées à la scène comme objets LaTeX
    • Avec MathPix, on peut OCR une équation affichée à l’écran pour obtenir du LaTeX ou du SVG
    • Pour fixer une formule à l’écran dans une scène 3D, on utilise fix_in_frame
  • On peut appliquer des couleurs à certaines variables d’une formule LaTeX
    • Dans l’exemple, x, y, z reçoivent chacun une couleur différente
    • La possibilité de découper le texte en composants mathématiques pour les mettre en valeur ou les transformer est utile pour l’explication mathématique
  • Manim dispose aussi de transforms spéciaux qui font correspondre les chaînes de caractères
    • Des termes comme A^2 ou B^2 se déplacent naturellement vers la même position textuelle à la ligne suivante
    • Ce matching fondé sur les chaînes permet aussi de créer des effets de type anagramme, où les lettres vont vers leurs positions correspondantes
  • Des animations comme flash around ou indicate permettent de mettre en évidence certains caractères ou termes d’une formule

Rendu et flux de production réel

  • Quand la scène lui convient, Grant lance le rendu avec une commande Manim en indiquant le fichier Python et le nom de la scène
  • Le pre-run est l’étape où l’on parcourt l’animation complète avant son utilisation réelle
    • Il permet d’estimer la durée totale
    • Il aide à repérer les erreurs à l’avance plutôt qu’au milieu d’un rendu intermédiaire
  • W est une option d’écriture dans un fichier, et les options liées à Finder servent à ouvrir le fichier de sortie dans le Finder de macOS
  • Le résultat final est rendu sous forme de fichier MP4
    • Grant rend généralement en 4K, ce qui peut prendre plus de temps
    • Le fichier rendu est ensuite importé dans un outil de montage pour être édité
  • L’ancienne manière d’utiliser Manim reposait surtout sur des allers-retours entre le rendu de la scène en ligne de commande et la vérification du MP4
  • Ensuite, à peu près au moment du passage à l’implémentation OpenGL, un workflow basé sur un shell interactif est apparu, permettant de surligner du code et de voir immédiatement le résultat
  • Le workflow concret de Grant repose sur des scripts Sublime Text et sur l’extension Terminus
    • On peut reproduire un comportement similaire dans d’autres éditeurs de texte
    • Un flux du même type peut aussi être mis en place dans des environnements de la famille Visual Studio
  • Pour trouver des fonctionnalités, on peut utiliser les scènes d’exemple, le dossier animation de la bibliothèque et le dépôt GitHub 3b1b/videos, qui contient le code d’anciennes vidéos
  • Grant préfère un autocomplétion plus simple que Copilot
    • Dans Manim, il sait souvent déjà quel comportement il veut obtenir
    • Il lui semble plus naturel d’exprimer ses demandes en code plutôt qu’en anglais

À lire aussi

1 commentaires

 
GN⁺ 2024-10-13
Commentaires sur Hacker News

  • 3B1B fait vraiment un travail remarquable
    Personnellement, ses vidéos YouTube m’ont énormément aidé, et j’aimerais vraiment qu’on enseigne les maths comme ça au lycée ou en école d’ingénieurs

    • Je ressens un peu la même chose. Cela dit, pour beaucoup de gens, on n’apprécie vraiment les maths qu’un peu plus tard, et c’est peut-être à ce moment-là qu’on se tourne vers ce genre de chaîne

  • https://sinerider.com/ mérite aussi le détour
    C’est un jeu créé par un ami qui aide parfois Grant Sanderson sur le travail de 3B1B, une excellente expérience éducative autour des maths où l’on construit des pistes comme dans LineRider, mais avec des équations
    À eux deux, 3B1B et SineRider ont probablement eu le plus grand impact sur mon intuition de la composition de fonctions

  • J’ai trouvé impressionnant le moment où il repère en direct un bug dans le moteur de rendu et trouve même une solution de contournement
    https://youtu.be/rbu7Zu5X1zI?feature=shared&t=693

    • À voir la scène, on dirait plutôt qu’il connaissait déjà les limites de la nouvelle logique de rendu en cours côté backend, ainsi qu’un simple contournement de haut niveau
      Cela reste impressionnant
    • Dans les grandes entreprises, ce genre d’ingénieur pompier-incendiaire peut parfois se faire remarquer : il corrige très visiblement les bugs qu’il a lui-même créés
    • Il connaissait ce bug, mais le développement de ce logiciel n’est pas son métier principal, son vrai métier, c’est la production vidéo
      Le fait de connaître l’emplacement et la cause du problème, puis d’imaginer une solution de contournement en direct, montre qu’il consacre du temps à améliorer ses outils, et pas seulement à l’occasion, mais de manière active
      Je trouve toujours ça impressionnant

  • Je me demandais comment fonctionnait le REPL interactif Python en bas à droite
    Édit : on dirait un workflow entièrement sur mesure : https://github.com/3b1b/videos?tab=readme-ov-file#workflow

    • Il me semble que c’est l’un des rares excellents créateurs sur YouTube qui ne soit pas complètement commercialisé. Ça me fait penser à Mark Rober

  • Après avoir entendu sa voix pendant des années sans voir son visage, le voir d’un coup donne l’impression étrange de tomber en plein dans la vallée de l’étrange, c’est assez drôle

    • J’ai l’impression qu’un bon nombre de créateurs que je suis commencent à montrer leur visage ces derniers temps. Le premier grand exemple qui me vient en tête, c’est le présentateur de Real Engineering
      Dans quelques vidéos récentes, il agit davantage comme présentateur, intervieweur et narrateur
      Comme veratasium, quand le créateur prend lui-même en charge certaines vidéos, ça fait aussi bizarre
      S’il y avait une grande révélation, ce serait vraiment AvE
    • Son discours de remise de diplôme pourrait encore plus te surprendre. Par exemple : https://youtu.be/z7GVHB2wiyg
    • Il a commencé à montrer son visage en 2020, pendant les confinements, pour aider les gens à conserver un lien humain
      À l’époque, une bonne partie des commentaires parlait du nom et de l’icône de la chaîne, et en réalité son œil a bien cette apparence
    • C’est surprenant que tu ne l’aies jamais vu, il est aussi apparu plusieurs fois dans des vidéos de Matt Parker et Brady Haran (Numberphile)
      Cela dit, même dans ces chaînes de niche, les goûts semblent assez variés
    • En particulier, la voix de narration a une meilleure qualité sonore que la voix d’une personne filmée de manière décontractée, et cette petite différence peut sembler assez étrange

  • Sa voix est vraiment excellente. Elle est calme et apaisante, au point qu’on peut le laisser tourner à côté en faisant le ménage et quand même apprendre quelque chose
    Ce genre de créateur mérite d’être reconnu

    • J’ai l’impression qu’une voix comme ça contribue énormément au succès, que ce soit sur YouTube ou en podcast
    • Cette personne est un pédagogue né. Le qualifier simplement de créateur de contenu ne rend pas justice à sa valeur sociale
    • Pour mes goûts, sa voix est trop nasale. D’une certaine manière, j’ai l’impression que cela atténue un peu la rigueur qu’elle véhicule

  • Sa dernière vidéo holographique fait partie des vidéos YouTube les plus impressionnantes que j’aie vues en termes de qualité

  • J’aimerais beaucoup voir une vidéo explicative sur l’algorithme de bridging[1] réalisée avec cet outil
    Depuis 2016, je suis fan de la manière dont cet algorithme est utilisé dans des processus de démocratie participative avec des outils comme Pol.is, et j’aimerais contribuer à améliorer la compréhension des maths qui le sous-tendent
    Si j’avais connu Manim à l’époque du Summer of Math Exposition[2], je me serais certainement lancé
    [1]: https://bridging.systems/
    [2]: https://some.3b1b.co/

    • Je ne savais pas que ça existait. Merci pour le lien, je suis en train de lire l’article en ce moment, et si tu fais une vidéo explicative, je la regarderai volontiers
      Mon site web est dans mon profil, donc si tu en fais une un jour, n’hésite pas à m’envoyer le lien sur les réseaux sociaux
    • Je me demande quelles maths sont réellement en jeu. J’ai suivi le lien [1], mais je n’y ai presque rien trouvé de mathématique
    • Si tu en fais une, je la regarderai probablement. Je suis fan de pol.is

  • Lien vers Manim : https://github.com/3b1b/manim

  • Je suis stupéfait par l’ampleur de la production derrière chacune de ses vidéos. Il mérite largement un bouton YouTube

    • C’est aussi ce qui est frustrant avec YouTube. Produire une vidéo de haute qualité demande une quantité d’effort absurde, de plusieurs ordres de grandeur supérieure à celle nécessaire pour écrire un bon billet de blog illustré
      Comme pour les blogs, si la chance n’est pas au rendez-vous, une grande partie de cet effort est gaspillée. Mais un blog a au moins plusieurs occasions d’être découvert. Il peut remonter en tête de HN, circuler sur X ou ailleurs. Même sur une seule plateforme, il y a généralement plusieurs chances
      À l’inverse, sur YouTube, l’algorithme décide pratiquement en une seule fois. À moins d’avoir déjà un immense nombre d’abonnés, il montre la vidéo à quelques personnes presque au hasard, et si elles ne réagissent pas, c’est terminé