三角関数を使ってみよう(p5.js)

今回は三角関数を使ってみます。
これを利用してゲームの動きの幅を増やしましょう。

三角関数 sin() と cos() を使うことで、円周上の動きを再現できます。これにより、物体を円形に動かすことができます。
これを利用してシューティングゲームの敵の動き方のバリエーションを増やしましょう

let angle = 0;
let radius = 100;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let x = width / 2 + cos(angle) * radius;
  let y = height / 2 + sin(angle) * radius;
  
  ellipse(x, y, 20, 20);
  angle += 0.05;
}

この円運動で三角関数 cos と sin はそれぞれ、x座標とy座標の変化を角度に基づいて出すため、回転運動に適しています。以下のような特性を持っています：

• cos(θ) は角度に応じて -1 から 1 まで変化し、x座標の変化を表します。
• sin(θ) は角度に応じて -1 から 1 まで変化し、y座標の変化を表します。

これにより、角度を少しずつ増加させて cos と sin を計算し続けると、オブジェクトは円周上の点をなぞるように動き、円運動が実現されます。

三角関数sinを使って波のような動きをすることができます。
これを使ってジャンプする動き方もできたりします。
スーパーマリオのマリオもこれと同じような動き方をやります。

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  stroke(0);
  
  for (let x = 0; x < width; x += 10) {
    let y = height / 2 + sin(TWO_PI * x / width + frameCount * 0.1) * 50;
    ellipse(x, y, 10, 10);
  }
}

let angle = 0;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  let x = width / 2 + sin(angle) * 100;
  
  ellipse(x, height / 2, 20, 20);
  angle += 0.05;
}

三角関数を使って時計を描写することができます。

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
}

function draw() {
  background(220);
  translate(width / 2, height / 2);
  let s = second();
  let m = minute();
  let h = hour();
  
  // 秒針
  stroke(255, 0, 0);
  let secondAngle = map(s, 0, 60, 0, 360);
  line(0, 0, cos(secondAngle - 90) * 100, sin(secondAngle - 90) * 100);
  
  // 分針
  stroke(0, 255, 0);
  let minuteAngle = map(m, 0, 60, 0, 360);
  line(0, 0, cos(minuteAngle - 90) * 80, sin(minuteAngle - 90) * 80);
  
  // 時針
  stroke(0, 0, 255);
  let hourAngle = map(h % 12, 0, 12, 0, 360);
  line(0, 0, cos(hourAngle - 90) * 60, sin(hourAngle - 90) * 60);
}

map関数はある範囲の値を別の範囲の値に変換するためのものです。
例えば、
let secondAngle = map(s, 0, 60, 0, 360);
は変数sは0から60の間で変化するものを0から360の値に変換します。
line関数は2点間に直線を描くシンプルな関数です。
なので、
line(0, 0, cos(secondAngle – 90) * 100, sin(secondAngle – 90) * 100);
は(0,0)点から(cos(secondAngle – 90) * 100, sin(secondAngle – 90) * 100)点

これを応用してゲームを作ってみてください。