Un cadre pour créer des animations éducatives

Question

J'ai souvent découvert que j'avais besoin d'un logiciel pour créer des animations éducatives simples. Dans ces animations, je veux dessiner une séquence d'animations simples, une par une. Par exemple, je voudrais montrer comment fonctionne un algorithme de retour arrière pour le problème des n-reines. Dans ce cas, je veux dessiner un échiquier, dessiner une reine sur le carré en haut à gauche, dessiner un autre sur le carré juste à côté, puis la seconde reine jusqu'à ce qu'il ne soit pas menacé par la première reine, puis, ajouter le troisième reine etc. Voir this page par exemple applet java. J'ai essayé d'écrire ce genre de programmes dans des cadres de visualisation libre occasionnels que j'ai trouvés sur le web, par exemple. processing.org et divers wrappers HTML-canvas, mais la principale chose qui me manquait est un objet qui montrerait/dirigerait l'animation en fonction de mes commandes.

En traitant par exemple, si j'ai créé un objet nommé "reine" qui devrait être dessiné à l'écran et se déplacer comme le fait une reine. Je devais prendre soin de moi-même de:

1. Distribuer des événements à l'objet reine (si je voulais changer sa couleur quand l'utilisateur passe dessus par exemple).
2. Dessiner l'objet reine à l'écran.

donc je devais écrire moi-même dans la boucle principale un code de la forme:

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

C'est laid et répétitif! Je m'attends à ce qu'un cadre d'animation me permette d'utiliser des objets qui se dessineraient automatiquement à l'écran (disons que je définirai l'axe z pour eux, pour résoudre les intersections), et que j'aurais automatiquement, si je le souhaitais, répondre à l'interaction de l'utilisateur. Un exemple de code pour mon cadre imaginaire serait:

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() 

Lorsque vous animez les reines, je vais tout simplement créer une nouvelle reine et d'utiliser la fonction de déplacement pour la déplacer, sans trop se soucier quand et où blit il. Le cadre devrait prendre soin de cela pour moi. C'est-à-dire:

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) 

D'autres fonctionnalités intéressantes de ce framework, qu'il serait Web-friendly. C'est-à-dire, javascript ou flash ou Java. Et que ce serait gratuit.

Est-ce qu'une telle structure (ou similaire) existe?

Answer 1

Puisque l'architecture d'affichage de Flash est basée sur des objets, il semble que ce serait très bien adapté à ce genre de chose. Il y a aussi un certain nombre de bibliothèques d'animation pour Flash qui rendent ce genre de choses très facile. Par exemple, disons que vous avez défini une classe Queen qui a étendu la classe Sprite intégrée. Utilisation de la bibliothèque TweenLite, le code pour créer et déplacer une reine sur 2 secondes période ressemblerait à ceci:

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});