Chapter 58

跳ね返り

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

前章の重力加速度により、重力がかかった運動の表現をすることができたが、すぐに画面からはみ出てしまう。なのでこの章では画面から出ないようにオブジェクトを跳ね返す処理について学ぶ。

跳ね返り

オブジェクトが画面外に出ようとするとき、つまり x < 0 || x >= width || y < 0 || y >= height のとき、画面外から出ないようにすればいい。ただし、止めてしまうと不自然になるので、速度を反転させて反対方向に移動させる。

if (横の壁にぶつかったら) {
 x = 0; // 画面内に戻す
  vx *= -1;
}
if (縦の壁にぶつかったら) {
  y = 0; // 画面内に戻す
  vy *= -1;
}

壁にぶつかったときに画面内に戻したあと、ぶつかった軸の速度 vx, vy を反転させる。

const gravity = 0.1;
let balls = [];

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

  for (let i = 0; i < 30; i++) {
    balls.push({ x: random(width), y: random(height), vx: random(-2, 2), vy: random(0.1, 2) });
  }
}

function draw() {
  clear();

  balls.forEach((ball) => {
    ball.vy += gravity;
    ball.x += ball.vx;
    ball.y += ball.vy;
    if (ball.x < 0) {
      ball.x = 0;
      ball.vx *= -1;
    }
    if (ball.x >= width) {
      ball.x = width - 1;
      ball.vx *= -1;
    }
    if (ball.y >= height) {
      ball.y = height - 1;
      ball.vy *= -1;
    }
    circle(ball.x, ball.y, 20);
  });
}

反発係数

跳ね返るときに -1 を掛けると、今の速度を維持したまま跳ね返るという処理になるが、
スーパーボールのようなものでも延々と跳ね続けることはないはずだ。

// 反転を表す -1 に 1未満の値を掛けたものを反発係数とする
const vk = -0.8;

ball.vx *= vk;
ball.vy *= vk;

なので速度の反転をする際に1未満の係数を掛けて少しずつ速度を落とすようにする。

const gravity = 0.1;
const vk = -0.8;
let balls = [];

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

  for (let i = 0; i < 30; i++) {
    balls.push({ x: random(width), y: random(height), vx: random(-2, 2), vy: random(0.1, 2) });
  }
}

function draw() {
  clear();

  balls.forEach((ball) => {
    ball.vy += gravity;
    ball.x += ball.vx;
    ball.y += ball.vy;
    if (ball.x < 0) {
      ball.x = 0;
      ball.vx *= vk;
    }
    if (ball.x >= width) {
      ball.x = width - 1;
      ball.vx *= vk;
    }
    if (ball.y >= height) {
      ball.y = height - 1;
      ball.vy *= vk;
    }
    circle(ball.x, ball.y, 20);
  });
}