三角関数を扱いたい（Math）：Java Scriptの基礎16

今回の記事はJava Scriptで三角関数を扱う方法を紹介します。

三角関数を扱いたい

三角関数とは、サイン、コサイン、タンジェントがなんたら〜って学生の時に習ったあれです。

三角関数を網羅するのは非常に大変なので、詳しくは以下を参照して下さい。
（今回は三角関数ってこれの事かと理解できればOK）

三角関数（さんかくかんすう、英: trigonometric function）とは、平面三角法における、角の大きさと線分の長さの関係を記述する関数の族および、それらを拡張して得られる関数の総称である。鋭角を扱う場合、三角関数の値は対応する直角三角形の二辺の長さの比であり、三角関数は三角比とも呼ばれる。三角法に由来する三角関数という呼び名のほかに、後述する単位円を用いた定義に由来する円関数（えんかんすう、英: circular function）という呼び名がある。

三角関数には以下の6つがある。

sin（正弦、sine）

sec（正割、secant）

tan（正接、tangent）

cos（余弦、cosine）

csc（余割、cosecant）

cot（余接、cotangent）

https://ja.wikipedia.org/wiki/三角関数

Java Scriptで三角関数を使用するには以下のプロパティとメソッドを使用します。

これらのメソッドはSVGやcanvasでアニメーションを行うときによく使用されています。
使い方は以下の通りです。

Math.PI; //　円周率。
Math.cos((90 * Math.PI) / 180); 
Math.sin((45 * Math.PI) / 180); 
Math.tan((90 * Math.PI) / 180); 
Math.acos(1); 
(Math.atan2(1, 1) * 180) / Math.PI
console.log(Math.PI)
console.log(Math.cos((90 * Math.PI) / 180))
console.log(Math.sin((45 * Math.PI) / 180))
console.log(Math.tan((90 * Math.PI) / 180))
console.log(Math.acos(1))
console.log((Math.atan2(1, 1) * 180) / Math.PI)

実際にコンソールログで見てみると以下のような数値が返されます。

Math.cosやMath.acosに渡す数値の単位はラジアンです。円周の長さはπで表されるので、度数との変換式は次のようになります。

ここまで説明してきた三角関係を応用して、回転アニメーションを作成してみましょう。
例えば半径が100円周率においてdegree度の座標は次のように表す事が出来ます。

//角度
let degree = 0;
//回転させたい角度のラジアンを求める
const rotation = (degree * Math.PI) / 180;
//回転から位置を求める
const targetX = 100 * Math.cos(rotation);
const targetY = 100 * Math.sin(rotation);

<div class="icon">
</div>

/* アイコン画像 */
const icon = document.querySelector('.icon');
/* 角度 */
let degree = 0;
//ループ
loop();
/* 画面更新ごとに実行される関数 */
function loop() {
    const rotation = (degree * Math.PI) / 100;
    const targetX = window.innerWidth / 2 + 100 * Math.cos(rotation) - 50;
    const targetY = window.innerHeight / 2 + 100 * Math.sin(rotation) - 50;
    icon.style.left = '$(targetX)px';
    icon.style.top = '$(targetY)px';
    degree +=1;
    requestAnimationFrame(loop);
}

以上が「三角関数を扱いたい（Math）：Java Scriptの基礎16」でした。

三角関数についてもっと上手く説明できれば良いのですが、難しくてダメでした。
より数学よりな考え方なので、極めたい方は高等数学から学んでみると良いかと思います。