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

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

}

}
``````

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 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!

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