Canvas commons for web animation

Making procedural canvas a tool for websites.

Motion canvas, along with its more modern fork Canvas commons, are powerful and delightful procedural animation tools. These tools (henceforth referred to as a procedural canvas) have been written to be used for AOT rendered animation. I have wanted to use them for live web animation something they are not designed for. This blog details how I hacked around with the internals to finally get it working.

To set the stage, I tried opening the basic example from the quickstart page expecting the code to work when putting it into a website. This did in-fact not work. Taking a look at the types here I noticed that makeScene2D() does not return a Scene, rather it returns a description of a Scene.

 1 const desc: DescriptionOf<Scene2D> = 
 2   makeScene2D(function* (view) {
 3     const myCircle = new Circle({
 4       x: -300, width: 140, height: 140,
 5       fill: '#e13238',
 6     });
 7 
 8     view.add(myCircle);
 9 
10     yield* all(
11       myCircle.position.x(300, 1).to(-300, 1),
12       myCircle.fill('#e6a700', 1).to('#e13238', 1),
13     );
14 });

To fix this some serious nonsense was needed. Firstly motion canvas is built on the concept of 'meta files'. I believe this is an idea from Unity that Aarthificial brought over when he started implementing motion canvas. In my implementation I simply do not concern myself with this. Further, despite canvas commons being split into multiple packages, you are in practice forced to add the vite plugin as well as core. For this reason and my stubbornness I decided to try to hack it together. I started by reading the content of the transformer on scenes. From here and a lot of whacking my head against the wall, I came up with the code you see to the left. With this done it is super easy to render a scene.

Following this work I thought it would be fun to have the ability to define scroll animations using motion canvas.

This entire project mainly exists just to be silly, but if you ever want to replicate this sillyness yourself: it is all on my GitHub.

That is all for now, hopefully at some point I will actually write something that isnt this insanely silly...

Source code for this site on Github