why is "field of view" of "perspective" affecting the response of controlP5 GUI button?

oat

In the simple test code below, the controlP5 buttons seem to be working only if the field of view parameter of the perspective command is set as PI/3 (line 25).

Can anybody help to explain why? and what's the relationship between the perspective command, PeasyCam camera object and controlP5 GUI elements?

Thanks!

//----- import libraries and declare variables ------
import processing.opengl.*; 

import peasy.*;
PeasyCam cam;

//----- controlP5 -----
import controlP5.*;
ControlP5 controlP5;
boolean GUI = false;
boolean guiEvent = false;
Button[] buttons;


////////////////////////////////////////////////////////////////
void setup(){
  size(displayWidth-300,displayHeight-100,OPENGL);
  //size(800,600,OPENGL);
  smooth(8);

  //use the following to avoid pt been shown in fixed size (P2.0b8)
  hint(ENABLE_STROKE_PERSPECTIVE);

  //----- perspective -----
  float fov  = PI/3;  // field of view
  float nearClip = 1;
  float farClip = 100000;
  float aspect = float(width)/float(height);
  perspective(fov, aspect, nearClip, farClip);
  cam = new PeasyCam(this, 200); // the smaller the var, the close the distance to the object

  //----- GUI -----
  setupGUI();
  //guiEvent = false;

}



////////////////////////////////////////////////////////////////
void draw(){  
  background(0);

  //----- if mouse of GUI, no camera movement
  if(controlP5.window(this).isMouseOver()){
    cam.setActive(false);
  } else {
    cam.setActive(true);
  }  

  box(100,100,100);

  //----- draw GUI -----
  drawGUI();

}


////////////////////////////////////////////////////////////////
// reference: The Nature of Code M_6_4_01_TOOL.pde

void setupGUI(){
  controlP5 = new ControlP5(this);
  controlP5.setAutoDraw(false);

  //----- define menu group -----
  ControlGroup ctrl = controlP5.addGroup("menu",15,45)//name,x,y,w,h
                      .activateEvent(true)
                    //.setColorLabel(color(255))
                      .setColorBackground(color(255,100))
                      .setBackgroundHeight(height-55)
                      .setBackgroundColor(color(255,100))
                      .setWidth(210)
                      .setHeight(30)
                      .close()
                      ;

  buttons = new Button[30];

  buttons[0] = controlP5.addButton("load_csv")
                   .setLabel("load file")
                   .setPosition(5, 15)
                   .setSize(15,15)
                   ;

  //----- add buttons into menu -----
    buttons[0].setGroup(ctrl);
    buttons[0].captionLabel().toUpperCase(true);
    buttons[0].captionLabel().style().marginLeft = 15;

}


//////////////////////////////////////////////////
void drawGUI(){
  hint(DISABLE_DEPTH_TEST); 
    cam.beginHUD();
      controlP5.show();
      controlP5.draw();
    cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}



//----- event to load csv file -----
void load_csv(boolean theFlag){
  if(theFlag){
    selectInput("select a new .csv file", "loadCSV");
  }
}

akiersky

Hey Oat,

Looks like you may just need to add push/popMatrix() around your other drawing: http://forum.processing.org/one/topic/urgent-please-texts-and-controlp5-on-top-opengl-camera-rotation.html

Strange since you aren't doing any translations, but it must have something to do with the underlying way that PeasyCam is working to create the space.

here's an example from the maker of controlP5: http://www.sojamo.de/libraries/controlP5/examples/extra/ControlP5controllerOnTop3D/ControlP5controllerOnTop3D.pde

Hope this helps! ak

oat

Hi, akiersky, thanks! but can you be more specific on which part of the code I should "encapsulate" with push and popmatrix?

I'm not sure the problem is related to push/popmatrix ...

when you change the field of view value in line 25 to PI/2 or else, you can still interact with the GUI by pressing the topleft corner, although the GUI elements are not displayed over that position where they're expected to be shown ...

akiersky

Aah, I see now. sorry didn't try it before.

So rather than the push/popMatrix() you'll just need to reset your perspective before and after drawing your GUI.

  //----- draw GUI -----
  perspective();
  drawGUI();
  float fov  = PI/4;  // field of view
  float nearClip = 1;
  float farClip = 100000;
  float aspect = float(width)/float(height);
  perspective(fov, aspect, nearClip, farClip);

I think you could try making the floats global, but that wasn't working for me in the quick trial I did.

-ak

oat

Hi, akiersky, thank you very much for your kind advices!

The code revised according to your suggestion is shown below with the field of view and other related variables set as global.

Why the empty perspective() function is needed before the drawGUI() function, and why the perspective(fov, aspect, nearClip, farClip) is called again after the drawGUI() function, if I may ask?

//----- import libraries and declare variables ------
import processing.opengl.*;

import peasy.*;
PeasyCam cam;

//----- controlP5 -----
import controlP5.*;
ControlP5 controlP5;
boolean GUI = false;
boolean guiEvent = false;
Button[] buttons;


//----- perspective related variables ----- 
float fov = PI/5; // field of view
float nearClip = 1;
float farClip = 100000;
float aspect;



////////////////////////////////////////////////////////////////
void setup(){
  size(displayWidth-400,displayHeight-200,OPENGL);
  //size(800,600,OPENGL);
  smooth(8);

  //use the following to avoid pt been shown in fixed size (P2.0b8)
  hint(ENABLE_STROKE_PERSPECTIVE);

  //----- perspective -----
  aspect = float(width)/float(height);
  perspective(fov, aspect, nearClip, farClip);
  cam = new PeasyCam(this, 500); // the smaller the var, the close the distance to the object

  //----- GUI -----
  setupGUI();
  //guiEvent = false;

}



////////////////////////////////////////////////////////////////
void draw(){ 
  background(0);

  //----- if mouse of GUI, no camera movement
  if(controlP5.window(this).isMouseOver()){
    cam.setActive(false);
  } else {
    cam.setActive(true);
  } 

  box(100,100,100);

  //----- draw GUI -----
  perspective();
  drawGUI();
  perspective(fov, aspect, nearClip, farClip);
}


////////////////////////////////////////////////////////////////
// reference: The Nature of Code M_6_4_01_TOOL.pde  

void setupGUI(){
  controlP5 = new ControlP5(this);
  controlP5.setAutoDraw(false);

  //----- define menu group -----
  ControlGroup ctrl = controlP5.addGroup("menu",15,45)//name,x,y,w,h
                      .activateEvent(true)
                    //.setColorLabel(color(255))
                      .setColorBackground(color(255,100))
                      .setBackgroundHeight(height-55)
                      .setBackgroundColor(color(255,100))
                      .setWidth(210)
                      .setHeight(30)
                      .close()
                      ;

  buttons = new Button[30];

  buttons[0] = controlP5.addButton("load_csv")
                   .setLabel("load file")
                   .setPosition(5, 15)
                   .setSize(15,15)
                   ;

  //----- add buttons into menu -----
    buttons[0].setGroup(ctrl);
    buttons[0].captionLabel().toUpperCase(true);
    buttons[0].captionLabel().style().marginLeft = 15;

}


//////////////////////////////////////////////////
void drawGUI(){
  hint(DISABLE_DEPTH_TEST);
    cam.beginHUD();
      controlP5.show();
      controlP5.draw();
    cam.endHUD();
  hint(ENABLE_DEPTH_TEST);
}



//----- event to load csv file -----
void load_csv(boolean theFlag){
  if(theFlag){
    selectInput("select a new .csv file", "loadCSV");
  }
}

akiersky

Hey Oat,

The empty perspective() resets the camera to its defaults (what ControlP5 is expecting) then you want to set it back to your desired settings before the next draw loop. The second one (where you reset your settings) could happen right at the beginning of draw too, either way would work.

-ak

oat

noted with many thanks, akiersky!