A framework for creating educational animations

Question

Many times I found out that I need a software to create simple educational animations. In those animations I want to draw a sequence of simple animations one by one.

For example, I would like to show how a backtracking algorithm for the n-queens problem works. In that case I want to draw a chessboard, draw a queen on the top-left square, draw another one on the square right next to it, then the second queen down until it is not threatened by the first queen, then, add the third queen etc. See this page for example java applet.

I tried to write those kind of programs in casual free visualization frameworks I found on the web, e.g. processing.org and various HTML-canvas wrappers, but the main thing I was missing is an object that would show/direct the animation according to my commands.

In processing for instance, if I created an object named "queen" that should be drawn to the screen and move like a queen does. I had to take care myself of:

1. Dispatching events to the queen object (if I wished to change its color when the user hovers over it for instance).
2. Drawing the queen object to the screen.

So I had to write myself in the main loop a code of the form:

def mainloop():
    for obj in DrawableObjects: obj.draw()
def onclick(e):
    for obj in ResponsiveObjects: obj.handleClick(e)

This is ugly and repetitive!

I expect an animation framework to allow me to use objects which would automatically draw themselves to the screen (let's say I'll define z-axis for them, to solve intersections), and would automatically, if I wish, would respond to user's interaction. An example code for my imaginary framework would be:

class queen(DrawableObject):
    def __init__(self,boardX,boardY):
        self.boardX,self.boardY = boardX,boardY
        self.x = square_width*x+square_width/2
        self.y = square_height*y+square_height/2
    def draw(self):
        circle(x,y,radius)
    def move(self,direction_x,direction_y,squares):
        if direction_x
        #this would move the queen slowly to the desired direction
        self.boardX += direction_x*squares
        if self.boardX < 0:
             self.boardX = 0
             return
        #ditto for y
        ...
        #Let's pretend this function is blocking
        self.animated_transpose(
             direction_x*squares*square_width,
             direction_y*squares*squre_height
             )
    def delete(self):
        self.fadeOut()

When animating the queens, I'll simply create a new queen and use the move function to move it around, without worrying too much about when and where to blit it. The framework should take care of that for me. That is:

def main():
    queens = []
    for i in range(8): queens.append(Queen(0,i))
    # find a solution by stupid random walk
    steps = 0
    while queens_threats_one_another(queens):
        queens[rand(8)].move(choose([-1,1],0,1)
        step += 1
    write_to_screen("did it with %d steps"%steps)

Other nice-to-have features from this framework, that it would be web-friendly. That is, javascript or flash or Java. And that it would be free.

Does such (or similar) framework exists?

Answer 1

Since Flash's display architecture is based on objects, it seems like it would be very well suited for this kind of thing. There are also a number of animation libraries for Flash that make this kind of thing very easy.

For example - let's say you defined a Queen class that extended the built-in Sprite class. Using the TweenLite library, code to create and move a queen over a 2 second time period would look like this:

var queen:Queen = new Queen();
queen.x = 100; // based on pixels, but you could easily create a square-to-pixel conversion
queen.y = 100;
addChild(queen); // assuming this code is in another DisplayObject, such as the stage

TweenLite.to(queen, 2, {x:200, y:300});