Hi y’all,
I am trying to make a test when 2 circles overlapped, then it should change color background. But for some reason, the background always changes color when the circles are closed and not overlapped yet. Unless I changed the ellipse to ellipse(this.x, this.y, this.r*2) instead of this.r.
Can you help me with this issue?
Thank you!
<
class bubble{
constructor(x,y,r){
this.x=x;
this.y=y;
this.r=r;
}
display(){
noFill();
stroke(0);
strokeWeight(1);
ellipse(this.x,this.y,this.r);
}
intersect(other){
let d = dist(this.x, this.y, other.x, other.y);
return d < this.r + other.r;
}
}
let bubble1;
let bubble2;
function setup() {
createCanvas(800, 400);
bubble1 = new bubble(100, 200,100);
bubble2 = new bubble(400, 200, 100);
}
function draw() {
background(220);
if (bubble1.intersect(bubble2)){
background(200, 0, 100);
}
bubble1.display();
bubble2.display();
bubble2.x=mouseX;
bubble2.y=mouseY;
}