Select only one shape

Processing Coding Questions
1

My code needs some minor adjustments. I couldn’t find any tutorials to only select one shape. I have a 3 button system. The dragging element (still trying to figure out how to make it visible) is slightly under my desired position. I need it to be where the yellow button is. I can see that the dragging mechanic works but all three of my buttons highlight when I hover over my dragging shape and not just my yellow button. How do I assign the stroke highlight only to my yellow button? And drag that yellow button while we’re at it. Here is my code so far:

//variables

float cx;
float cy;
int circleSize=120;
boolean overCircle =false;
boolean locked =false;
float xOffset =0.0;
float yOffset =0.0;
float positionX;
float positionY;

void setup()
{
size (900, 600);

noStroke ();
cx= width/2.0;
cy= height -1/8.0;

ellipseMode(CENTER);
positionX= width /2.0f;
positionY= height / 1.05f;
}

void draw()
{
background (250);
fill(87, 93, 88);
textAlign(CENTER);
textSize (30);
text (“Utiliser les clés du clavier 1-2-3”, positionX, positionY);

if (mouseX> cx-circleSize && mouseX < cx+circleSize &&
mouseY > cy-circleSize && mouseY < cy+circleSize) {
overCircle = true;
if(!locked) {
stroke(255);
fill(237, 201, 41);
}
} else {
stroke(153);
fill(153);
overCircle = false;
}
//yellow
fill (237, 201,41);
circle (450, 460, 120);

//inside yellow
fill(216, 158, 12);
circle(450, 460, 80);
ellipseMode(CENTER);

//red
fill (228, 46,46);
circle (150, 460, 120);
ellipseMode(CENTER);

//inside red
fill (156, 12, 29);
circle (150, 460, 80);
ellipseMode(CENTER);

//blue
fill(56, 76, 228);
circle (750, 460, 120);
ellipseMode(CENTER);
//inside blue
fill (35, 38, 105);
circle(750, 460, 80);
ellipseMode(CENTER);

}

void mousePressed() {
if(overCircle) {
locked = true;
fill(255, 255, 255);
} else {
locked = false;
}
xOffset = mouseX-cx;
yOffset = mouseY-cy;

}

void mouseDragged() {
if(locked) {
cx = mouseX-xOffset;
cy = mouseY-yOffset;
}
}

void mouseReleased() {
locked = false;
}

2

Yeah, well…

You display 3 circles.

But you have only 1 if for the cx position

It would be easier to have parallel arrays to hold the x, the y for each button and then for loop over them. (Or have cx1,cy1 for circle 1 and cx2,cy2 for #2 and cx3,cy3 for #3. use it for displaying them and also for if).

Then you would have a separate if for each circle and also a separate overCircle for each circle (as an array OR overCircle1, overCircle2, overCircle3).

Alternatively you use a class that holds circle data, see website | tutorials | objects for this.

Dragging: you drag in draw(): say if (overCircle) {
cx=mouseX; cy=mouseY;
}

Basically you need this for each circle separately.