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

Processing Coding Questions
1

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.

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

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


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

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:

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

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