三角関数を目で見る

単位円

sin・cos・tan は三角形の辺の比として習いますが、実際にコードで使うときは、ほとんど「円の上を回る点」として現れます。

半径1の円を描いて、その上に点を1つ置きます。中心から測った角度を θ とすると、その点の横の位置が cos θ、縦の位置が sin θ です。それだけです。

赤い横の線が cos、青い縦の線が sin です。点が円を回るあいだ、この2本は伸び縮みを繰り返し、どちらも -1 から 1 の間に収まり続けます。半径が1なので、点が円からはみ出せないからです。

tan と接線

緑の線が tan です。円の右端に立てた縦線 (x = 1 の接線) を、中心と点を結んだ直線が切り取る高さが tan θ にあたります。

点が上にいくほど直線の傾きが立ち、接線を切る位置は高くなります。角度が 90 度に近づくと直線はほぼ垂直になり、接線とは交わらなくなる。これが tan の発散です。

辺の比としての定義とのつながり

直角三角形での定義は、斜辺を1に縮めたものが単位円の図にあたります。斜辺が1なら「高さ ÷ 斜辺」は高さ そのもの、「底辺 ÷ 斜辺」は底辺そのものになるので、sin と cos が点の座標に一致します。

tan = sin ÷ cos も同じで、点の縦の位置を横の位置で割った値、つまり中心から点へ引いた直線の傾きです。傾きは x が 1 進むあいだに y がいくつ上がるかなので、x = 1 の接線を切る高さとして読めます。

代表値

つまみを動かして、下の値と図を見比べてみてください。

θ	cos θ	sin θ	tan θ
0°	1	0	0
45°	0.707	0.707	1
90°	0	1	±∞
180°	-1	0	0
270°	0	-1	±∞

回転と波

角度を横軸に取り、そのときの sin の値を縦にプロットしていくと、円の動きがそのまま波に化けます。

薄く重ねてあるのが cos の波です。形はまったく同じで、位置が 90 度ぶんだけ横にずれています。cos は sin より一足先に進んでいる同じ波、と見ておくと扱いやすくなります。

アニメーション、波打つ線、往復運動、色の周期的な変化。時間を角度として渡せば、この波がそのまま動きになります。

tan の発散

sin と cos が -1 から 1 に収まるのに対して、tan は 90 度と 270 度で上下に振り切れ、そこで曲線が途切れます。cos が 0 になり、sin ÷ cos の割り算が成立しなくなるためです。

コードで tan を使うときに角度を外から受け取るなら、この2点を踏むと値が一気に跳ねることは頭に置いておく必要があります。傾きを求めたいだけなら、多くの場合は atan2(y, x) のほうが安全です。こちらは割り算をせずに角度を返すので、発散しません。

コードでの呼び出し

JavaScript の Math はラジアンで受け取るので、度で考えているなら変換してから渡します。

const radians = (degrees * Math.PI) / 180;

const x = Math.cos(radians); // 横の位置
const y = Math.sin(radians); // 縦の位置
const slope = Math.tan(radians); // 傾き

この記事の図もすべてこの3行で描いています。円を描き、点を置き、線を引く。三角関数でやっていることは、結局それだけです。