My story with Cubecubed

#webdev #javascript #typescript #motivation

Hello fellow developers on the Dev Community, this is my first post here. Today I want to tell you my journey with Cubecubed - a visualization engine for playing math animations right on the browser. Though it's just a small project of mine, I'm very proud of it. This is not a promotion post for its GitHub repo, but a story I want to tell you.

Manim and Me

Just a little bit about myself: I'm a math enthusiast and a big fan of 3Blue1Brown's videos using the Manim engine.

When I first saw Grant's videos on YouTube, I was so inspired by the quality of them. After that, I learned that Grant used a Python library called Manim to produce those videos. The first time I used Manim, it took me about half a day to just install it on my Windows machine (though Linux is completely ok). I have to tell you, the engine is great, but the installation and MP4 converting process is a pain in the ass. Besides of that, I want Manim to be accessible for everyone, ranging from teachers and students to math lovers like me, especially the ones who don't know how to code, and don't spend time learning it.

So I had an idea: why don't I create a web version of Manim and turn it to a web app? That way, the users can click around, use the UI to achieve exactly the things that can be done by programming.

Let the journey problems begin!

I tried Django. Frankly said, I'm too lazy to learn a whole new framework in a language that I'm not comfortable to work with. But there is a much larger problem: the users spend time creating math animations but cannot view the result immediately. I mean, they use the application and convert their Manim project to an MP4 file; if anything goes wrong they have to go all over again to find the "bug" and have no idea where it is. Even when they fix the "bug", they have to painfully wait for the converting process (and unfortunately, they find more bugs).

I thought, "what can be the solution for both of those issues?" You can make a guess... That's right, the web! The browser is a wonderful place for playing dynamic animations and creating front-ends.

From that time being, I took time to search for promising JavaScript libraries, and spent a lot of time playing with Three.js and Anime.js and GSAP and much more. Some of which are simply bloated for my use case, and the others don't have enough features. Then I met my best friend: d3.js. It's tiny yet powerful, and above all, the 'transition()' method. Paradise!

Publicize my project

In December 2021, the first commit of Cubecubed was pushed to GitHub after a ton of customizations and refactoring. The first cubicons (equivalent to 'mobject' in Manim) were implemented, the name 'Cubecubed' and the project's logo was 'thought-provokingly' created.

Initially, I wrote it in JavaScript, and some people on Reddit suggested me to covert it to TypeScript. I did convert it, with the help of an awesome developer on GitHub (@marvin-j97). I want to give a big thanks to the contributors, along with the people who saw my posts on Reddit and gave me nice words and suggestions to improve Cubecubed.

Here are some showcase videos made by Cubecubed.

And that's it!

Cubecubed is the project that I put a lot of time and efforts into. The making of it is always an enjoyable journey to me. I want to say that, the most important things are not GitHub stars but the time you spend fixing bugs and learning new things.

Have a nice day everyone.