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

**URL:** <https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549>\
**Category:** Libraries\
**Created:** [December 12, 2018, 7:02pm UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549 "2018-12-12T19:02:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![rumeauc1](https://avatars.discourse-cdn.com/v4/letter/r/f04885/32.png) [@rumeauc1](https://discourse.processing.org/u/rumeauc1)\
**Post date:** [December 12, 2018, 7:03pm UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549/1 "2018-12-12T19:03:00Z")

</div>

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](http://mrfeinberg.com/peasycam/), it says I can change the mousewheel zoom default function with the following code:

```auto
// 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.

```auto
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();
}

```

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [December 13, 2018, 5:14am UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549/2 "2018-12-13T05:14:13Z")

</div>

To pick the sides of a cube, check ray tracing techniques in 3D. For example [here](https://forum.processing.org/two/discussion/21644/picking-in-3d-through-ray-tracing-method).

For the second question, try this:

```auto
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

---

<div class="post-metadata">

**Author:** ![rumeauc1](https://avatars.discourse-cdn.com/v4/letter/r/f04885/32.png) [@rumeauc1](https://discourse.processing.org/u/rumeauc1)\
**Post date:** [December 13, 2018, 4:18pm UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549/3 "2018-12-13T16:18:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 17, 2018, 5:49pm UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549/4 "2018-12-17T17:49:16Z")

</div>

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](http://n.clavaud.free.fr/processing/library/picking/examples/Simple_Cubes/Simple_Cubes.pde)

> [@rumeauc1](#):
>
> can I project a separate video or image onto each of the faces of the cube?

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

---

<div class="post-metadata">

**Author:** ![rumeauc1](https://avatars.discourse-cdn.com/v4/letter/r/f04885/32.png) [@rumeauc1](https://discourse.processing.org/u/rumeauc1)\
**Post date:** [December 17, 2018, 9:40pm UTC](https://discourse.processing.org/t/can-a-peasycam-cube-have-clickable-faces-plus-other-small-peasycam-questions/6549/5 "2018-12-17T21:40:11Z")

</div>

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.

```auto

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

```