3. Rotations and Transformations

Before we dive deeper into manim, it’ll be a good idea to organize our workflow. Keeping the python files in the root directory can get messy and confusing after a while. Create a folder, manim-intro, and from this point onwards, we’ll put all our files inside this folder. (Remeber how we exported the path at the end of the first tutorial, this was the reason).
Tl;dr: Our working directory now is manim/manim-intro/

All the geometric shapes, including the one that we used in the previous program (Circle, and Square) are defined in manim/manimlib/mobject/geometry.py, you’ll come across mobject often when working with manim; it stands for Mathematical Object. Most of the shapes that we’ll deal with are actually VMobject or Vectorized Mathematical Object. VMobject in itself is a mathematical object (We’ll encounter another sub-classification of mobject – TextMobject in the next tutorial).

Mobject has some attributes associated with it. Most trivial of all, that we’ll be using most of the time is move_to. Check out the following example:

python3 -m manim move_to_example.py MoveToEx -p

PS: From now on, I’ll not be explicitly stating the command to render animation. And from next post, we’ll create one file for each tutorial with multiple classes in it.

You’d observe that this time the circle is not created at the centre, but slightly towards the right. That is credited to the move_to attribute invoked at line 6. You’d notice that we used a rather bizarre way giving the coordinate. UP, DOWN, RIGHT, LEFT are defined in manim/manimlib/constants.py and employs simple vector addition. That is if you want to move a mobject to, say (-4, -3), you’d do <mobject>.move_to(4*LEFT+3*DOWN).

We know that self.add(<mobject>) adds the respective mobject to the Scene. Whereas with, you’d see the mobject being created on the Scene. A similar method is self.play(GlowFromCenter(<mobject>))(Try it out and see what it does). Most of the methods in manim are named appropriately, so as to convey what they do; this naming convention plays out nicely when you come across the function you don’t know.

Now let’s take a look at ApplyMethod.

You see the animation of the circle, being created at centre and then moving to bottom left-ish corner. As apparent from the name, ApplyMethod applies the method move_to to the mobject : square. The parameter for move_to is given as a second argument in ApplyMethod, generally, it’s, self.play(ApplyMethod( mobject.method_name, method_args ))

Rotation

Rotating a mobject is the same as moving it. That is, you have two options, either rotate it before putting it to the scene (you’ll see the rotated object) or actually see the rotation on the screen. Either way, you’ll have to use the rotate function: <mobject>.rotate(<radians>). Try replacing the square.move_to(2*RIGHT+3*UP) to square.rotate(3), the angular measurements are taken in radians.

Transformations

Transformations take place from one mobject to another, i.e a Circle can be transformed into a Square. Therefore, this time we will have to create two mobjects, deviating from the naming convention to avoid monotonicity, I’ll rename Square mobject to s1 and Circle mobject to c1.

To transform square to circle, we first have to add a square to the scene. Since the transformation is just for the visual appeal, it makes sense that it happens on the scene. Unsurprisingly, it takes two arguments. The syntax (line 8) can be generalized as:
self.play(Transform( <mobject_from> , <mobject_to>))

There’s a lot more to transformations and even more to shapes (colour, solid, opacity and so on). We’ll explore them as they come – but if you’re curious, snoop around geometry.py and with some trial and error, you’d find something. For now, play around with these functions. In the next tutorial, we’ll start with TextMobject (Text Mathematical Object), therefore, make sure you have latex installed and after that tutorial, we’ll start recreating this video.

2. Creating the first Scene

In manim’s root directory, create a new python file, called first_scene.py and write the following code in it:

The first line basically imports everything form (aptly named) big_ol_pile_of_manim_imports, this is done so that, as stated in docs inside the same file, “While creating animations for videos, it can be very nice to simply have all of the Mobjects, Animations, Scenes, etc. of manim available without having to worry about what namespace they come from.”

In the third line, FirstScene class inherits the scene class; I’ll get into the details of scene class later, but for all our practical purposes, all classes that consist of animation objects must inherit from scene class (is-a-relationship |i.e FirstScene is a scene ).
If you get the error: That scene is not in the script that probably means that you forgot to inherit scene class.
Similar to inheriting scene class, the construct method (line 4) is (sort of) mandatory. Think of it as __init__(self).

We created the scene inheriting the Scene class, we will push the animation to the scene from within the def construct method.

At line 9 we created an object circle of the Circle class (which will create a circle on the scene – didn’t see that coming, did you?) note that the circle is just created, it has not been pushed to the scene yet, that’ll be done later – in the next line.

Finally, in line 10 we pushed the circle to the scene.
self.wait(2) is self-explanatory. Just after the last frame to the rendered video.

Now, before running it, make sure your virtual environment is activated (if you’re using one). To render the video type

python3 -m manim first_scene.py FirstScene -p

You’ll be greeted with this sweet little video

If you’re getting ModuleNotFoundError: No module named 'cairo' error, it means that the venv is not active

Now we’ll look at the command used for rendering the video
The first part, python3 -m manim is calling the manim module, what’s interesting is the latter part, first_scene.py is the name of the python file in which you’re working, and FirstScene is the name of the class which is the subclass of Scene. In other words, FirstScene is the name of the class consisting of the construct method and animation object to be rendered.
-p is for preview. It’ll automatically play the rendered video in your default video player. Later on we’ll be using -pl which basically means to render the video in lower quality and subsequently open. Try removing this option and see what happens. (Hint: You’ll have to navigate to media directory)

The video that we’re gonna replicate in this series will consist of many classes, like FirstScene, that is, each scene will have its own separate class (which in turn will inherit Scene). All the scenes for a video will then be stitched together to make a video with some sort of video editing software.
Think of it as a theatre play — after each scene, the curtains are drawn Similarly, in this case, after each Scene the current class’ objective will end and a new class will begin.

Let’s create one more class in the same file so that there’s no room for doubt on what’s happening. Write the following code in first_scene.py.

And render the video by

python3 -m manim first_scene.py SecondScene -p

If you didn’t understand why we used SecondScene in the above command, re-read this post. If you did understand it, then you’re all set for the next post.

PS: If you’re wondering about line 17, don’t worry, we’ll explore that in the next post.

1. Installing manim

For this demonstration, I’ll be using Fedora 29 as well as Ubuntu 18.04. The steps should be similar for any Linux distribution and/or mac.

The first step would be to clone the manim’s repository form https://github.com/3b1b/manim

$ git clone https://github.com/3b1b/manim.git

Before we start installing the python packages, we need to satisfy some prequsite, namely cairo, latex, ffmpeg, and sox. A very brief and unjustifiable description of the four is given below:

cario: 2D graphics library
latex: A high-quality typesetting system
ffmpeg: Rendering videos
sox: Sound Processing

To install the prequsites  in Fedora:

$ sudo dnf install cairo-devel ffmpeg sox texlive-scheme-full

Similarly, in Ubuntu:

$ sudo apt install libcairo2-dev ffmpeg sox texlive-full

For the sake of convenience, I’ll be using a virtual environment. It is optional, If you think it is too much, you can skip to pip installation.

To create a virtual environment make a new directory, envs where you cloned manim. Then execute:

$ python3 -m venv manim-venv

That’ll create a new directory manim-venv,  once that directory is created, activate the virtual environment using

$ source manim-venv/bin/activate

Once that is done, enter the manim directory (for me it’s ~/Documents/manim) and we’re ready to install the python libraries.

(manim-venv) jarwin@MilleniumFalcon:manim $ python3 -m pip install -r requirements.txt

if you didn’t go with virtual environment, it’ll look like:

jarwin@MilleniumFalcon:manim $ python3 -m pip install -r requirements.txt

If everything goes right, you’re all set, but since we live in a chaotic universe, it is unlikely that odds will turn out in our favour.


The two errors that I faced while installing were based on cario and latex. Namely,

Exception: Latex error converting to dvi. See log output above or the log file This error indicates that the latex is not installed and/or required packages are not installed in latex. Instead of trying to work my way around it, I just installed texlive-scheme-full, but if you don’t wanna do that, you can see if all the packages mentioned here are installed.

The second error that I got was on cario. Absentmindedly, I was trying to install pycario without a cario backend in my system and was greeted blissfully by:

Error on pycario: failed with error code 1 in /tmp/pip-install-mgw5hikm/pycairo/


To check if the installation was successful, go to manim’s root directory (cross your fingers) and run:

python3 -m manim example_scenes.py SquareToCircle -l

If everything is working, then you should see the video of square transforming into a circle. The video will be saved in manim/media/videos/example_scenes as a .mp4 file.
(As you would have guessed, each python file will have its separate folder inside the media directory).
If you don’t see the video, that means something’s wrong with your installation process, retracing your steps or starting again would be a good idea.

Finally, there’s just one last thing that we have to do to make it more convenient for us to start away. In lieu of a recent pull request, we will add the current manim directory to PYTHONPATH. (I’ll explain why we’re doing it in the next tutorial)

For Fedora & Ubuntu, to add manim repo to PYTHONPATH, execute:

echo "export PYTHONPATH=:~/Path/to/manim" >> ~/.bashrc # for bash
or
echo "export PYTHONPATH=:~/Path/to/manim" >> ~/.zshrc # for zsh

With all the housekeeping out of the way, we’re now actually ready now start rendering videos in manim. Follow along to the next tutorial.

0. Getting Started with manim – Motivation

If you’re here, you probably know what manim is: it’s the animation engine used by Grant Sanderson to create exploratory mathematical animations for his YouTube channel 3Blue1Brown. I won’t be getting into the history/details of manim; if you’re interested to know about it, go to 3blue1brown.com and explore (I would suggest you also take a look at 3b1b’s patreon page).

Cutting right to the chase, getting started with the newer version of manim is comparatively easier than the previous version.

Cutting right to the chase, getting started with the newer version of manim is comparatively easier than the previous version. For this series we will be using the git commit ac903024.

After cloning manim from https://github.com/3b1b/manim do a quick git checkout:


$ git checkout ac903024

This is similar to using specific version of a package, just to maintain consistency throughout the tutorials.

Setting up manim is explained in the next post and working with it in the subsequent posts.

With all that housekeeping out of the way, we’ll now shift our focus on creating some fancy math animations.
As is with any new tool, just knowing about the different features falls short unless those tools are actually used in a project (or maybe that’s just me), Therefore, in this series we will recreate the following video, and, as the old adage goes, we’ll dissect that code when we’ll come to it.

The motivation for animating transformations is that it’s one of those fundamental topics in mathematics whose geometric interpretation is often overshadowed when compared to its algebraic counterpart.

That being said, what I’ve chosen to animate here might not be of particular interest for all, but nevertheless, it’ll cover most of the basics concepts required for getting started with manim.

The goal of these subsequent blog posts is not to make the reader understand a specific topic in mathematics. Instead, we are using the said topic as a bird’s eye view for exploring the basics of manim.

If you just want to follow and you’re not a big fan of transformations (or mathematics), it would not make a difference. ( There won’t be any mathematical notations (or concepts) in the series The math involved lies in the rationalization of why the animation/objects were chosen for this topic – which won’t be covered in this post – may be in future I’ll write a separate post about it)

For all our practical purposes of this series, we’ll be rendering the video shown above.

The categorization for this series is as follows:

  1. Installing manim
  2. Creating the first Scene
  3. Rotations and Transformations
  4. Writing Texts