https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/take-a-look-at-how-to-do-calculations-using-trigonometric-functions-in-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/take-a-look-at-how-to-do-calculations-using-trigonometric-functions-in-javascript/

JavaScriptで三角関数を使った計算を行う方法を見てみよう

JavaScriptには高校数学で習うsin cos tanなど、三角関数に関するメソッドが用意されております。

Canvas・SVG・アニメーションなど、インタラクティブなWEBページを使う時によく使うので、覚えておいて損はないです。

JavaScriptで三角関数を使った計算を行う

構文

プロパティー意味
Math.PI円周率数値
円周率を求めるプロパティ
関数(メソッド)意味返り値
Math.cos(角度(ラジアン))コサイン数値
Math.sin(角度(ラジアン))サイン数値
Math.tan(角度(ラジアン))タンジェント数値
Math.acos(角度(ラジアン))アークコサイン数値
Math.asin(角度(ラジアン))アークサイン数値
Math.atan(角度(ラジアン))アークタンジェント数値
Math.atan2(y座標, x座標)(x, y)の座標で作られる角度数値
三角関数関連のメソッド

デモコード

まずは、簡単な三角関数の計算について見てみましょう。

ブラウザ開発者ツールで確認するのをお勧めします。

JavaScript
Math.PI; //円周率 3.141592653589793
Math.cos((90 * Math.PI) / 180); //cos90 6.123233995736766e-17
Math.sin((90 * Math.PI) / 180); //sin90 1
Math.tan((45 * Math.PI) / 180); //tan45 0.9999999999999999
Math.acos(1); //0
(Math.atan2(1, 1) *180) / Math.PI; //(1,1)の座標がなす角度 45度
JSの角度はラジアンで表す

高校数学では角度を指定して三角関数の計算を行います。例えば、sin45度とかcos45度ですね。

しかし、JavaScriptの世界ではこの度数をラジアンという度数と相互関係を持つ単位に書き換えて扱う必要があります。

そのための公式は下記の通りです。

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

というわけで、上記のデモコードでもラジアンに単位を変換して計算を行っています。

では、次に三角関数を用いて、画像のローディングアニメーションを再現してみます。

Output
Pug
#box.text-center
JavaScript
// canvas要素作ってHTMLに挿入
const position = document.getElementById('box');
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 100; //canvasエリアの領域
canvas.height = 100; //canvasエリアの領域
position.appendChild(canvas);

// 円運動の中心座標
const centerX = 50;
const centerY = 50;

// 円を描画する中心からの距離。(要するに半径)
const distanceFromCenter = 25;

// 表示する円のサイズ。(回っている円の大きさ)
const circleSize = 10;

// 変化させていくパラメータ。
// angleRadを増加させていき、
// それに伴いxとyが変化していくようにする。
let x = centerX;
let y = centerY;
let angleRad = 0; //度の管理

// メインループ
function loop(timestamp) {
  // 描画内容を消去する。
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  // angleRadを1度ずつ変化させていく。
  // 1度はMath.PI/180ラジアン。
  angleRad += 1 * Math.PI / 180;

  // ここで座標を変化させていく。
  x = distanceFromCenter * Math.cos(angleRad) + centerX;
  y = distanceFromCenter * Math.sin(angleRad) + centerY;

  // 求めた座標に円を描画する。
  context.beginPath();
  context.arc(x, y, circleSize, 0, Math.PI * 2);
  context.fill();

  window.requestAnimationFrame(loop);
}

window.requestAnimationFrame(loop); 
//ブラウザの再描画の準備が整ったら(要するに読み込まれたら),引数に渡された関数(function loop)を実行する。→ なので、動作が無限ループになる。

/*---------
三角関数から角度を求める方程式
x=rcosθ
y=rsinθ
-------*/

まず、このサンプルコードは「Canvas」や「三角関数の数学的知識」など、JavaScript初学者には敷居が高い別の知識が必要になるので、理解する必要はありません。

三角関数の知識を使ってこの様なインタラクティブな動作を実現できる点を抑えておけば十分かと思います。

インストラクター
コメント

コメントを残す