How do I target a specific circle in a random circle packing?

p5.js Coding Questions
1

I want to change the circles’ colours when the mouse hovers them (but not all at once, just that specific circle the mouse is on)? I copied this code from a tutorial so I don’t know how to code at all.

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

Hi there,

If you don’t know how to code at all, it’s going to be complicated…
You should start learning from the tutorials :

They are very well explained so you shouldn’t get lost :slight_smile:

3

Not at all, but I’m a beginner. I know the very basics. I adapted this code from a Daniel Shiffman tutorial. My teacher showed me those resources too. Thanks tho!

4

Ok so here, what you are looking for is simple geometry.

How do you detect if a point (here it’s the mouse) is inside a circle?

Check this :

NOTE :
This is actually a duplicate of this previous subject :

1 Like
5

CrHallberg.com/CollisionDetection/Website/point-circle.html

1 Like