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

p5.js Coding Questions
1

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);
        
       
}
         
     }
2

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.

3

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

4

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;

For more info: https://processing.org/reference/dist_.html

5

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.

6

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

int circleXPos1;
int circleYPos1;
int circleRadius1;

int circleXPos2;
int circleYPos2;
int circleRadius2;

Then,

if (dist(mouseX, mouseY, circleXPos1, circleYPos1) <= circleRadius1)
    circleColour1 = 255;
7

Add let d = dist(circles[i].x,circles[i].y,mouseX,mouseY); on line 39 …