数学を使ったJavaScriptコーディング [Edit]
投稿者：野中 文雄 | 投稿日：2014.07.30 | [CreateJS][HTML5][野中ゼミ]幾何学的な計算や物理運動を表すには、数学の知識が求められます。もっとも、計算は必ずしも難しい訳ではありません。考え方さえわかれば、応用できることが多いです。ここでは、一見難しそうなベクトルの外積と微分のふたつについて、その使い途と考え方をリンクでご紹介します。また、ビデオ映像やjsdo.itのサンプルも掲げました。
01 ベクトルの外積をどう使うか
ベクトルの中でも「外積」は、考え方のわかりにくい計算です。いきなり概念を捉えようとすると難しいので、何に使えるのかを知ることから始めましょう。
01-01 珍味ベクトル外積3種盛り
2014年1月18日土曜日に催された第12回Creators MeetUpで、2次元のベクトルに絞ったインタラクティブなサンプルを例に、外積がどう使われているのかをご紹介しました。USTREAM録画も公開しています。
サンプル001■立方体をマウスポインタの位置に応じてx軸およびy軸で回す
サンプル002■インスタンスをドラッグする勢いで加速して回す
01-02 平面上の2直線の交点を外積で求めるサンプルコード
平面における2直線の交点は、直線の方程式を連立して解くことができます。ただ、その場合は傾きによる場合分けをしなければなりません。ふたつの直線をベクトルとして外積で考えると、一般的に交点が導けます。本稿では、この外積から交点がどのようにして求められるか、そのサンプルコードをご紹介します。
サンプル003■平面上の2直線の交点を外積により求める
02 位置と速度と加速度を微分の関係として捉える
物理的な運動は、位置と速度と加速度で扱われます。そして、位置と速度、および速度と加速度の間には微分で導かれるという関係があります。
02-01 速度から位置を決めるアニメーション ー 微分により運動を考える
物理的なアニメーションを表現しようとするとき、直接位置を計算しようとするより、速度から導いた方が複雑なアニメーションも簡潔に表せたりします。これは数学的には、微分により物体の運動を捉えていることになります。微分の計算そのものはしなくても、考え方を知るだけで見通しはよくなり、応用の幅も広がます。なお、このノートの内容をかいつまんでご紹介した15分間のUSTREAM録画もご参考までに添えます。
02-02 バネのような動きを加速度から定める ー オイラー法
バネが伸び縮みするアニメーションは、「単振動」と呼ばれて三角関数で表すのが定石です。けれど、バネの端をもって振り回すような動きは、加速度にもとづく式で扱うのが便利です。この式は「オイラー法」という数学の考え方から導かれます。
サンプル004■マウスポインタを追って伸び縮みするアニメーション
02-03 等速円運動を三角関数の微分で表す
等速円運動は、多くの場合三角関数で表します。その場合、運動の式を位置の動きで立てるほかに、速度の変化で扱う考え方もあります。後者は、数学的には「微分」で導かれる関数が使われます。解説では先にJavaScriptコードを示し、数学の考え方は興味ある読者のために後で説明します。
サンプル005■等速円運動を位置と速度それぞれの方程式で表す
