三角関数とFLASH

私が4年くらい前、FLASHを触り始めの頃にしばらくハマっていた計算式。数学の教科書を開いて見てください（＾＾；

まずは、下記のサンプル。

四角のオブジェクトが空間的に円状に動いていると思います。このような計算は、Sin（サイン）, Cos（コサイン）, Tan（タンジェント）などの、いわゆる三角関数を使って表現することができます。

//初期値
var i=0;//角度の初期値
var div=5;//角度の増源値
var radiusX=80;//横の半径
var radiusY=50;//縦の半径
var DivRadius=20;//縦の半径のずれ
var MaxXScale=100;//最大Xサイズ
var MaxYScale=100;//最大Yサイズ
var MaxAlpha=100;//最大アルファ値
squareMC.onEnterFrame=function() {
//角度調整
i+=div;
//係数の計算
divSin=Math.sin(i/360*2*Math.PI);//0→1→0→-1→0
divCos=Math.cos(i/360*2*Math.PI);//1→0→-1→0→1
//オブジェクトの位置調整
squareMC._x=divCos*radiusX;
squareMC._y=divCos*radiusY+divSin*DivRadius;
squareMC._xscale=(divSin+2)/2*MaxXScale;
squareMC._yscale=(divSin+2)/2*MaxYScale;
squareMC._alpha=(divSin+2)/2*MaxAlpha;
}

三角関数、数学で習いましたよね。覚えていますか？覚えていませんよね、きっと。私もFLASHを触るまで、まさか、また三角関数の勉強をすることになるとは思っていませんでしたから（＾＾；

まぁ、とりあえず、細かい部分の説明は話して、ズバリ要点を説明します。

ポイントはココ

i+=div;

この計算式で分かるように、「i」という値は常に増加を繰り返します。この数値が角度を表す係数。

ポイントとなる計算はココ。

divSin=Math.sin(i/360*2*Math.PI);
divCos=Math.cos(i/360*2*Math.PI);

この計算式に「i」という変数が含まれていますよね。

これが毎回変わることによって、「divSin」と「divCos」の値が変化します。

どのように変化をするか。

divSinは、0→1→0→-1→0
divCosは、1→0→-1→0→1

と変化していきます。

図で示すと下記になります。こんなグラフ、一度は見たことありますよね、きっと。
赤線がsin、青線がcosになります。

つまり、角度を表す係数「i」がいくら増加しても、「divSin」と「divCos」は「1」～「-1」までの数値を返してくれます。この係数を使ってオブジェクトのプロパティに変化をつけているわけです。

あとはスクリプトを見てもらえれば分かると思いますが、各プロパティに、三角関数の係数を掛乗算させたりして計算しています。

ただ単純にX座標とY座標が同じように動いてもちょっと芸がないので、Y座標に対しては、軸がずれるよう少し計算をアレンジしています。

squareMC._y=divCos*radiusY+divSin*DivRadius;

三角関数、いろいろな場面で使用すると複雑な動きも表現できると思います。お試しアレ。

⇒サンプルファイル
※FLASH MX ドキュメントで保存

この記事をブックマークしておく