Clickable 3d shape using pushmatrix() function to show a message?

Hello i would like to know how i can make my 3D bars to display a message everytime its clicked on it.

For example i've got a 3D bar on a 2D image and when i hover over it and click it once it should display the message on the same screen and if i click on it again it should make the message dissapear.

My code:

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

I would like to know if i have more than one 3D shape how would i create a button using mousePressed() to allow me to use LEFT button click when the shape is clicked. Also since im using pushMatrix() function is it still possible for it to work?

First off I recommend indenting your code (Ctrl + T on Windows/Linux, CMD+T on OSX does the work for you). This makes your code much easier to read / scan quickly.

On the long run you will realise you spend more time reading/debugging code than actually typing, so I warmly recommend doing whatever makes your life easier

From what I gather in your code it looks like you're confused about coordinates and coordinate systems. Please review the Coordinate Systems and 2D Transformation tutorials

I say that because you're drawing both boxes on top of each other at coordinates 42, 75.
Additionally you're checking the distance between mouse coordinates and 27,-22 (where you also draw text. The distance will never be < 0 by the way.

To debug your program it's a good idea to break it down to it's sections and test one thing at a time. Personally I write minimal sketch to test assumptions before implementing them into a bigger program.

For example disproving dist() < 0 is easy with a minimal test sketch.
Make a new sketch, paste the following and run:

void draw(){
background(255);
line(50,50,mouseX,mouseY);
fill(0);
text("x:"+mouseX+",y:"+mouseY + "\nd:" + dist(mouseX,mouseY,50,50),mouseX,mouseY);
}

The other thing to bare in mind is you would use global coordinates when checking 2D screen bounds around the boxes, not the relative coordinates (offset using translate()).

Here's a tweaked version of your sketch using dist():

boolean drawText = false;
float radius = 22.5;
float diameter = radius * 2;
void setup() {
size(800, 600, P3D);
}
void draw() {
background(0);
noStroke();
pushMatrix();
// visualise radius
fill(255,30);
ellipse(44, 80, diameter, diameter);
ellipse(108, 80, diameter, diameter);
fill(204, 0, 0, 151);
translate(42, 75, 0);
box (50, 50, 10);
if(isOver(mouseX, mouseY, 44, 80, radius) ||
isOver(mouseX, mouseY, 108, 80, radius)) {
cursor(HAND);
} else {
cursor(ARROW);
}
if (drawText) {
fill(#FFFF00);
text("Hi!", 27, -22);
}
popMatrix(); 
pushMatrix();
fill(35, 198, 13, 151);
translate(110, 75, 0);
box (50, 50, 10);
popMatrix();
}
void mousePressed() {
if (mouseButton == LEFT) {
if(isOver(mouseX, mouseY, 44, 80, radius) ||
isOver(mouseX, mouseY, 108, 80, radius)) {
drawText = !drawText;
}
}
}
boolean isOver(int mx, int my, float x, float y, float radius){
return dist(mx,my,x,y) < radius;
}

Bare in mind I am using a couple of shortcuts:

• drawText = drawText ? false : true; is the same as drawText = !drawText; using logical NOT)
• the isOver() function is similar to the button example overCircle() function, however it simply returns a boolean (using < as a conditional operator)

Also notice the circles drawn near the boxes which act as the button's active areas and how the cursor doesn't change around the box corners. The radius can be tweaked so it covers more of the boxes, however due to the shape of the ellipse the active area will either miss the corners or go over the sides. Another considation if you were to have many many box buttons for example dist() may turn slow (as it uses sqrt() behind the scenes).

In the particular I recommend something like the overRect() function from the Button example: a rectangle will fit the 3D box shape in that orientation better and be faster to compute:

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 (50, 50, 10);
if(isOver(mouseX, mouseY, 13, 47, 57, 57) ||
isOver(mouseX, mouseY, 82, 47, 57, 57)) {
cursor(HAND);
} else {
cursor(ARROW);
}
if (drawText) {
fill(#FFFF00);
text("Hi!", 24, -38);
}
popMatrix(); 
pushMatrix();
fill(35, 198, 13, 151);
translate(110, 75, 0);
box (50, 50, 10);
popMatrix();
}
void mousePressed() {
if (mouseButton == LEFT) {
if(isOver(mouseX, mouseY, 13, 47, 57, 57) ||
isOver(mouseX, mouseY, 82, 47, 57, 57)) {
drawText = !drawText;
}
}
}
boolean isOver(int mx, int my, int x, int y, int w, int h){
return ((mx >= x && mx <= x + w) &&
(my >= y && my <= y + h));
}

As an improvement you could create variables at the top of your sketch for each button's global 2D bounding box x,y, width and height to re-use easily instead of using copy/pasted constant values. The advantage is it would make the code more flexible: easier to change button position, size, etc.

If you are confused over functions and return values I recommend Daniel Shiffman's function tutorials:

1. 7.2: Functions Basics - Processing Tutorial
2. 7.3: Modularity with Functions - Processing Tutorial
3. 7.4: Reusability with Functions - Processing Tutorial