Tuesday, June 16th, 2009

Doodle: Sprite library for Canvas

Category: 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:


  1. var r = 5;
  2.  var a = 0;
  3.  var frame = 0;
  5.  dot.loop(function(obj) {
  6.               obj.modify({x:circle_x(a),
  7.                           y:circle_y(a),
  8.                           fill:random_color() });
  10.               frame += 1; //update frame count
  11.               a += 10; //update angle rotation
  12.               r += 0.3; //update radius
  14.               if(a % 15 == 0){ dot.fill = '#000000'; }
  15.               else{ dot.fill = random_color(); }
  17.               //clear canvas every 800th frame, reset radius
  18.               if(frame % 800==0){oo.canvas().clear(); r = 5;}
  20.           }, 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…

Posted by Dion Almaer at 5:36 am

3.9 rating from 34 votes


Comments feed TrackBack URI

Impressive :)

Comment by Darkimmortal — June 16, 2009

There is no mention of support for Safari. Why is that?

Comment by HG — June 18, 2009

Leave a comment

You must be logged in to post a comment.