A screenshot of the GUI that we built with a small project

Manim Manager

Inspiration

3 Blue 1 Brown is a content creator that makes math videos with stunning and intuitive visuals and animations, and to accomplish this goal he wrote and published a library known as manim (math animation). The animations that this library renders out, if done correctly, are extremely useful and helpful for understanding if used effectively.

Manim is an open source library, but the documentation for it is fairly poor, and it's not particularly intuitive to use. If anyone wants to create a manim scene, they would need to learn how to use Python, then try to comprehend the documentation for manim, which is a large burden for anyone who doesn't already have some of the required skills. So to address this issue we decided that we would try to create a simple and easy to use GUI that could generate manim scripts.

What it does

Our program is mostly a frontend program with a small backend to generate the python code to give to manim to render scenes. The user adds the manim components that they want in a scene, and adds animations to those components. Then the user can update some parameters associated with each animation and component and then generate a script that the user can use to render a manim scene.

How we built it

Our program is built using Javascript/HTML/CSS. The frontend uses React to run on the client machine without needing to contact a server, and the backend is written entirely using Javascript.

The frontend has 5 panels that each contain different things, such as component properties, a scene timeline, a preview window etc. This allows the user to create and edit their manim scene to how they want it to look.

The backend in this program isn't technically a backend. All it contains is a few object definitions and generators to create python code. However, for simplicity sake I will be referring to it as a backend. The backend holds all the definitions for the supported manim objects and animations, as well as the containers for those objects. The backend also has a generate function which generates the python code needed to render out the manim scene.

Challenges we ran into

How to organize data in the project

This was a large issue that we ran into while working on our project, and our solution to this problem frequently changed while we were working. One solution we came up with was to only allow 1 component on screen at any given time. This solution would make it easy to generate the code, but it also reduced the utility of our project to almost nothing. Another solution was to allow 1 component on screen, but allow the user to layer multiple sequences of components on top of each other. This solution would have been extremely powerful and allowed the user to do more with our program, but currently there isn't a simple way to generate manim code to do this.

We ended up settling on a solution where the user can add as many components as they want, and they can associate certain animations with specific components. While this does make the program less user friendly, it makes it so that the program can generate the python script more simply and more reliably.

How to create a fast preview of the scene

Trying to get a preview of the scene working is still something that we're planning on working on even after HackGT. Having a good preview is useful for our program, as it would allow users to more quickly spot and correct errors and make it easy to visualize what's happening in a given scene. However, without simply rendering a given frame using manim, it's quite difficult to create an accurate preview. While we do have an implementation of this in our project right now, a few major issues that we're having are handling all the properties that manim components have, as well as converting between JS coordinates and Manim coordinates.

How to get all of the code working well together

The biggest problem that we have right now is that the code is somewhat buggy and unstable, even though its only frontend code and a simple generator in the back. There's a lot of inconsistency with how similar GUI components are implemented which causes some bugginess, as well as some general unstable code as our team is still somewhat inexperienced. Another thing that adds to this issue is that the generator code and the frontend code were developed almost entirely independantly, and there was less communication between team members than we would have liked.

Accomplishments that we're proud of

One thing that we're very proud of is that many sections of our code work quite well. This includes adding components and animations to our manim scene, as well as the backend python code generation.

Another thing that we're proud of is the GUI for the program. While it isn't super pretty or polished, it works reasonably well in many areas, and (in my opinion) looks somewhat pleasing to the eye.

What we learned

One thing that we learned is how to work with React and Javascript. At least for me (the one writing this), the languages that I've worked with historically are Java and .NET Languages. Working with Javascript, HTML, and CSS was completely new with me, and especially given the rising popularity of Web technologies this was a valueable skill to have started developing.

Another thing we learned is how to work on large projects with multiple members. Some of these skills include using git for collaboration, creating a high level diagram for how the project will be organized, as well as interfacing with code that isn't your own. While our project doesn't do this super well, it was a very useful learning experience, especially for future projects.

We also learned what its like to work on zero sleep 💀

What's next for Manim Manager

As of now, our plan is to rebuild Manim Manager so we can have a more stable codebase. Some of the code from this version of it may be refactored and then reused in this new version, but for the most part we'll be using this as a learning experience so we know what to do for the next versions of Manim Manager.

We're also planning on adding more components and animations to Manim manager (namely adding grids) so that users can create even more stunning visualizations in Manim.

Happy Hacking!

-Team CS is just Applied Math