# How do i change the circle's color when the mouse hovers over it?

I am super, super new to this so pls assume i know nothing: I adapted this code from a Daniel Shiffman tutorial. I know i have to use the dist function to compare mouseY, mouseX and the circle’s radius but idk how to write that code or how i can target a specific circle.

``````var circles = [];

setup = () => {
createCanvas(2145, 1210);

for (var c = 0; c < 2200; c++) {
var circle = {
x: random(width),
y: random (height),
r: random (70, 5)
};

var overlap = false;

var protection = 0;

for (var j = 0; j < circles.length; j++){
var other = circles[j];
var d = dist(circle.x,circle.y, other.x, other.y);
if (d < circle.r + other.r){
overlap = true;
}
}

if (!overlap) {
circles.push(circle);
}

protection++;
if (protection > 10000) {
//break;
}

}

}

draw = () => {

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

if(mouseX && mouseY < circles[i].r){
fill(random(255), random(255), random(255));
strokeWeight(3);
stroke(119,136,153);
ellipse(circles[i].x, circles[i].y, circles[i].r*2, circles[i].r*2);
}

else{
fill(255, 255, 255);
stroke(119,136,153);
strokeWeight(3);
ellipse(circles[i].x, circles[i].y, circles[i].r*2, circles[i].r*2);
}

textSize(300);
strokeWeight(5);
fill(255, 255, 255);
textStyle(BOLD);
textFont('Varela Round');
text('cesca', 700, 650);

}

}
``````

So you basically have to create a hit box around your circle. If your mouse hovers over the hit box, then the circle will change colour.

First, creating a hit box. Remember, the circle’s edge is always a radius length away from the center. So let’s say that the radius is 10. Oh, and you have to use the Pythagorean theorem. So let’s say that the coordinates of the mouse is x and y. So if the square root of x squared plus y squared is smaller or equal than 10, then the mouse is in the circle.

And do this check every frame, and when mouse if over the circle, then set the colour of the circle to a new value.

i understand the logic, but idk how to write the code for this

Hold up…

Actually, there’s a much simpler way. Use `dist()`. What this does is it calculates the distance between two points. So if the distance between the mouse coordinates and circle’s center is below the radius, then change colour.

``````if (dist(mouseX, mouseY, circleXCenter, circleYCenter) <= radius)
circleColour = 255;
else
circleColour = 0;
``````

LOL i know! i wrote that in my description, but I don’t know how to target the specific circle the mouse is on. i tried “dist(mouseX, mouseY, circle.x, circle.y) < circle.r” but it doesn’t work.

You have to create two variables fro each circle. If you have two circles:

``````int circleXPos1;
int circleYPos1;
``````if (dist(mouseX, mouseY, circleXPos1, circleYPos1) <= circleRadius1)
Add `let d = dist(circles[i].x,circles[i].y,mouseX,mouseY);` on line 39 …