let shapes = []; let shapesNum = 100; const sign = [-1, 1]; const vMin = 5; const vMax = 10; let direction = 1; const frameW = 20; const palette = ["#d88c9a", "#f2d0a9", "#f1e3d3", "#99c1b9", "#8e7dbe"]; function setup() { createCanvas(500, 500); angleMode(DEGREES); for (let i = 0; i < shapesNum; i++) { shapes.push(new Shape()); } } function draw() { background("#E7ECF210"); noStroke(); fill(100); for (let i = 0; i < shapes.length; i++) { // shapes[i].move(); shapes[i].display(); } strokeWeight(frameW); stroke(100); noFill(); rect(0, 0, width, height); } class Shape { constructor() { this.d = random(30, 60); this.c = random(palette); this.p = createVector(random(this.d / 2 + frameW / 2, width - this.d / 2 - frameW / 2), random(this.d / 2 + frameW / 2, height - this.d / 2 - frameW / 2)); this.v = createVector(random(vMin, vMax) * random(sign), random(vMin, vMax) * random(sign)); } move() { this.p.add(this.v); if (this.p.x < frameW / 2 + this.d / 2 || this.p.x > width - this.d / 2 - frameW / 2) { this.v.mult([-1, 1]); } if (this.p.y < frameW / 2 + this.d / 2 || this.p.y > height - this.d / 2 - frameW / 2) { this.v.mult([1, -1]); } } changeDirection() { this.v.mult([-1, -1]); if (this.p.x < frameW / 2 + this.d / 2 || this.p.x > width - this.d / 2 - frameW / 2) { this.v.mult([-1, 1]); } if (this.p.y < frameW / 2 + this.d / 2 || this.p.y > height - this.d / 2 - frameW / 2) { this.v.mult([1, -1]); } } display() { fill(this.c); circle(this.p.x, this.p.y, this.d); } } function mouseWheel(event) { for (let i = 0; i < shapes.length; i++) { shapes[i].move(); } // これまでプラスで今からマイナス方向に入った時 if (direction == 1 && event.delta < 0) { for (let i = 0; i < shapes.length; i++) { shapes[i].changeDirection(); } direction = -1; } else if (direction == -1 && event.delta > 0) { for (let i = 0; i < shapes.length; i++) { shapes[i].changeDirection(); } direction = 1; } else { // } }

mouseWheel action