# Select only one shape

**URL:** <https://discourse.processing.org/t/select-only-one-shape/24646>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [October 16, 2020, 3:15pm UTC](https://discourse.processing.org/t/select-only-one-shape/24646 "2020-10-16T15:15:27Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![karbon](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karbon/32/10892_2.png) [@karbon](https://discourse.processing.org/u/karbon)\
**Post date:** [October 16, 2020, 3:15pm UTC](https://discourse.processing.org/t/select-only-one-shape/24646/1 "2020-10-16T15:15:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 26, 2020, 1:12pm UTC](https://discourse.processing.org/t/select-only-one-shape/24646/2 "2020-10-26T13:12:13Z")

</div>

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.