Chapter 17

円運動・単振動・波形

miku
miku
2021.11.12に更新

この章では前章で扱った三角関数の性質を利用した動きを追求する。

円運動

const r = 100;
let angle = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  clear();

  translate(width / 2, height / 2);

  const x = cos(angle) * r;
  const y = sin(angle) * r;
  circle(x, y, 10);

  push();
  stroke(240);
  noFill();
  circle(0, 0, r * 2);
  pop();

  angle += 0.02;
}

(cos(angle) * r, sin(angle) * r) により、原点から angle 方向に r だけ進んだ座標を計算できる。ここで r を固定して angle の値を増やし続けると、半径 r の円周上をぐるぐる回る運動を行うことになる。このような運動を円運動と呼ぶ。

単振動

円運動の動きを軸ごとに分解すると、sinθcosθ の変化する範囲は -1~1 なのが見て取れる。

ただし繰り返しが同じ範囲でも位置が違う。たとえば sinθ が -1 のときは cosθ が 0 になる。これを表にしたものが下記になる。

sinθ cosθ
0度 0 1
90度 1 0
180度 0 -1
270度 -1 0

sinθ, cosθ どちらにしても、小さくなり、また大きくなり・・・を繰り返す動きに利用できる。特に sinθ は0度のとき 0 を返すので初期値として扱いやすい。

単振動を利用した作例

let angle = 0;

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  clear();
  const d = map(sin(angle), -1, 1, 0, 200);
  circle(width / 2, height / 2, d);

  angle += 0.02;
}

sin() が返す値の範囲である -1~1map() を利用して 0~200 に変換したものを円の直径にした作例。

単振動を利用した作例 その2

let angle;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(240);
  noFill();

  angle = 0;
}

function draw() {
  clear();

  translate(width / 2, height / 2);
  for (let i = 0; i < 10; i++) {
    const w = map(sin(angle + 0.2 * i), -1, 1, 1, 20);
    strokeWeight(w);

    circle(0, 0, i * 40);
  }

  angle += 0.02;
}

「14章 - 重ねる」で扱った、円を重ねる作例をアレンジして、線の太さを sin() を利用して変形させる作例。

波形

sinθcosθ も -1~1 の繰り返しを行い、これは時間によって変化するので、グラフにすると波の形になる。

x軸が角度で、y軸が sinθ を引き伸ばしたグラフだ。

const x = map(a, 0, TWO_PI, 0, width);
const y = map(sin(a), -1, 1, height / 4, height / 4 * 3);

角度の範囲は弧度法で 0~PI * 2 なので、map()0~width までの範囲に変換する。sinθ の範囲は -1~1 なので、それを引き伸ばした形、たとえば height の 25%~75% までを割り当てるなどにすればいい。