MousePressed : select only item in front

p5.js Coding Questions
1

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!

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

Hello,

Consider making a custom button for overlapping buttons.

Processing example:

image
image252Ă—574 9.58 KB

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

:)

3

Here you need to use if…else if…

4

No this is needed in the class except in the constructor

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

:)

6

Hi!

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

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

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

Here is my code:

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

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

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

same as

  clicked() {
    color = 0;
    x  = x + 100;
  }
1 Like
8
1 Like
9

You can clean this up a bit by doing this:

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?

Your code needs some work still.
:)

10

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 :

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);
  }
}
1 Like
11

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

12

Hello,

You got it!

:)

13

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

Then I wrote

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

14

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