Can a PeasyCam cube have clickable faces? (Plus other small PeasyCam questions)

Processing Libraries
1

Hi guys, I;m pretty sure I haven’t seen any questions similar enough to my problem. I’m wondering if I can, using the PeasyCam library for Processing v3.4, make each face of the cube a clickable button? I’m familiar with creating buttons in 2d programs, but I am unsure if this library even allows this kind of thing or not. The idea of the program is to have a cube that, when clicked on, displays video and audio on the clicked face.
If PeasyCam doesn’t work, is there some other 3d library I should try using?

Thanks in advance for any advice. One other amateur question:

On the offical FAQ/code for peasycam, it says I can change the mousewheel zoom default function with the following code:

// mouse wheel zooms by default; set null, or make your own
camera.setWheelHandler(PeasyWheelHandler handler);
PeasyWheelHandler getZoomWheelHandler();

how would I disable the mousewheel zoom / make it null?

Here’s the (very simple) code thus far.

import peasy.*;

PeasyCam cam;

// so far I have been able to create an actual 3d Cube with the PeasyCam library

// I have successfully constrained mouse-dragging along the X-axis only

// Next challenge is to make the faces clickable, then to add the video/audio


void setup() {
  size(800, 800, P3D);
  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(0);
  cam.setMaximumDistance(1000);
}
void draw() {
  cam.setYawRotationMode();  // like spinning a globe
  rotateX(-.5);
  rotateY(-.5);
  background(0);
  fill(255);
  box(30);
  pushMatrix();
  translate(0, 0, 20);
  fill(0, 0, 255);
  popMatrix();
}
1 Like
2

To pick the sides of a cube, check ray tracing techniques in 3D. For example here.

For the second question, try this:

import peasy.*;

PeasyCam cam;

void setup() {
  size(800, 800, P3D);
  cam = new PeasyCam(this, 100);
  cam.setMinimumDistance(0);
  cam.setMaximumDistance(1000);
  
  cam.setYawRotationMode();  // like spinning a globe
  cam.setWheelHandler(null);
}
void draw() {
  
  rotateX(-.5);
  rotateY(-.5);
  background(0);
  fill(255);
  box(30);
  pushMatrix();
  translate(0, 0, 20);
  fill(0, 0, 255);
  popMatrix();
}

Kf

1 Like
3

thank you, the null mousewheel pointer works, I think I just mistyped it when I tried it.

Could I ask you one more question in regards to ray tracing / 3d: can I project a separate video or image onto each of the faces of the cube?

thanks again

4

For making multiple faces on object pickable, one method is to make each face a separate object and then use the Picking library.

Here is a demo with simple cubes – instead, you want six rectangles instead of one cube.

http://n.clavaud.free.fr/processing/library/picking/examples/Simple_Cubes/Simple_Cubes.pde

With the six rectangle approach each surface is a separate object and so you can apply an image / texture to each.

2 Likes
5

Oh, thank you, I remember briefly looking at Picking, but I wasn’t sure exactly how it worked.

I’m having some trouble implementing Picking now, though. If I wanted to make the grey rectangle in my program clickable / perform a function when clicked, how would I write this using Picking’s language? I can’t find any references apart from the example code you provided

Here’s my code now, I would be grateful if you or anyone else could take a look at this grey rectangle that I so desperately want to be interactive (the code has a lot of bulk to cut out, apologies in advance):

Also, at this point I have completely stopped using PeasyCam as it interfered too much and I found a simpler way of doing what I wanted. I am still interested in clickable faces, or at the very least, a clickable 3d object.


//import peasy.*;
boolean booleantrue=true;
boolean booleanfalse=false;
//PImage image;
float max_distance;
int stage;
PGraphics pg;
//float x;
//float y;
//float easing = 0.05;

//PeasyCam cam;

void setup() {
  size(900, 900, P3D);
  //cam = new PeasyCam(this, 100);
  //cam.setActive(booleantrue);
  //cam.setMinimumDistance(50);
  //cam.setMaximumDistance(500);
  //cam.setWheelHandler(null);
  ortho();
  //image = loadImage("image.jpg");
  max_distance = dist(0,0,width,height);
  pg=createGraphics(80,80);
}
void draw() {
  background(15);
  
  noStroke();
  fill(45);
  
  //float targetX=mouseX;
  //float dx=targetX - x;
  //x += dx*easing;
  
  //float targetY= mouseY;
  //float dy = targetX-x;
  //j += dy*easing;
  
  for(int i = 0; i <= width; i += 20) {
    for(int j = 0; j <= height; j += 20) {
      float size = dist(mouseX, mouseY, i, j);
      size = size/max_distance * 8;
      ellipse(i, j, size, size);
    }
  }
  pushMatrix();
  translate(450, 250, 450);
  rotateX(-.5);
  rotateY(-.5);
  rotateZ(frameCount*0.005); //frameCount*.005 looks best for the aesthetic
  rotateX(frameCount*0.005);
  rotateY(frameCount*0.005);
  //rotateX(mouseX*0.0025);     //cube will move with mouse (slightly)
  //rotateY(mouseY*0.0025);
  stroke(1);
  fill(255);
  if (mouseX >450&&mouseX<900) {
    rotateX(radians((mouseX*-0.0035)));
    rotateZ(radians((mouseX*-0.0035)));
  } else if (mouseX>0&&mouseX<450) {
    rotateX(radians((mouseX*0.0035)*-1));
    rotateZ(radians((mouseX*0.0035)*-1));
  }
  box(80);

  fill(65, 65, 65);
  popMatrix();


  //GREY RECTANGLE
  
  //Z 90degrees forward to make it vertical
  //Y 45degrees to make it diagonal facing screen
  pushMatrix();
  translate(450, 730, 330);
  rotateZ(radians(300)); //X axis
  rotateX(radians(395));  //
  rotateY(radians(45));

  //midpoint is 450, made a "deadzone" of 3 pixels where there is no interaction
  if (mouseX >451&&mouseX<900) {
    rotateX(radians((mouseX*-0.0035)));
    rotateZ(radians((mouseX*-0.0035)));
  } else if (mouseX>0&&mouseX<449) {
    rotateX(radians((mouseX*0.0035)*-1));
    rotateZ(radians((mouseX*0.0035)*-1));
  }

  if (mouseY>451&&mouseY<900) {
    rotateY(radians((mouseY*-0.0035)));
  } else if (mouseY>0&&mouseY<449) {
    rotateY(radians((mouseY*0.0035)*-1));
  }

  
  box(300, 300, 500);


  popMatrix();
  
  //beginShape(POINTS);
  //texture(image);
  //vertex(400, 500, 0);
  //vertex(500, 400, 100);
  //vertex(400, 90, 100);
  //vertex(500, 95, 0);
  //endShape();

  println(mouseX);

  //test boxes

  //x box BLUE
  fill(50, 50, 200);
  box(200, 50, 50);

  //y box GREEN
  fill(50, 200, 50);
  box(50, 200, 50);

  //z box RED
  fill(200, 50, 50);
  box(50, 50, 200);
  
  pg.beginDraw();
  pg.background(100);
  pg.stroke(255);
  pg.line(20,20,mouseX,mouseY);
  pg.endDraw();
  image(pg,800,30);
  image(pg,51,30);




  //if mousePressed() {


  //  //cam.lookAt(mouseX, mouseY, 0);
  //}
}