MeetUp」で務めた15分間の一席をもとに加筆・補正して、数学的な説明を補ったノートです。そのビデオが公開されましたので、ご参考までに添えます。そのとき使ったレジュメも公開します。等速直線運動ひとつの直線の上を同じ速さで進むのが等速直線運動です。位置(x)は経過した時間(t)に比例して動きます。したがって、初めの位置を0とすると、比例係数(a)を用いてつぎの1次式で表されます。atアニメーションのスクリプティングでは、時間の単位をフレームにすると扱いやすくなります。毎フレーム呼ばれる処理で時間の変数(time)を加算して、上記の1次式のとおり比例係数(param_a)と時間との積をオブジェクト(myShape)の座標(y)として与えればよいのです。time;しかし、等速直線運動をこのように書くことはまずありません。時間あたりの位置の変化つまり速度(ピクセル/フレーム)を予め決めて、フレームごとに位置に加える方が扱いやすいからです。前掲の等速直線運動のスクリプトは、おなじみのつぎの1行で書替えられます。すると、時間をもつ変数(time)も要りません。実際のアニメーションのコードは、サンプル001でjsdo.itに掲げました(行番号はこのサンプルにもとづきます)。一般に、速度(v)は位置(x)を表す方程式の時間(t)による微分(x')として示されます(結城浩「責任を伴う加速装置(前編)」参照)。上記1次式を微分すると定数(a)になります[*2]。この値が前掲スクリプトの速度(velocity)です。この速度を、時間単位が経過するたびに位置に加えれば、運動のアニメーションができあがります。kxnのxによる微分(y')は、つぎのようにxの次数(n)がひとつ減って係数に掛かります。nkxn-1一般に、つぎのようなn次関数f(x)を考えます。各項の係数k0~knは定数とします。微分・積分の考え」1.1「微分係数と導関数」参照)。宙に置かれた物体が重力で落ちる運動を考えます。その位置(x)は時間(t)の2乗に比例して動きます。比例係数(a)を定め、初めの位置を0とすると、つぎの2次式で表されます(「落体の運動」参照)。at2フレームごとに処理されるスクリプトに当てはめれば、カウントアップする時間を変数(time)にして、その2乗と係数(param_a)の積で位置を定めることになります。time;けれどこの場合も、速度から決めた方が扱いやすいでしょう。自由落下運動は2次方程式なので、微分で導かれる速度(v)が時間(t)に比例して増します。Atフレーム単位のアニメーションで考えると、フレームごとに速度に加速度を足し込みます。その速度をさらに位置に加え続ければ、加速度のついたアニメーションが表せます。速度この考え方で書替えたのが、つぎのスクリプトです。アニメーションのコードはサンプル002としてjsdo.itに掲げました。自由落下運動の加速度(acceleration)は定数です[*3]。自由落下運動に加わるのは重力加速度です。m/s2とされています。イーズアウトイーズアウトというのは、目標の位置に近づくほど動きが遅くなるアニメーションです(図001)。目標値と現在値との差に速度を比例させています。インターフェイスなどでおなじみの動きでしょう。比例係数(減速率)には0から1の間の数値を定めます。図001■目標値に近づくほど動きが遅くなるここで注目していただきたいのは、予め位置を求める式は定めていないことです。先に速度の式を決めてしまい、その値を加えることで位置を導いています。このような考え方は、とくに動的に目標値が変わるときに、式が立てやすくなります。サンプル003は、オブジェクト(myShape)がマウスポインタの後を追いかけます。ポインタから離れると速く、近づくほど遅くなるイーズアウトの動きです。オブジェクトの位置は、つぎに抜書きしたとおり、上記のイーズアウトの式をそのままxy座標に用いています(第14〜17行目)。バネのように伸び縮みする動きバネの伸び縮みの動き(単振動)を見せたいときは、三角関数のsinまたはcosを使うのが定石です(図002)。時間(t)あたりに決まった角度(ω)回転する三角関数(sin)の値に半径(r)を掛合わせれば位置(x)が求められます(サンプル004)。つぎの式は、振動の中心位置を0とします。oscillator」サンプル004■単振動このバネの動きを取入れて、オブジェクトにマウスポインタを追いかけさせましょう。動的に目標値が変わるので、微分して速度から位置を決めた方がよさそうです。ところが、つぎのように三角関数を微分しても扱いやすい式になりません。困るのは、目標値と絡められる変数が見当たらないことです。rω・cos(ωt)そこで、イーズアウトと同じように位置の式は置いて、速度から決めることにしましょう。すると、速度は目標値から遠ざかるほど遅くなる、となりそうです。この決まりを当てはめたのでは、目標値から遠ざかったら、速度はかぎりなく0に近づいてそのまま戻ってこなくなるからです。するかというと、さらに速度を微分します。速度の微分は加速度です。加速度は、重力と同じで力と捉えられます。バネの動きでは、目標値から離れるほど、その遠さに比例して戻る力が強まります。これをイーズアウトのときと同じ考え方で、加速度を定める式にします。加速度の式で求めた値は、どうすればよいでしょう。加速度は速度の微分です。その速度は位置の微分でした。速度は位置に足し込みました。同じように、加速度も速度に加えればよいのです。したがって、つぎの式にしたがって係数で調整すれば、バネのように伸び縮みをしながら目標値にたどり着く動きになります(図003)。図003■伸び縮みが減衰して目標値にたどり着くバネのような動き前述のバネの動きの位置を表す式には、三角関数が用いられていました。それを微分した速度の式にも三角関数が表れました。ところが、今ご説明した考え方で組立てた式には三角関数などなく、四則演算だけでバネのような動きができています。これが、微分の「考え方」を使ったスクリプティングなのです。velocityY;サンプル005■バネのような動きgihyo.jp連載「HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う」第23回「マウスポインタの軌跡を滑らかな線で描きながら消す」から2回にわたって、つぎのサンプル006のつくり方を解説しました。描かれる線にバネのような動きを与えるために、サンプル005と同じ処理を用いています(第33〜38行目)。バネの動きの加速度バネの動き(単振動)について、興味ある読者向けに数学的な説明を補います。バネ運動の位置(x)の方程式とそれを微分した速度(v)の導関数は、前述のとおりです(以下の(1)と(2))。(2)一般に、三角関数を微分した式にはやはり三角関数が含まれるので、そのままでは扱いやすくなりません。速度を微分した加速度(a)は、つぎの方程式(3)で表されます。(3)しかし、式(1)と(3)を連立すると、つぎの方程式(4)のように三角関数が除けます。角速度(ω)は定数ですので、この式は加速度が原点と現在位置との差(x)に比例することを示します。前項04で決めた加速度の式は、数学的にも正しいのです。(4)数学的な説明をもうひとつつけ加えます。単位時間ごとに加速度は速度に、さらにその速度を位置に加えるというのは、微分の考え方にはもとづくものの、厳密には微分の近似値を求めています。この近似計算は「オイラー法」と呼ばれます。正確な運動のシミュレーションでなく、物理的なアニメーション表現であれば、誤差は気にならないでしょう。これまで見てきたとおり、計算は簡単で扱いやすくなります。MeetUp」のビデオを追加。