
マイケル
みなさんこんばんは!
マイケルです!
マイケルです!

エレキベア
クマ〜〜〜〜

マイケル
今日も前回に引き続いてゲーム数学シリーズを進めるよ!

エレキベア
勉強はこりごりクマ〜〜〜
やりたくないクマ〜〜〜〜
やりたくないクマ〜〜〜〜

マイケル
第二回は「三角関数」!!
まだまだ基礎の基礎ですが張り切っていきましょう!
まだまだ基礎の基礎ですが張り切っていきましょう!

エレキベア
(完全スルークマ・・・。)
参考書籍と開発言語

マイケル
勉強にするにあたっては前回同様、下記参考書を参考にしました!

マイケル
どちらも高校数学の基礎から解説しているため、しばらく数学から離れている方でも読みやすいと思います!

エレキベア
一読してみるクマ

マイケル
そしてサンプルプログラムの実装としては p5.js を使用しています!
気になった方はこちらも使用してみてくださいね!
気になった方はこちらも使用してみてくださいね!

エレキベア
グラフィックス特化のJavaScriptライブラリクマね
三角関数

マイケル
それでは本編に入っていきましょう!
三角関数について

マイケル
まずは三角関数について!
sin、cos、tanは覚えているかな?
sin、cos、tanは覚えているかな?

エレキベア
サイン・コサイン・タンジェントクマね

マイケル
その通り!懐かしい響きだね・・・。
直角三角形がある時に、下記のように成り立つ式のことだったね!
直角三角形がある時に、下記のように成り立つ式のことだったね!
↑三角関数の計算式

マイケル
これは、座標等の位置情報を管理するゲームプログラミングでは非常によく使われるんだ!

エレキベア
使うことはないだろうと思ってたクマが役に立つクマね

マイケル
具体的な使用例でいうと、
ショットを30°上方向に特定の長さだけ放つ場合とかだね!
JavaScriptでは、角度(0°〜360°)をangleとすると、下記のように使用できるよ!
ショットを30°上方向に特定の長さだけ放つ場合とかだね!
JavaScriptでは、角度(0°〜360°)をangleとすると、下記のように使用できるよ!

マイケル
度数からラジアンに変換して、メソッドに渡してあげる感じだね!

エレキベア
簡単クマ〜〜〜〜

マイケル
それじゃ0°〜360°の変化で、それぞれどのように値が変わるかみてみよう!
↑三角関数の値の変化

マイケル
見ての通り、0°や180°などX軸に近づくほどcosの値は大きくなって、
90°や270°などY軸に近づくほどsinの値は大きくなっているね!
90°や270°などY軸に近づくほどsinの値は大きくなっているね!

エレキベア
-1〜1の間で変化しているクマね

マイケル
このことから、
cosはX方向の比、sinはY方向の比であると考えてもよさそうだね!
cosはX方向の比、sinはY方向の比であると考えてもよさそうだね!
逆三角関数について

マイケル
そして三角関数とは逆に、
辺の比から角度を求める関数のことを逆三角関数と言うよ!
辺の比から角度を求める関数のことを逆三角関数と言うよ!
↑逆三角関数の計算式

エレキベア
三角関数を逆にして-1を付けたクマね

マイケル
読み方はそれぞれ
アークサイン、アークコサイン、アークタンジェント と読むよ!
プログラムでは下記のように使用します!
アークサイン、アークコサイン、アークタンジェント と読むよ!
プログラムでは下記のように使用します!

マイケル
これも辺の比を関数に渡すだけだから、使う分には簡単だね!
下記に一例でシミュレータを作ったので触ってみてください!
下記に一例でシミュレータを作ったので触ってみてください!
↑逆三角関数の値変化(※スライダーで辺の長さを調整できます。)

エレキベア
簡単に角度が求められるクマ〜〜〜
arctanの活用

マイケル
これで角度が自由に求められる・・・と言いたいところだけど、
ゲーム開発の実装では少し不便なところがあるんだ。
ゲーム開発の実装では少し不便なところがあるんだ。

エレキベア
これで充分じゃないクマ?

マイケル
それは、
arcsin、arctan → -90°〜90°
arccos → 0°〜180°
の間でしか検知できない、
つまり 360°検知ができないということなんだ!
arcsin、arctan → -90°〜90°
arccos → 0°〜180°
の間でしか検知できない、
つまり 360°検知ができないということなんだ!

エレキベア
ええ〜〜〜なんでクマ?!

マイケル
計算結果を関数に渡しているから 各辺の正負まで判断できないんだね・・・。

エレキベア
一体どうすればいいクマ・・・。

マイケル
しかしそんな時に役立つのがアークタンジェント!!

マイケル
上記で使用している atan2() と言う関数にはX、Yそれぞれの値を渡すことができるから360°検知も可能なんだ!!

エレキベア
計算結果ではなく各辺を渡すクマね・・・。
でもなんでタンジェントだけそんな関数があるクマ??
でもなんでタンジェントだけそんな関数があるクマ??

マイケル
例えばだけど、下記のようなキャラ同士の角度を求める場合を考えてみよう!

マイケル
この場合、カラスの座標は正負の情報を持つけど、
カラスまでの長さは正負の情報を持たない!
カラスまでの長さは正負の情報を持たない!

マイケル
つまり、斜線部を使わずX、Yの座標で角度を求めることのできる
アークタンジェントだけが360°の検知が可能ということなんだ!
アークタンジェントだけが360°の検知が可能ということなんだ!

エレキベア
目から鱗クマ・・!!
アークタンジェントなんて一生使わないと思ってたけど大活躍クマ・・・!!
アークタンジェントなんて一生使わないと思ってたけど大活躍クマ・・・!!

マイケル
下記にatan2()含むそれぞれの検出結果のシミュレータを作成したので、
よければ触って挙動を確かめてみてくださいね!
よければ触って挙動を確かめてみてくださいね!
↑逆三角関数での角度検出結果(※マウスドラッグで座標の移動が可能)

エレキベア
確かにatan2()だけが-180°〜180°で360°検知できているクマ・・・!

マイケル
感動だね・・・。
内積

マイケル
そして最後は内積についてだ!

エレキベア
なんだか難しそうクマ〜〜〜

マイケル
難しそうに聞こえるけど、計算内容はすごく簡単!
下記のように2つのベクトルがあるとき、各ベクトルを正規化して掛け合わせたものがcosθと一致する式のことなんだ!
下記のように2つのベクトルがあるとき、各ベクトルを正規化して掛け合わせたものがcosθと一致する式のことなんだ!
↑内積の計算

マイケル
つまり2つのベクトル情報から角度も求めることができるということだね!
プログラムでは下記のように計算するよ!
プログラムでは下記のように計算するよ!

エレキベア
確かに手軽だしそこまで難しくないクマね

マイケル
一つ注意なのは、アークコサインを使用しているため0°〜180°の間でしか検知できないということ!
先ほどのtan2()関数とうまく使い分けましょう!
先ほどのtan2()関数とうまく使い分けましょう!

マイケル
内積の計算結果のシミュレータは以下になります!
↑内積の計算結果(※マウスドラッグで座標の移動が可能)

エレキベア
これもうまく角度の検知ができているクマ〜〜〜

マイケル
内積を使用する際は正規化するのを忘れないようにしましょう!
おわりに

マイケル
というわけで今回は三角関数についてでした!
どうだったかな??
どうだったかな??

エレキベア
現実だとなかなか使わないことを活かすことができて感動だったクマ〜〜〜〜

マイケル
実際にプログラミングして動きを確かめながらだと中々楽しいよね!
それじゃ今後も少しずつ勉強していこう!
それじゃ今後も少しずつ勉強していこう!

マイケル
それでは今日はこの辺で!
アデュー!!
アデュー!!

エレキベア
クマ〜〜〜〜〜〜
【ゲーム数学】第二回 p5.jsで学ぶゲーム数学「三角関数」 〜完〜