Chapter 57

重力加速度

miku
miku
2021.11.16に更新
このチャプターの目次

空中でものを離すと、その物体は下へ向かって落ちる。これは重力という力が働いているからであり、加速度を測ってみると秒間約9.8mの加速度で加速し続ける、ただし、本格的なシミュレーションをするわけではないので値は適当にして実装してみよう。

重力

const g = 0.1;
let x, y, vx, vy;

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

  reset();
}

function reset() {
  x = width / 2;
  y = 0;
  vx = floor(random(1, 5));
  vy = 0;
}

function draw() {
  vy += g;
  x += vx;
  y += vy;

  if (x >= width || y >= height) {
    reset();
  }

  clear();

  noStroke();
  fill(240);
  circle(x, y, 10);
}

重力加速度を表す g を用意し、毎フレーム縦方向の速度である vy に足し合わせる。

初速度を上向きにする

const g = 0.1;
const n = 100;
let x, y, vx, vy, circles;

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

  circles = [];
  for (let i = 0; i < n; i++) {
    circles.push({});
  }

  reset();
}

function reset() {
  circles.forEach((c) => {
    c.x = width / 2;
    c.y = height / 2;
    c.vx = random(-5, 5);
    c.vy = random(-5, -10);
  });
}

function draw() {
  if (frameCount % 300 === 0) {
    reset();
  }

  clear();

  circles.forEach((c) => {
    c.vy += g;
    c.x += c.vx;
    c.y += c.vy;

    noStroke();
    fill(240);
    circle(c.x, c.y, 10);
  });
}

vy の初期値を負数にすると、最初は上に向かって飛んでいくが、重力加速度の影響により vy の値が増え続けるので、vy > 0 になると逆に下に向かって落ちることになる。

噴水

const g = 0.1;
const n = 100;
let x, y, vx, vy, circles;

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

  circles = [];
  for (let i = 0; i < n; i++) {
    const c = {};
    circles.push(c);
    reset(c);
  }
}

function reset(c) {
  c.x = width / 2;
  c.y = height;
  c.vx = random(-5, 5);
  c.vy = random(-5, -10);
}

function draw() {
  clear();

  circles.forEach((c) => {
    c.vy += g;
    c.x += c.vx;
    c.y += c.vy;

    if (c.y >= height + 100) {
      reset(c);
    }

    noStroke();
    fill(240);
    circle(c.x, c.y, 10);
  });
}

パーティクルを用意して、各オブジェクトの初期座標をある1点に絞り、先程の作例と同じように vy の初期値を負数にする。画面から消えたらリセットする。