Chapter 24

追従

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

この章では、同じような形状を複数持っておき、2つ目以降のオブジェクトは前のオブジェクトを追うような動きを扱う。

楕円

複数の楕円を描画するが、操作するのは一番内側の楕円だけで、他の楕円は自分より一つ内側にある楕円を追いかける動きをする作例。

const maxNum = 60;
const speed = 4;
let circles = [];

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

  circles = [];
  for (let i = 0; i < maxNum; i++) {
    const circle = { x: width / 2, y: height / 2, radius: 60 + i * 12 };
    circles.push(circle);
  }
}

function draw() {
  clear();

  circles.forEach((circle, i) => {
    if (i === 0) {
      circle.y += (mouseY - circle.y) / speed;
    } else {
      const prev = circles[i - 1];
      circle.y += (prev.y - circle.y) / speed;
    }
    ellipse(circle.x, circle.y, circle.radius, circle.radius / 2);
  });
}

キャラクター

先程のコード例はy軸のみの追従だが、今度はxy軸両方で追従する作例。

let img, images;

function preload() {
  img = loadImage("0.png");
}

function setup() {
  createCanvas(windowWidth, windowHeight);
  noSmooth();
  imageMode(CENTER);

  images = [];
  for (let i = 0; i < 5; i++) {
    images.push({ x: 0, y: 0 });
  }
}

function draw() {
  clear();

  for (let i = 0; i < images.length; i++) {
    const cur = images[i];
    if (i === 0) {
      cur.x = mouseX;
      cur.y = mouseY;
    } else {
      const prev = images[i - 1];
      cur.x = cur.x + (prev.x - cur.x) / 10;
      cur.y = cur.y + (prev.y - cur.y) / 10;
    }

    image(img, cur.x, cur.y, img.width * 5, img.height * 5);
  }
}