# Click event on two shape

**URL:** <https://discourse.processing.org/t/click-event-on-two-shape/10613>\
**Category:** Coding Questions\
**Created:** [April 24, 2019, 10:51pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613 "2019-04-24T22:51:24Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![clingonboy](https://avatars.discourse-cdn.com/v4/letter/c/97f17d/32.png) [@clingonboy](https://discourse.processing.org/u/clingonboy)\
**Post date:** [April 24, 2019, 10:51pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/1 "2019-04-24T22:51:25Z")

</div>

If I have two rect one over enother, partially, if a click in the common area, how can I select the last above rectangle?  
like in this example:  
[https://editor.p5js.org/Clingonboy/sketches/ja\_VJNrg4](https://editor.p5js.org/Clingonboy/sketches/ja_VJNrg4)  
Have I do andle myself wich is the last rect drowed to considering the above one?  
Thanks for your help.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 25, 2019, 1:10am UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/2 "2019-04-25T01:10:48Z")

</div>

possibly there is a misunderstanding,  
once the rect’s are drawn they are not separable objects,  
so if they overlap and you do a “boolen rect mouse over” method  
there will be a conflict about the area where they overlap.

---

<div class="post-metadata">

**Author:** ![clingonboy](https://avatars.discourse-cdn.com/v4/letter/c/97f17d/32.png) [@clingonboy](https://discourse.processing.org/u/clingonboy)\
**Post date:** [April 25, 2019, 8:19pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/3 "2019-04-25T20:19:44Z")

</div>

Thank for the clarification. It’s what I was afraid of, but it had to be like this because it is a Canvas.  
Thanks

---

<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:** [April 25, 2019, 10:32pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/4 "2019-04-25T22:32:27Z")

</div>

It all depends on your code

you can solve this of course

let’s say you have stored all rects in arrays like

```auto
float [] x
float [] y
float [] w
float [] h

```

let’s say there are 10.  
you draw them from 0 to 9 in a for loop

```auto

for(int i............{
   rect(x.................
}

```

* * *

**Check the mouse**

Now you check the mouse

from 0 to 9 in a for loop

```auto
void mousePressed() {
  numberOfDetectedRect = -1; // unknown 
  for(int i............{
     if(mouseX>........{
         // detection
         numberOfDetectedRect = i; 
         return; // !!!!!!!!!!!!!!!!!!!!!!! ??????????????????????
     }
  }
}

```

**Now the point is:**

you can either leave the for loop using return or break on the **first** occurance of a match

OR stay in the for loop so that the **2nd** occurance gets also detected

in an overlapping situation this means:

- the first occurance = rect underneath
- the 2nd occurance = rect above / drawn last [this is what you WANT]

When you want to have the 2nd rect selected, you don’t want return / break in your for loop.

**Remark**

depending on your goal you could also monitor both rects occurances so that you know we have a click in the overlapping section of rects #3 and #7😉

Chrisir

---

<div class="post-metadata">

**Author:** ![clingonboy](https://avatars.discourse-cdn.com/v4/letter/c/97f17d/32.png) [@clingonboy](https://discourse.processing.org/u/clingonboy)\
**Post date:** [April 26, 2019, 7:38pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/5 "2019-04-26T19:38:44Z")

</div>

Your explanation is very clear and useful, Thanks

---

<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:** [April 26, 2019, 8:41pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/6 "2019-04-26T20:41:54Z")

</div>

I would also work without the arrays.

You have

```auto
  rect(50,50,50,50);
  rect(75,75,50,50);

```

The result just depends on which rect you check first or if you just use `if..` or `if...else if....`:

e.g. in an overlapping situation where both checks give you true:

```auto
if(mouseX>50&&mouseX<50+50&&mouseY>.......... ) currentRect = 1; 
if(mouseX>75&&mouseX<75+50&&mouseY>.......... ) currentRect = 2; // this one is chosen

```

is different from :

```auto
if(mouseX>50&&mouseX<50+50&&mouseY>.......... ) currentRect = 1; // this one is chosen 
else if(mouseX>75&&mouseX<75+50&&mouseY>.......... ) currentRect = 2;

```

Because with else if (2nd example) the 2nd if-clause is not looked at when the 1st one is true.

Chrisir

---

<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:** [May 2, 2019, 1:36pm UTC](https://discourse.processing.org/t/click-event-on-two-shape/10613/7 "2019-05-02T13:36:56Z")

</div>

here is an example

```auto
// Array of rects 
int lenArray=10;

float [] x = new float[lenArray]; 
float [] y = new float[lenArray];
float [] w = new float[lenArray];
float [] h = new float[lenArray];

// marker 
int numberOfDetectedRect = -1; 

// leave yes/no
boolean leaveTheForLoopImmediately = false; 

// ------------------------------------------------------------------
// processing core functions

void setup() {
  size(400, 400);

  // pre-init 
  for (int i=0; i<x.length; i++) {
    x[i]=130 + 26*i; 
    y[i]=150 + 3*i; 
    w[i]=20; 
    h[i]=30;
  }//for

  // init separately
  x[0]=50; 
  y[0]=50; 
  w[0]=50; 
  h[0]=50; 

  x[1]=75; 
  y[1]=75; 
  w[1]=50; 
  h[1]=50;

  // this was in the old code: 
  //rect(50, 50, 50, 50);
  //rect(75, 75, 50, 50);
}

void draw() {
  background(220); 

  showHelpText();
  showRectangles();
}

// ------------------------------------------------------------------
// functions called by draw() 

void showRectangles() {
  // show all rectangles 

  for (int i=0; i<x.length; i++) {

    strokeWeight(1); 
    // if the rect is the selected one we set strokeWeight to 4
    if (numberOfDetectedRect==i) {
      strokeWeight(4);
    }
    fill(color(10, 55, 10, 50));
    rect(x[i], y[i], 
      w[i], h[i]);
    // show text for the rect
    fill(0); 
    text(i, 
      x[i]+3, y[i]-3);
  }//for
  // reset strokeWeight
  strokeWeight(1);
}//func 

void showHelpText() {
  // show Help Text
  fill(0);
  text ("Test for overlapping rects; \nleaveTheForLoopImmediately is "
    +leaveTheForLoopImmediately
    +".\nHit any key to toggle.\nClick a rect to select it.", width/2-22, 44);
}

// ------------------------------------------------------------------
// Inputs 

void mousePressed() {
  numberOfDetectedRect = -1; // unknown 
  for (int i=0; i<x.length; i++) {
    // detection? 
    if (mouseX>x[i]&&
      mouseX<x[i]+w[i]&& 
      mouseY>y[i]&&
      mouseY<y[i]+h[i]) {
      // detection
      // set marker 
      numberOfDetectedRect = i;
      // leave here yes/no
      if (leaveTheForLoopImmediately) {
        return; // !!!!!!!!!!!!!!!!!!!!!!!
      }//if
    }//if
  }//for
}//func

void keyPressed() {
  leaveTheForLoopImmediately = 
    ! leaveTheForLoopImmediately;
}
//

```