Chapter 24

# 追従

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;
}
});
}
``````

## キャラクター

``````let img, images;

}

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);
}
}
``````