一連の動きのアニメーション：等速直線運動

前回はランダムな動きをするアニメーションを作成しましたが、今回は一連の動きをする等速直線運動のアニメーションを作成します。
等速直線運動は経過した時間に応じて移動する場所が決定されます。つまりある時間の描写の次の描写の位置は決まっているということです。こうして一連の動きのアニメーションになります。

ここでは描写に用いるdraw関数内でsetIntervalメソッドを用いて描写を動かしています。
描写の開始位置の制御はif文を用いています。今回は描写を行う度に描写開始位置(x,y)が1つずつ増えていき、一定回数の描写を行うと初期位置から描写が再度始まるものです。
一定時間で描写を行う度にその位置を一定間隔で動かし等速直線運動のアニメーションとしています。

今回の描写は20ミリ秒ごとに1ピクセルずつx方向y方向に等速で動いていくアニメーションとなります。