xxxxxxxxxx
let ripples = [];
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
for (let i = ripples.length - 1; i >= 0; i--) {
ripples[i].update();
ripples[i].display();
if (ripples[i].isFinished()) {
ripples.splice(i, 1);
}
}
}
function mousePressed() {
ripples.push(new Ripple(mouseX, mouseY));
}
class Ripple {
constructor(x, y) {
this.x = x;
this.y = y;
this.radius = 0;
this.maxRadius = 100;
this.speed = 4;
this.opacity = 255;
}
update() {
this.radius += this.speed;
this.opacity -= 5;
}
display() {
noFill();
stroke(0, this.opacity);
strokeWeight(2);
ellipse(this.x, this.y, this.radius * 2);
let colorR = map(this.radius, 0, this.maxRadius, 255, 100);
let colorG = map(this.radius, 0, this.maxRadius, 100, 255);
fill(colorR, colorG, 100, this.opacity);
noStroke();
ellipse(this.x, this.y, this.radius * 2);
}
isFinished() {
return this.opacity <= 0;
}
}