見出し画像

やっぱりJavaScript! - 三角関数！

donguri

プログラミングでは三角関数が大活躍します。

三角関数を使うことで簡単にx軸、y軸の座標を動的に変化させる画面上の図形などを動かすことができます。

HTMLを用意して、

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

</body>
</html>

今回はcanvasを使って図形、黒丸を表示します。

const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const centerX = 250;
const centerY = 250;


const circleSize = 30;

let x = centerX;
let y = centerY;


  context.beginPath();
  context.arc(x, y, circleSize, 0, Math.PI * 2);
  context.fill();

実行すると下記の


const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
document.body.appendChild(canvas);

const centerX = 250;
const centerY = 250;

const distanceFromCenter = 150;

const circleSize = 30;

let x = centerX;
let y = centerY;
let angleRad = 0;

function loop() {

  context.clearRect(0, 0, canvas.width, canvas.height);
  
  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);

動かすポイントは、変化させていくパラメータを作る。

let x = centerX;
let y = centerY;
let angleRad = 0;

この場合は座標x,yという変数を作リます。あと角度としてangleRadを変数定義してこの角度ごと増加分を動くスピードとします。

xとyが変化するということは図形の中心座標

centerX.   centerY

が動いていくので図形が動いていくということになります。

あとは関数" loop()"を作り繰り返し実行させます。

function loop() {
 
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  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);
}

角度ですが度数法からラジアンに変換しています。1度をラジアンに変換します。

angleRad += 1 * Math.PI / 180;

ラジアン(弧度法)と度数法については

角度が360°としているのに対してラジアンは円周を2πとしてその割合で表す方法です。

角度1°というのは

1 / 360

ラジアンの円周は2πなので、

π  *  1/180 

この求めたラジアンを使って

  x = distanceFromCenter * Math.cos(angleRad) + centerX;
  y = distanceFromCenter * Math.sin(angleRad) + centerY;

xとyの数字を動かしていきます。

x = distanceFromCenter * Math.cos(angleRad) + centerX;

のみを記載して、実行するx軸方向に、

y = distanceFromCenter * Math.sin(angleRad) + centerY;

これのみの記載でy軸方向の伸びていきます。

そしてx,y共に使うことで円形の動きになります。


参考サイト


この記事が気に入ったらサポートをしてみませんか？