All examples By author By category About

tmcw

slomotion

This is magic that makes canvas slower.

Practically, it's pretty useful for understanding how certain graphics are constructed, since you can see each step, one by one. Or you can automatically have both an 'animated' and still version of your cool visualization.

Technically, it is a hidden asynchronous queue that keeps track of object state so even sync/non-functional programming like ctx.fillStyle = '#ace' can be part of the animation. As such, it replaces all member functions with proxies that join a queue of actions to be run in sequence. At this point, it uses queue to make the queuing a bit easier.

It's somewhat inspired by learnable programming and other such articles.

In order to use slomotion, you wrap an object with it:

// a normal Canvas context
var ctx = canvas.getContext('2d');

// a slomotion Canvas context
var ctx = slow(canvas.getContext('2d'));

slow takes an object to be wrapped, and an optional second parameter for the delay between steps, in milliseconds. It's not specific to Canvas - any object can be wrapped, though there's no special magic or handling for member methods that are themselves asynchronous.