Tuesday, June 16th, 2009
Doodle: Sprite library for Canvas
Category: Canvas
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 r = 5;
-
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...
Related Content:
Impressive :)
There is no mention of support for Safari. Why is that?