Some time ago i tried to start toying around with making some of those beautiful programming/math videos you see on internet. Like the ones from 3blue1brown, Freya Holmér or Sebastian Lague. I tried the big names in the space, Motion Canvas, Manim and p5.js but none of them checked all the items in my list.
Both Motion Canvas and Manim made you download a lot of dependencies and build some others just to start playing around. Manim has an online playground but is just a Jupyter notebook that takes a while to start. Here is where i believe p5 wins. Along its lovely and open comunity, you can just browse to the p5.js editor and start playing. The problem is that p5 its geared towards interactive experiences where i wanted more of a keyframe animations like the others.
The easiness of p5 (or something in those lines) and the paradigm of Motion Canvas and Manim. That was the goal. First i started doing some things with lua and rust in an attempt to have a single binary file and dont have to build and download a lot of dependencies. Then i lost motivation and didnt like lua that much, it was just beacuse it's the default standard for embedded languages. Then i tried some more with javascript + rust but at this point i thought Why not do it fully in the browser?. It turns out you can export video using something like mediabunny.
This is what was born out of this journey. Its still in an alpha/beta state. Lots of things missing and probably lots of edge cases i missed. And thats without counting the bugs.
But you can have something like this made entirely in the browser. You can read and play around in the full editor. Or you can continue reading for some details and documentation.
Animations are defined in Scenes. A Scene is nothing more than a .js file with a default exported class that matches the following interface.
Lets create a very basic one that will run for 1 second and print the current time in the center of the screen of size 1920x1920 pixels.
Now lets try to make one that will do the following: Move a circle from left to right in the span of 1 second. Wait for one second. Move the same circle from top to bottom in the span of 1 second.
As you can see from the code, we are not winning nothing over p5 or motion canvas with this. Here is where our first abstraction enters the game. DefaultScene. It allows you to have some default things that eases you common tasks.
First of all it defaults to a canvas of 1920x1080 with white background. If you dont like it, you can override the width, height, background properties in the constructor.
It also has some basic functions to handle animations timelines
A frame is nothing more than an object with the at property that sets when the animation should start playing, and a endTime property that returns when the animation finishes.
The scene also has the capability of adding custom widgets. They are nothing more that objects with a update(t) and draw(ctx) methods. Update will be called each time a new frame is requested with the wanted time. And draw will be called to draw it to the canvas.
Along this it also provides basic widgets implementations to create: Circle, Polygon, Rectangle, Image, Text
All property from this objects allows you to call a to method that will return a frame object that plays nicely with the play method.
Or you could set them to an object that implements the following interface. If you have a single function you can call the TimelineFunction
Now lets see again the animation from the beginning where i think it provides an example of all these things:
There are a lot of things to do currently, here is just a few of them that i have in mind to do eventually. If i dont lose motivation again. This arent in priority order.