三角関数を扱いたい(Math):Java Scriptの基礎16

Programming

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

こんな場合に使用します

  • 三角関数で数値を計算したい
  • 座標から角度を求めたい
  • 円弧に沿って要素をアニメーションさせたい場合

難易度(MAX10)★★★★★☆☆☆☆

三角関数を扱いたい

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

三角関数を網羅するのは非常に大変なので、詳しくは以下を参照して下さい。
(今回は三角関数ってこれの事かと理解できれば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で三角関数を使用するには以下のプロパティとメソッドを使用します。

プロパティ意味
Math.PI円周率数値
メソッド意味戻り値
Math.cosコサイン数値
Math.sinサイン数値
Math.tanタンジェント数値
Math.acosアークコサイン数値
Math.asinアークサイン数値
Math.atanアークタンジェント数値
Math.atan2(x,y)の座標がなす角度数値

これらのメソッドは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に渡す数値の単位はラジアンです。円周の長さはπで表されるので、度数との変換式は次のようになります。

ラジアン = (度 * Math.PI) / 180;

ここまで説明してきた三角関係を応用して、回転アニメーションを作成してみましょう。
例えば半径が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」でした。

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

2020年8月12日ProgrammingJava Script,WEB

Posted by KT