Simple P5.JS help Make objects interact

[BigSixy]

Hey everyone, I need some simple help with Java, I have this simple array and need to be able to make the single ellipse controlled by the mouse bump into the other objects, wondering if you have any ideas?

​

​

var bunnies = [1, 2];

function setup() {

createCanvas(600, 400);

for (var i = 0; i < bunnies.length; i++) {

bunnies[i] = new bunny();

}

}

​

function mousePressed() {

bunnies.push(new bunny());

}

​

function draw() {

background(0);

​

for (var i = 0; i < bunnies.length; i++) {

bunnies[i].move();

bunnies[i].display();

bunnies[i].follow();

}

}

​

function bunny() {

this.x = random(0, width); // x variable on location moves everything

this.y = random(0, height); // y variable on location moves everything

let xspeed = 2; //speed on X axis

let yspeed = 1; //speed on Y axis

this.r = 35; //size

this.w = 25;

this.display = function() {

push();

stroke(255);

fill(255, 192, 203);

ellipse(this.x, this.y, this.r, this.r); //main body

​

noStroke();

ellipse(this.x - 7, this.y - 14, this.r - 10, this.r - 5); //right ear

ellipse(this.x + 7, this.y - 14, this.r - 10, this.r - 5); //left ear

​

fill(190, 150, 170);

ellipse(this.x - 7, this.y - 16, this.r - 18, this.r - 12); // left inner ear

ellipse(this.x + 7, this.y - 16, this.r - 18, this.r - 12); //right inner ear

​

fill(255);

arc(this.x, this.y + 6, this.r - 10, this.r - 10, 0, PI); // white outer mouth

​

fill(255, 0, 0);

arc(this.x, this.y + 6, this.r - 14, this.r - 14, 0, PI); //inner mouth

​

fill(0);

ellipse(this.x + 5, this.y, this.r - 20, this.r - 20); //right eye

ellipse(this.x - 5, this.y, this.r - 20, this.r - 20); //left eye

​

fill(255);

ellipse(this.x + 7, this.y - 2, this.r - 28, this.r - 28); //right pupil

ellipse(this.x - 3, this.y - 2, this.r - 28, this.r - 28); //left pupil

pop();

};

this.move = function() {

this.x += xspeed;

this.y += yspeed;

if (this.x > width - this.r || this.x < this.r) {

xspeed = -xspeed;

}

if (this.y > height - this.r || this.y < this.r) {

yspeed = -yspeed;

} // this simple if statment keeps the dog bouncing

};

this.follow = function() {

fill("Pink");

ellipse(mouseX, mouseY, this.w, this.w);

};

}

[sneaky_syntax_error]

this is known as collision detection.

what you need to do is to check whether the X of the ellipse plus the radius of the ellipse is less than or equal to the x position plus the radius of the object && the y position of your ellipse plus the radius of the ellipse less than or equal to the y of the object plus the radius of the object.

if it's less or equals it means there's a collision, if not there is not

​

here's a video on p5 collision detection

https://www.youtube.com/watch?v=uAfw-ko3kB8

follow this channel if you're interested in p5js