# How do i change the circle's color when the mouse hovers over it?
**URL:** https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226
**Category:** Coding Questions
**Tags:** homework
**Created:** [February 28, 2020, 10:00pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226 "2020-02-28T22:00:01Z")
**Posts on this page:** 7
**Page:** 1
### Author:  [@cesca](https://discourse.processing.org/u/cesca)
#### Post date: [February 28, 2020, 10:00pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/1 "2020-02-28T22:00:01Z")
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.
```auto
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);
}
}
```
---
### Author:  [@anon94203042](https://discourse.processing.org/u/anon94203042)
#### Post date: [February 28, 2020, 10:11pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/2 "2020-02-28T22:11:56Z")
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.
---
### Author:  [@cesca](https://discourse.processing.org/u/cesca)
#### Post date: [February 28, 2020, 10:14pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/3 "2020-02-28T22:14:10Z")
i understand the logic, but idk how to write the code for this
---
### Author:  [@anon94203042](https://discourse.processing.org/u/anon94203042)
#### Post date: [February 28, 2020, 10:18pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/4 "2020-02-28T22:18:58Z")
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.
```auto
if (dist(mouseX, mouseY, circleXCenter, circleYCenter) <= radius)
circleColour = 255;
else
circleColour = 0;
```
For more info: [https://processing.org/reference/dist\_.html](https://processing.org/reference/dist_.html)
---
### Author:  [@cesca](https://discourse.processing.org/u/cesca)
#### Post date: [February 28, 2020, 10:24pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/5 "2020-02-28T22:24:17Z")
> [@cesca](#):
>
> 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); } }
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.
---
### Author:  [@anon94203042](https://discourse.processing.org/u/anon94203042)
#### Post date: [February 28, 2020, 10:27pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/6 "2020-02-28T22:27:00Z")
You have to create two variables fro each circle. If you have two circles:
```auto
int circleXPos1;
int circleYPos1;
int circleRadius1;
int circleXPos2;
int circleYPos2;
int circleRadius2;
```
Then,
```auto
if (dist(mouseX, mouseY, circleXPos1, circleYPos1) <= circleRadius1)
circleColour1 = 255;
```
---
### Author:  [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)
#### Post date: [February 29, 2020, 8:30pm UTC](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/7 "2020-02-29T20:30:46Z")
Add `let d = dist(circles[i].x,circles[i].y,mouseX,mouseY);` on line 39 …