loading...
Cover image for Making math animations and videos with code

Making math animations and videos with code

antogarand profile image Antony Garand ・4 min read

Cover gif by Freya Holmér

I feel like animations are the most intuitive way to visualize and understand certain concepts, making them a great way to share and deepen knowledge on a subject.
Yet, the classic video editors were never intuitive or easy enough to get started, coming from a technical perspective.

As I've been seeing more of these animations recently, I've decided to list the available tools in hopes of trying them out!

Objectives

Here are few awesome animations sources I've seen, and would like to be able to perform using mostly code.

3Blue1Brown on Youtube

3Blue1Brown is probably the most known math channel on Youtube.

His videos are mesmerizing, and the quality of his animations is astounding.

Here are two of the most interesting visualization I've seen from him:

Using color to solve 2 dimensional equations

Freya Holmér on Twitter

I initially found her from her Bezier curve medium post, which has a very visual approach when teaching us these curves.
Sample animation of a bezier curve from the medium post

Since then, I've been following her twitter and she continuously posts interesting visualization of her projects and problems.


Here is a collection with most of her animations for you to explore:
https://twitter.com/FreyaHolmer/timelines/1215413954505297922

Tools

Now, let's talk about the available tools to make our own!

This is in no way an exhaustive list, these are only the ones I've seen and added to my pinboard over time.

Manim (Python)

Source on Github
Manim is the tool built by 3Blue1Brown, and probably the most popular one in this list.

It was built for the very specific purpose of making these awesome animations, and is used by thousands of content creators.

Reanimate (Haskell)

Source on Github

Reanimate wants to be a library similar to Manim, but with a twist: It's made in Haskell! It is a lot less popular than Manim for obvious reasons, but does look very promising.

This tool would be a great way to play with Haskell and to perform simple, pure animations easily.

Sample animation made with Reanimate

MoviePy (Python)

Source on Github

MoviePy is mostly a video editing tool, but when combined with the power of the Cairo vector library, it can make very interesting animations, such as this funky pentagon made with only 30 lines of code!
Animation made with MoviePy

Html5 Canvas (JavaScript)

Since there are already lots of tools to animate canvas, such as D3.js, PaperJS or FabricJS, you could use these tools to perform your animation and then record the canvas or use a tool such as Editly to save it from the CLI.

This also means it's easier to make and share an interactive version, and possibly easier to debug it as it relies on a real time feedback loop.

The major issue I see using a Canvas is the lack of easy 3d support when compared to other tools, as well as a smaller base to start with.

Blender

Website
Blender is probably best known for its 3d modeling capabilities, but it can also do animations, video editing, 2d and 3d models. With its powerful scripting capabilities, there isn't much it isn't able to do!

Using tools like Primer makes it easier to make statistics and environment related videos, like the ones on the primer youtube channel.

[Soon] Shapes (C# - Unity)

I've discussed Freya earlier in the objective sections, with her animation style and quality as an inspiration for this post.

She is working on Shapes, and while it isn't released yet, nor will it be free at first, it already had its quality demonstrated with the animations built with it.
It integrates with the Unity engine, which is a very different approach than the other tools, and absolutely merits a mention.

It should be released within two weeks according to a post on twitter, but will be limited to her patreons.


Conclusion

Math animations are awesome, and the tooling for everyone to make their own is available!

Do you have any other sources of these I should be aware of, or perhaps other tools I've missed? Please leave them in a comment so I can check them out!

To end this, I couldn't do this post without linking to the math section on the explorabl.es website, which lists dozens of very interactive tools for various math concepts.

Posted on Apr 30 by:

antogarand profile

Antony Garand

@antogarand

Security enthusiast, FullStack developer, challenge solver

Discussion

markdown guide
 

Oh, the Editly concept is very interesting.

Some tools suggestions.

Handbrake allows you to convert the output to any format you need. If your tool outputs video on the right format you'll be good to go, but if it's slightly off I would suggest using this tool, because video codecs and file formats are still a bit tricky.

In the same way Editly is a non-linear video editor, Natron is an open source non-linear video editor, it's a GUI app but it accepts Python code in some boxes for the parameter values, so maybe one can put some ingenuity in linking the values.

The project needs some help in maintaining, but it works well enough that it allowed me to make some loops for a "30 day project" in January last year (just trippy loops, nothing mathy).

As coding tools go, It sounds weird to suggest Scratch it but the site lends itself to be visited by people looking for learning, so that's that.

A couple tools i found it werid not seeing mentioned in the article: Processing/p5.js and Shadertoy. I think they are well known enough to not require much description.

And the old weirdness from the early 90's (latest beta 2017, project is extremely stable): POVray. It's a 3D ray tracer tool with a scene description language. That means you describe the 3D scene by defining objecs in it in such language (it looks kind of like CSS). By itself that language does not lend to what you would call programming but it has a preprocessor that allows for conditional parsing, looping, and animating, and that does the trick in the end.

 

Great post! I'm starting to learn how to use the manim library you referenced, live on Twitch!