Tuesday, June 16th, 2009
Doodle: Sprite library for Canvas
Billy Lamberta got tired having to get so low-level as you do with the raw Canvas API. So, he create a small abstraction layer:
Doodle.js attempts to create a fun and easy way to interact with the Canvas that is lightweight, flexible, and functional. While it contains a few shape primitives it is not meant to be a full-fledged drawing api, rather a framework that allows you to build sprites and interact with them in an expressive way.
He gives plenty examples, but here is one that animates the spiral that you see:
var a = 0;
var frame = 0;
dot.loop(function(obj) {
obj.modify({x:circle_x(a),
y:circle_y(a),
fill:random_color() });
frame += 1; //update frame count
a += 10; //update angle rotation
r += 0.3; //update radius
if(a % 15 == 0){ dot.fill = '#000000'; }
else{ dot.fill = random_color(); }
//clear canvas every 800th frame, reset radius
if(frame % 800==0){oo.canvas().clear(); r = 5;}
}, 0, '48fps'); //loop indefinitely at 48 frames/sec
Best part of the framework? How he choose the "oo" convention for the main object:
The “oo” variable was picked because it’s easy to type, easy to remember (d-oo-dle), and easy for our eyes to parse when we look over the code (it only takes a very cursory knowledge of male psychology to understand that).
I was actually surprised that I hadn't already posted on this... or CAKE which I will mention next...
Impressive :)
There is no mention of support for Safari. Why is that?