Motion 1, 三角関数
Nov 14, 2010このエントリーは、アニメーション・モーションを JavaScript で記述するための覚え書きです。いままで実務で使ってきたわざをちょっと整理してみます。
まずは、モーション設計をする上でよく使う三角関数について、おさらいとして触れます。もっともぼくは数学の素養は乏しいので、あやしいところもあるかもしれません。
三角関数おさらい
三角関数を使うと、直角三角形のある角の大きさが定まった時の、各線の長さを求めることができます。

図のように、角度θの時の底辺の長さはsin(θ)、高さはcos(θ)になります。
例えばθが45°の時は
cos(30°) ≓ 0.707
sin(30°) ≓ 0.707(1 : 1 : √2)
60°(上の図)の時は
cos(60°) = 0.5
sin(60°) ≓ 0.8660(1 : 2 : √3 ですね)
90°(垂直線)の時は
cos(90°) = 0
sin(90°) = 1
と、なります。
θに時間軸を与えてsinとcosをグラフに表すと以下のようになります(がんばって canvas 使ってみました)。
クリックすると動きだします
θ = 0
x = 0
y = 0
ctx.beginPath(); ctx.moveTo( center.x, center.y ); ctx.lineTo( center.x + Math.cos(theta) * radius, center.y + Math.sin(theta) * radius ); ctx.lineTo( center.x + Math.cos(theta) * radius, center.y ); ctx.closePath(); ctx.stroke();
ご覧の通り、斜辺の長さ(radius)が一定であると軌跡が円を描きます。これはとても重要な性質です。三角関数という名前ですが、ぼくとしては円を描くためのツールという印象です。
ちなみに JavaScript で三角関数を求める Math.sin()、Math.cos() の引数には、角度ではなく弧度(radian)を用います。弧度の大きさは、ある角度の円弧の弓の部分の長さと定義されています。全円の円周は 2πr で求めることができるので、全円つまり 360° の弧度は 2π となります。
Comments