jQuery Animation Matrix

Ever since I first played with Flash a long while ago (in those old Macromedia times...) I've had an interest in basic animation, making objects move around the screen. I guess the experiments by Robert Penner were responsible for getting me into this. Of course, I've never achieved any too interesting thing regarding this, just some lame effects... but anyway, I've lost my time (and had plenty of fun) from time to time over the years doing basic animations with Action Script, GDI+, PyGame, WPF and lately with jQuery.

So what I've been up to lately has been an "Animation Matrix". It's just a Matrix of div elements (well, jQuery objects wrapping those divs) that get added, removed, shown and hidden in different ways. All the animation work is done with jQuery's animate method. As we're animating objects one after another, we have to chain animations, so that once the .animate() for the current object is done it calls a new .animate() on the following object. I do this by having "private" methods that animate the current object by calling its .animate() method and passing to it as a callback this method itself again. I'm keeping the state of the animation (next item to animate) in a private field of the Matrix object, I could have avoided this by using closures, but at a first moment I thought it would turn it more complex. The matrix has some events that are consumed both internally and externally (for the "matrix Orchestrator").
Another point of interest is that for operations where I randomly choose the next item to be actioned, I use a separate array of available items, otherwise, if I were choosing the next item from the normal matrix, once we have fewer and fewer elements left to be animated, I would need tons of attempts to find the next random one... and it would ruin the whole system.

In addition to the matrix, I've also coded a "matrix Orchestrator" class, that receives a sequence of animations to execute on the matrix and runs them n times. It's not much different from what I talk about in this post.

Update, 2011/03/19 After having played around a bit with the Html5 Canvas and its Image Drawing features, I've updated the code so that if you're using a canvas enabled browser (Firefox, Chrome, IE9) you'll see the matrix filled with tiles taken from the image on the right (that's Munich, my next trip destination :-) So, in that case, instead of a Matrix of divs, we have a matrix of canvases, that got filled with this:

myCanvas.getContext("2d").drawImage(img, sx, sy, width, height, 0, 0, width, height);

You can see it in action here

The matrix and matrixOrchestrator classes are in this file.