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

**URL:** <https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [February 28, 2020, 10:21pm UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227 "2020-02-28T22:21:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [February 28, 2020, 10:21pm UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227/1 "2020-02-28T22:21:24Z")

</div>

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.

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

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 29, 2020, 12:21am UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227/2 "2020-02-29T00:21:44Z")

</div>

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 :

- [https://p5js.org/get-started/](https://p5js.org/get-started/)
- [https://processing.org/tutorials/](https://processing.org/tutorials/)
- [https://javascript.info/](https://javascript.info/) (if you are using specifically p5.js)

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

---

<div class="post-metadata">

**Author:** ![cesca](https://avatars.discourse-cdn.com/v4/letter/c/ee7513/32.png) [@cesca](https://discourse.processing.org/u/cesca)\
**Post date:** [February 29, 2020, 12:27am UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227/3 "2020-02-29T00:27:41Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [February 29, 2020, 12:33am UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227/4 "2020-02-29T00:33:22Z")

</div>

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 :

- [https://p5js.org/reference/#/p5/dist](https://p5js.org/reference/#/p5/dist)

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

- [How do i change the circle's color when the mouse hovers over it?](https://discourse.processing.org/t/how-do-i-change-the-circles-color-when-the-mouse-hovers-over-it/18226/5)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [February 29, 2020, 1:06am UTC](https://discourse.processing.org/t/how-do-i-target-a-specific-circle-in-a-random-circle-packing/18227/5 "2020-02-29T01:06:56Z")

</div>

[CrHallberg.com/CollisionDetection/Website/point-circle.html](http://CrHallberg.com/CollisionDetection/Website/point-circle.html)