MousePressed : select only item in front

[vlafortune]

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

[glv]

Hello,

Consider making a custom button for overlapping buttons.

Processing example:

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

:)

[Chrisir]

@vlafortune

mousePressed

Here you need to use if…else if…

[Chrisir]

No this is needed in the class except in the constructor

[glv]

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

:)

[vlafortune]

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:

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

[Chrisir]

@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

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

same as

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

[GoToLoop]

@Chrisir

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

Converting my Processing code to p5.js (ArrayList + others!)

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: Now w/ all the info above, here’s a partial but proper JS conversion of your class ParticleSystem: class ParticleSystem { constructor(position) { this.origin = position.copy(); th…

[glv]

@vlafortune

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:

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

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

Your code needs some work still.
:)

[vlafortune]

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

[Chrisir]

@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

[glv]

Hello,

@vlafortune

if (d < this.r/2)

You got it!

:)

[vlafortune]

@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

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

[Chrisir]

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