Use a shape as a button

Peridactite · March 2018

Here I have a box that is supposed to open when the door is clicked. Right now I have it so that when the user clicks the cube it opens. This works, except it doesn't account for the cube having been rotated. How would I set it up so it listens to the actual object not some area of the screen?

angle = 0;
open = false;
closed = false;
var door;

function setup() {
  createCanvas(500,500, WEBGL);
}
function openSesame(){
    if(open){
        if(angle > (PI/4)){
            running = false;
            rotateZ(PI/4);
        } else{
        rotateZ(angle);
        }
    } else {
        // rotateZ(PI/4);
    }
}



function draw() {
    // print(mouseX + ' ' + mouseY);
    background(175);
    rectMode(CENTER);
    fill(0, 255,255);
    //rect(0,0,150,200);
    rotateX(PI/6);
    rotateY(-PI/4);
    box(100);

    fill(0,0,0);
    translate(0,50,50);
    rotateY(PI/2);

    openSesame();
    translate(-5,-50,0);
    door = box(10,100,100);
    angle += .01;


}
function mousePressed() {

    if ((mouseX > (width/2 - 50) && mouseY > (height/2 - 50))
    && (mouseX < (width/2 + 50) && mouseY < (height/2 + 50))){
        print("ok");
        if(open){
            open = false;
            closed = true;
        }else{
            open = true;
            closed = false;
        }
    }
}

kfrajer · March 2018

Unfortunately what you are looking for is screenX and screenY but it seems like it is not available in p5.js:

https://forum.processing.org/two/discussion/17715/converting-webgl-3d-coordinates-to-2d-screen-coordinates-p5-js

A bad hacky way would be to test the color under the mouse pointer. That is, if your dolor has a unique color in your scene.

Kf

Chrisir · March 2018

A bad hacky way would be to test the color under the mouse pointer. That is, if your door has a unique color in your scene.

I wouldn't call that hacky. Moreover, to address the color problem you can draw the PShape on a PGraphics (same size as canvas) in a unique color (e.g. only red instead of an image) and check the mouse color there.

Remark

This works, except it doesn't account for the cube having been rotated.

When the rotation is only e.g. 90 degrees you could set a boolean cubeHasBeenRotated to true.

When checking the mouse you can take into account the value of cubeHasBeenRotated :

boolean checkMouseOn() {
    // check door 
    if(cubeHasBeenRotated) {
       // after the rotation
       if(mouseX>.....
         return true;
    }
    else {
       // before the rotation
       if(mouseX>.....  // use other values here!!!!!!!!!!!!!!!!
         return true;
    }
    return false; 
}

Peridactite · March 2018

I might try the color hack if

When checking the mouse you can take into account the value of cubeHasBeenRotated :

I don't really understand what you want me to do with the information that it has been rotated. It helps a lot to know that that cubeHasBeenRotated exists, but I still don't know how I would check in the case that it HAS been rotated.

The way I imagine I could solve this problem is if I were to use the same 3D>2D process the library uses to draw the 2D pixels except when it gets to the part where you draw, instead of drawing it instead checks for mouse clicks??

ShapeButton

blindfish · March 2018

@kfrajer using a buffer image for hit detection is so bad and hacky that it's been a standard approach for hit detection in games since the dawn of time :P

kfrajer · March 2018

@blindfish My concept is to do the math and implement the transformations (I never make my life easier... so I should learn). Glad to know that works and it is not bad after all... Also notice I don't know how to use that word properly...

Kf

Chrisir · March 2018

THE idea of cubeHasBeenRotated :

I assumed a door or door handle that only has two angles/ angle situation

If it had beed a 90 degree turn, you could have used that - because then you would know where it is

Howdy, Stranger!

Categories

In this Discussion

Use a shape as a button

Best Answer

Answers