三角関数

同業のデザイナーさんらと話をしていて、もっと基礎から書いたほうがよいかなと思いました。やはり多くの人が三角関数あたりで挫折しているみたいですね。あまり数学の授業みたいなものではなく、ゲームやCGに絞った実用的な形で解説してみたいと思います。

三角関数というのは簡単に言えば直角三角形の各辺の比率を表したものです。高校で勉強したと思うので思い出してみてください!

trigonometry

図を見てもらいたいのですが、三角比というのはある角度において辺aと辺b、辺aと辺cがどのくらいの比になるのか、ということです。この比率は辺の長さがどのようであれ、常に一定です。

sinΘ = b / a を b = a * sinΘと置き換えて考えると、辺bの長さは辺aにsinΘ(倍率)をかけているような感じになりますよね。この倍率は人が計算する必要はなく、コンピュータが瞬時に算出してくれます。

もしMayaの環境があったらコマンドに以下のように入力してみてください。(deg_to_radは度をラジアンに変換する関数で、コンピュータではラジアンという角度の単位が使われています)

cos(deg_to_rad(30));

結果は以下のようになります

// 結果: 0.866025 //

数字を変えていろいろ試してみてください。

では

これをどのように利用できるかについてです。XZ面上で戦車が一定のスピードである角度で進んだとします。その戦車はX方向へどのくらい、Z方向へどのくらい移動させればよいでしょうか。

translation_2d

先ほどの三角比の図と照らし合わせて見てください。三角比を利用すれば、ある角度の長さ(スピード)をX軸方向とZ軸方向に分解することができます。

X軸方向にはコサインを使うとスピードをX成分にすることができます。cos(angle) = x / speed なので、x = speed * cos(angle) と置き換えることができますよね。

同じようにZ軸方向にはサインを使うと z = speed * sin(angle)となります。

ゲームプログラミングならモデルの座標に毎フレームこの計算で得た座標を加算していけば移動させることができますよね。

さて

ちょっと応用になりますが、今度は平面の移動から空間の移動について考えて見ます。X軸とY軸でそれぞれ角度を持った一定のスピードで飛ぶ砲弾はどのようなに移動するでしょうか。

translation_3d

これは2段階に分けて考えると同じ要領で計算できます。図を見てもらいたいのですが、まず横側から見たY軸の長さと底辺(speed1とします)を計算します。speed1はZX面上で見るとちょうど地面を進むスピードとなるので、これをX軸とZ軸に分解します。

これで砲弾が進むXYZ方向それぞれの値がそろいましたね。

わからないところがあったら気軽にコメントしてください。

p.s.
ちなみにこの計算式は僕がポリゴンを使ったプログラミングを始めたばかりの高校一年の頃にウェブサイト(ホームページですね)に訪れてくれていた「さかな」さんというサラリーマンの方が教えてくれました。ちょうど三角関数の試験で微妙な点数をとった後で、こんなもの何の役に立つんだと思ってた頃でしたが、こういった計算に使えるとわかって感動しました。実用性が伴うと楽しく学べるものですよね。さかなさん元気にしているかなあ・・・。

広告

三角関数」への2件のフィードバック

  1. 最近の記事、勉強になってます^^
    今回の記事でムムッと思ったことですが、前職でアーティストに三角関数を使ったスクリプトを教えるとき、degreeとradianの説明でも結構つまづいた覚えがあります。「度をラジアンに~」という説明では伝わらなくて、図を書いて「円周と半径の長さが一緒でうんぬん・・・」と説明したので、もしかしたら、その辺りも引っかかるかもと思いました。

    p.s
    あと、すごい偶然ですが自分の昔のHN”さかな”です。
    高校生に三角関数を教えたおぼえがないので、他人だと思いますが^^;

  2. さかなさんお元気そうでなによりです!

    たしかにラジアンって高校で勉強してないですよね。自分でもいつ覚えたか思い出せない・・・。プログラムをいじらないと遭遇しない言葉かもしれませんね。当たり前に思っていることは相手も知っている前提で伝えがちですね^^;

    最近もシェーディングに関して書こうと思ったことがあるのですが、ベクトルや内積を説明しなきゃならないのかなと思うと面倒になって保留にしていたり。ひとつのことでもその背景にあるいくつものことを説明する必要があるんですよね。

    ちょっと書き方を考えてみますね。

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中