# How do you make a 3d bar clickable to display a message?

**URL:** <https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641>\
**Category:** Coding Questions\
**Created:** [April 10, 2020, 7:06pm UTC](https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641 "2020-04-10T19:06:52Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 10, 2020, 7:06pm UTC](https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641/1 "2020-04-10T19:06:52Z")

</div>

Hello, i have a 3D bar and i would like to make it clickable. I’ve created the 3d bar using pushmatrix() function and i would like to know how i can make it to display message once its clicked.

Here’s an example code.

```auto
boolean drawText = false;

void setup() {
size(800, 600, P3D);
}

void draw() {
background(0);
noStroke();

pushMatrix();
fill(204, 0, 0, 151);
translate(42, 75, 0);
box (5, 5, 10);
if(dist(mouseX,mouseY,27,-22)<0){
cursor(HAND);
} else {
cursor(ARROW);
}
if (drawText) {
fill(#FFFF00);
text("Hi!", 27, -22);
}
popMatrix(); 

pushMatrix();
fill(204, 0, 0, 151);
translate(42, 75, 0);
box (5, 5, 10);
popMatrix(); 

}
void mousePressed() {
if (mouseButton == LEFT && dist(mouseX,mouseY,27,-22)<0) {
drawText = drawText ? false : true;
}
}

```

---

<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 10, 2020, 7:22pm UTC](https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641/2 "2020-04-10T19:22:57Z")

</div>

here is an example with screenX, screenY - see reference

The cursor changes to hand when near the bar

you can also use get to detect the color underneath the cursor when your bars are of different colors (or use an offscreen buffer). The whole thing is called **picking** , you can search it in the forum

Regards, Chrisir

```auto

boolean drawText = false;

PVector pos2D = new PVector(); 

void setup() {
  size(800, 600, P3D);
}

void draw() {
  background(0);
  noStroke();

  pushMatrix();
  fill(204, 0, 0, 151);
  translate(442, 75, 0);
  box (5, 55, 10);
  pos2D.set(screenX(0, 0, 0), screenY(0, 0, 0)); 
  if (dist(mouseX, mouseY, 27, -22)<0) {
    cursor(HAND);
  } else {
    cursor(ARROW);
  }
  if (drawText) {
    fill(#FFFF00);
    text("Hi!", 27, -22);
  }
  popMatrix(); 

  pushMatrix();
  fill(204, 0, 0, 151);
  translate(42, 75, 0);
  box (5, 55, 10);
  popMatrix();

  if ( dist(mouseX, mouseY, pos2D.x, pos2D.y)<60 ) 
    cursor(HAND);
  else
    cursor(ARROW);
}

void mousePressed() {
  if (mouseButton == LEFT && dist(mouseX, mouseY, pos2D.x, pos2D.y)<60) {
    // drawText = drawText ? false : true;
    drawText = ! drawText;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Stage1](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Stage1](https://discourse.processing.org/u/Stage1)\
**Post date:** [April 10, 2020, 7:45pm UTC](https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641/3 "2020-04-10T19:45:22Z")

</div>

Hi Chris.

I managed to make it work but as i have more than one 3d bar i want each of them to display a different message when clicked on. So my question is when i keep re using the if statement you created under each pushMatrix() function it doesnt allow me to hover over the first 3d bar but allows me to hover over the 2nd one without the cursor hand being displayed.

For example:

```auto
pushMatrix();
fill(204, 0, 0, 151);
translate(27, -22, 0);
box (5, 5, 10);
pos2D.set(screenX(0, 0, 0), screenY(0, 0, 0));
popMatrix();

 if ( dist(mouseX, mouseY, pos2D.x, pos2D.y)<60 ) {
    cursor(HAND);
 }else {
    cursor(ARROW);
 }
    if (drawText) {
      fill(#FFFF00);
      text("hello world!", 27, -22);
    }

pushMatrix();
fill(204, 0, 0, 151);
translate(27, 59, 0);
box (5, 5, 10);
pos2D.set(screenX(0, 0, 0), screenY(0, 0, 0));
popMatrix();

if ( dist(mouseX, mouseY, 27, 59)<60 ) {
    cursor(HAND);
 }else {
    cursor(ARROW);
 }
    if (drawText) {
      fill(#FFFF00);
      text("test!", 27, 59);
    }

```

---

<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 10, 2020, 8:16pm UTC](https://discourse.processing.org/t/how-do-you-make-a-3d-bar-clickable-to-display-a-message/19641/4 "2020-04-10T20:16:54Z")

</div>

The appropriate answer would be:

bring your bars into an array and also the texts and the screenX and screenY

See [https://github.com/Kango/Processing-snippets/wiki/Variables,-Arrays-and-object-oriented-programming](https://github.com/Kango/Processing-snippets/wiki/Variables,-Arrays-and-object-oriented-programming)