jstarted.com
JavaScript/HTML/CSSのノウハウや覚書を掲載するブログ
2015.2. 2

三角関数を使ったオブジェクトの移動

Category:
Math

三角関数というと苦手意識を持っている人も少なくないかもしれません。高校数学で挫折を味わった僕もその口でしたが、JavaScriptでDOMを動かすのに三角関数を利用しはじめてから、その苦手意識も少しは和らいだように思います。

ウェブコンテンツにおいて、三角関数を使った演出のなかでももっともシンプルなものは、オブジェクトを円軌道で動かすというものでしょうか。今回はその円軌道アニメのさわりを、実際に三角関数を使ったサンプルコードを交えて紹介していきたいと思います。

使用するメソッドと、得られる値

使用するJavaScriptのメソッドは以下2つ。

  • Math.cos()
  • Math.sin()

これらは高校数学の最初に登場する、サインとコサインですね。
いずれもメソッドの引数に角度(ラジアン値)を入れると、その角度についてのsin、cos値を算出してくれるという便利なものです。

これらのメソッドを使用する場合、角度の変化によってsin値、cos値がどのように変化するのかを把握しておいたほうがよいです。対応表はウェブ上にいくつでも見つけることができます。

要点は、

  • sinは0°と180°のときにゼロ、90°のときに1、270°のときに-1を返す。
  • cosは90°と270°のときにゼロ、0°のときに1、180°のときに-1を返す。

となります。

コーダー自身が計算しなければならないこと

計算自体をプログラム側が引き受けてくれるとして、コーダーはあと何を用意し、どう組み合わせれば円軌道アニメを実装できるでしょうか。それは主に以下3点になります。

  1. 軌道となる円の中心座標
  2. 軌道となる円の半径
  3. 中心座標に対する円軌道アニメオブジェクトの角度

1と2については、今回は常に一定とします。もちろんこれらを都度変動させることで、より複雑なアニメを作ることもできますが、ややこしくなるので今回は省きます。
今回変動するのは3のみです。角度の値が1フレームにつき一定数増加していく前提で、角度に応じたオブジェクトの座標の計算を以下のように行います。

pointObj.prototype.move = function (){
  // x値を求める式は、中心座標 - 半径 * 指定した角度のcos値
  this.x = point.x - radius * Math.cos(radian);
  // y値を求める式は、中心座標 - 半径 * 指定した角度のsin値
  this.y = point.y - radius * Math.sin(radian);
};

実例を通して、角度とオブジェクトの変化の関連性を確認する

実際のサンプルコードは以下。これはアニメではありませんが、角度ごとのオブジェクトの動きをゆっくり確認できるように、inputで角度を変動できるようにしています。

See the Pen Object movement using trigonometric functions by ykob (@ykob) on CodePen.

今回の座標計算を応用すれば、単純な円軌道だけでなく、もっと複雑なものも扱えるようになります。速度についての記事にも書きましたが、もっとも基礎的な部分を理解してしまえば、あとはwebに転がっている複雑な数学・物理の式をそのまま引用するだけです。

僕のように数学アレルギーを持つコーダーの方は、まずはごく簡単なサンプルを利用して軌道計算を肌になじませるところから初めてみると良いと思います。

jstarted.comはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を
獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、
Amazonアソシエイト・プログラムの参加者です。

クリエイティブ・コモンズ・ライセンス
jstarted.com by yoichi kobayashi is licensed under a Creative Commons 表示 3.0 非移植 License.