# MousePressed : select only item in front

**URL:** <https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936>\
**Category:** Coding Questions\
**Created:** [October 26, 2020, 9:59pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936 "2020-10-26T21:59:45Z")\
**Posts on this page:** 14\
**Page:** 1

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [October 26, 2020, 9:59pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/1 "2020-10-26T21:59:45Z")

</div>

Hi! How can I select only the object in front when two objects are stacked?

I made a very simple code to show what I mean. In this example, I would like to change only the color of the smaller circle.

Thanks!

```auto
let bubble1;
let bubble2;

function setup() {
  createCanvas(400, 400);
  bubble1 = new Bubble(200, 200, 100);
  bubble2 = new Bubble(200, 200, 50);
}

function draw() {
  background(220);
  bubble1.show();
  bubble2.show();
}

function mousePressed() {
  if (bubble1.inside(mouseX, mouseY)) {
    bubble1.clicked()
  }
    if (bubble2.inside(mouseX, mouseY)) {
    bubble2.clicked()
  }
}

class Bubble {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
    this.color = 100;
  }

  inside() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  clicked() {
    this.color = (0);
  }

  show() {
    stroke(255);
    fill(this.color);
    ellipse(this.x, this.y, this.r);
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 27, 2020, 7:20am UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/2 "2020-10-27T07:20:45Z")

</div>

Hello,

Consider making a custom button for overlapping buttons.

Processing example:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/31fb3b9f99264cd32a64729210eef6c9e6a138ca.png)

You may have to modify code to select only areas over the new overlapping buttons.

`:)`

---

<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 27, 2020, 7:38am UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/3 "2020-10-27T07:38:55Z")

</div>

> [@vlafortune](#):
>
> `mousePressed`

Here you need to use if…else if…

---

<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 27, 2020, 10:56am UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/4 "2020-10-27T10:56:36Z")

</div>

No this is needed in the class except in the constructor

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 27, 2020, 10:54pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/5 "2020-10-27T22:54:40Z")

</div>

Hello,

Try this and it should lead to a solution for you:

```auto
function mousePressed() 
  {
  if (bubble1.inside(mouseX, mouseY)) 
    {
    bubble1.clicked()
    print("b1");
    }

  if (bubble2.inside(mouseX, mouseY)) 
    {
    bubble2.clicked()
    print("b2");
    }
  }

```

`:)`

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [October 28, 2020, 1:41pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/6 "2020-10-28T13:41:00Z")

</div>

Hi!

I tried else if in mousePressed. It worked well! Thank you both.

But I didn’t understand Chrisir what you meant by:

> [@Chrisir](#):
>
> No this is needed in the class except in the constructor

Maybe there is a better way than the one I used?

Here is my code:

```auto
let bubble1;
let bubble2;
let bubble3;

function setup() {
  createCanvas(400, 400);
  bubble1 = new Bubble(200, 200, 100);
  bubble2 = new Bubble(200, 200, 50);
  bubble3 = new Bubble(200, 200, 30);
}

function draw() {
  background(220);
  bubble1.show();
  bubble2.show();
  bubble3.show();
}

function mousePressed() {
    if (bubble3.inside(mouseX, mouseY) && ((bubble2.inside(mouseX, mouseY)) || (bubble1.inside(mouseX, mouseY)))) {
     bubble3.clicked();
    } else if (bubble2.inside(mouseX, mouseY) && (bubble1.inside(mouseX, mouseY))) {
      bubble2.clicked();
    } else {
  bubble1.clicked();
    }
}

class Bubble {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
    this.color = 100;
  }

  inside() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    if (d < this.r) {
      return true;
    } else {
      return false;
    }
  }

  clicked() {
     this.color = (0);
    this.x = this.x + 100;
  }

  show() {
    stroke(255);
    fill(this.color);
    ellipse(this.x, this.y, this.r);
  }
}

```

---

<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 28, 2020, 2:22pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/7 "2020-10-28T14:22:52Z")

</div>

> [@vlafortune](#):
>
> But I didn’t understand Chrisir what you meant by:
> 
> No this is needed in the class except in the constructor

my apologies.

I meant you use the keyword “this” too often in your class.

It is necessary in the constructor, but not in `clicked()` or show()

so for example

```auto
  clicked() {
     this.color = (0);
    this.x = this.x + 100;
  }

```

same as

```auto
  clicked() {
    color = 0;
    x = x + 100;
  }

```

---

<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:** [October 28, 2020, 2:31pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/8 "2020-10-28T14:31:56Z")

</div>

> [@Chrisir](#):
>
> It is necessary in the constructor, but not in **clicked()** or **show()**.

> [@Converting my Processing code to p5.js (ArrayList + others!)](https://discourse.processing.org/t/converting-my-processing-code-to-p5-js-arraylist-others/14936/3):
>
> That’s not how we define classes’ constructor, methods & fields under JS syntax! You should read the JS reference for it: Also, there’s no ArrayList either. We use JS arrays instead: And while in Java we can generally omit the keyword this before accessing a class member, in JS it’s mandatory: [[This Dot - Daniel Shiffman (Coding Train)] ](https://www.youtube.com/watch?v=M5d7vygUPoQ) Now w/ all the info above, here’s a partial but proper JS conversion of your class ParticleSystem: class ParticleSystem { constructor(posit…

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 28, 2020, 10:23pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/9 "2020-10-28T22:23:43Z")

</div>

> [@vlafortune](#):
>
> ```auto
> function mousePressed() {
> if (bubble3.inside(mouseX, mouseY) && ((bubble2.inside(mouseX, mouseY)) || (bubble1.inside(mouseX, mouseY)))) {
> bubble3.clicked();
> } else if (bubble2.inside(mouseX, mouseY) && (bubble1.inside(mouseX, mouseY))) {
> bubble2.clicked();
> } else {
> bubble1.clicked();
> }
> }
> 
> ```

You can clean this up a bit by doing this:

```auto
function mousePressed() 
  {
  b1 = bubble1.inside(mouseX, mouseY)
  b2 = bubble2.inside(mouseX, mouseY)
  
    if (b1&!b2) 
    {
    // Do something
    }
  
   else if (b1&b2) 
    {
    // Do something
    }
  }

```

Did you try print() statements to see when the mouse is actually inside the circles for your conditions?

> [@MousePressed : select only item in front](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/5):
>
> Hello, Try this and it should lead to a solution for you: function mousePressed() { if (bubble1.inside(mouseX, mouseY)) { bubble1.clicked() print("b1"); } if (bubble2.inside(mouseX, mouseY)) { bubble2.clicked() print("b2"); } }slight_smile

Your code needs some work still.  
`:)`

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [October 29, 2020, 4:24pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/10 "2020-10-29T16:24:48Z")

</div>

Hi!

@glv I made changes you suggested. It’s indeed more clean. It allowed me to see where I made typing mistakes. It works fine now

@Chrisir I tried to remove this.color in the constructor, but it gave a mistake. I look into it further with @GoToLoop suggested documentation (I’m already a fan of Dan Shiffman).

Here is my new code :

```auto
let bubble1;
let bubble2;
let bubble3;
let bubble4;

function setup() {
  createCanvas(400, 400);
  bubble1 = new Bubble(100, 200, 100);
  bubble2 = new Bubble(100, 200, 50);
  bubble3 = new Bubble(100, 200, 30);
  bubble4 = new Bubble(100, 100, 10);
}

function draw() {
  background(220);
  bubble1.show();
  bubble2.show();
  bubble3.show();
  bubble4.show();
}

function mousePressed() {
  b1 = bubble1.inside(mouseX, mouseY);
  b2 = bubble2.inside(mouseX, mouseY);
  b3 = bubble3.inside(mouseX, mouseY);
  b4 = bubble4.inside(mouseX, mouseY);
  
  if (b4 | (b4 & (b3 | b2 | b1))) {
    bubble4.clicked();
    print("b4");
  } else if (b3 | (b3 & (b2 | b1))) {
    bubble3.clicked();
    print("b3");
  } else if (b2 | (b2 & b1)) {
    bubble2.clicked();
    print("b2");
  } else {
    bubble1.clicked();
    print("b1");
  }
}

class Bubble {
  constructor(tempX, tempY, tempR) {
    this.x = tempX;
    this.y = tempY;
    this.r = tempR;
    this.color = 100;
  }

  inside() {
    let d = dist(this.x, this.y, mouseX, mouseY);
    if (d < this.r/2) {
      return true;
    } else {
      return false;
    }
  }

  clicked() {
    this.color = (0);
    this.x = this.x + 50;
  }

  show() {
    stroke(255);
    fill(this.color);
    ellipse(this.x, this.y, this.r);
  }
}

```

---

<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 29, 2020, 4:25pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/11 "2020-10-29T16:25:33Z")

</div>

> [@vlafortune](#):
>
> @Chrisir I tried to remove this.color in the constructor, but it gave a mistake. I look into it further

as I said, NOT in the constructor, but everywhere else in the class

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [October 29, 2020, 5:45pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/12 "2020-10-29T17:45:17Z")

</div>

Hello,

> [@vlafortune](#):
>
> `if (d < this.r/2)`

You got it!

`:)`

---

<div class="post-metadata">

**Author:** ![vlafortune](https://avatars.discourse-cdn.com/v4/letter/v/9fc348/32.png) [@vlafortune](https://discourse.processing.org/u/vlafortune)\
**Post date:** [October 31, 2020, 1:11pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/13 "2020-10-31T13:11:26Z")

</div>

> [@Chrisir](#):
>
> as I said, NOT in the constructor, but everywhere else in the class

I tried. I removed this.color from the constructor.

Then I wrote

```auto
Clicked() {
color = 0;
thix x = this.x + 50;
}

```

Color doesn’t change anymore.

To initially build my Bubble class, I followed Dan Shiffman “what it means to be a bubble” [https://youtu.be/T-HGdc8L-7w](https://youtu.be/T-HGdc8L-7w). He says in the Class, always use “this.”.

I read and watched @gotoloop suggested (loved the this dot dance!), and it points in the same direction. I have to use “this.” in the class (both in the constructor and elsewhere in the class).

---

<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 31, 2020, 3:42pm UTC](https://discourse.processing.org/t/mousepressed-select-only-item-in-front/24936/14 "2020-10-31T15:42:59Z")

</div>

You can remove the keyword this inside the class EXCEPT in the constructor