教育用アニメーションを作成するためのフレームワーク

Question

何度も、私は単純な教育用アニメーションを作成するためのソフトウェアが必要であることを知りました。これらのアニメーションでは、一連の単純なアニメーションを1つずつ描きたいと思っています。

たとえば、n-queens問題のバックトラッキングアルゴリズムがどのように機能するかを示したいと思います。その場合、私はチェス盤を描き、左上の四角にクイーンを描き、それの隣にある正方形の上に別のクイーンを描いてから、最初のクイーンが脅かされなくなるまで2番目のクイーンを降ろしてから、第3クイーンなど。this page、たとえばJavaアプレットを参照してください。

私はウェブ上で見つけたカジュアルな無料の視覚化フレームワークで、そうした種類のプログラムを作成しようとしました。 processing.orgやさまざまなHTMLキャンバスのラッパーがありますが、欠けていた主なものは、私のコマンドに従ってアニメーションを表示/指示するオブジェクトです。

たとえば、「クイーン」という名前のオブジェクトを作成した場合、そのオブジェクトは画面に描画され、クイーンのように移動する必要があります。

1. クイーンオブジェクトへのイベントのディスパッチ（ユーザーがその上にカーソルを置いたときに色を変更したい場合）。
2. クイーンオブジェクトを画面に描画します。

だから私は、メインループでフォームのコードを自分自身を記述する必要がありました：

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

これは醜いと繰り返しです！

アニメーションフレームワークは自動的に自分自身を画面に描画するオブジェクトを使用することができます（交差点を解決するためにz軸を定義するとします）。ユーザーの操作に応答します。私の想像上のフレームワークのコード例は次のようになります。

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

女王をアニメーション化するとき、私は単純に新しい女王を作成しますし、いつ、どこでブリットのに約あまり気にせず、それを周りに移動する移動機能を使用しますそれ。フレームワークは私のためにそれを処理する必要があります。つまり、

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) 

このフレームワークのその他の機能は、ウェブに適しています。つまり、javascriptまたはflashまたはJavaです。そして、それは自由になるだろう。

このような（または同様の）フレームワークは存在しますか？

Answer 1

Flashの表示アーキテクチャはオブジェクトに基づいているため、このようなことに非常に適しているようです。このようなことを非常に簡単にするFlash用のアニメーションライブラリもいくつかあります。

たとえば、組み込みのSpriteクラスを拡張したクイーンクラスを定義したとします。 2第2の期間にわたり女王を作成して移動するTweenLiteライブラリ、コードを使用すると、次のようになります。

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