Control P5 Buttons in P3D follows the 3D orientation of the sketch. How to make it fixed?

Processing Libraries
1

If I do the same for a normal sketch with nothing in it the button appears. But even if I write the same code for my sketch, the button does not appear.

The result is following:

Capture
Capture1346×686 199 KB

The funny thing is if I click in approximate location of the button it works.

Capture5
Capture51352×623 172 KB

Here I toggled off the red set of curves clicking approximately where the button might have been.

This is my code in which the button does not appear:

import controlP5.*;

PImage worldMap;
PShape box;
Table table, table2;
int rowCount;
float x1, y1, z1, x2, y2, z2;

//Interaction Zoom and Pan Variables:
float zoom = 600;
float panLeft = 0;
float panTop = 0;


DestinationToTrip fromUSA;
DestinationToTrip toUSA;

ControlP5 button1;
ControlP5 button2;
boolean isFromUSAVisible = false;
boolean isToUSAVisible = false;


void setup() {
  size(1400, 800, P3D);
  table = new Table("From_USA_Coordinates.tsv");
  table2 = new Table("To_USA.tsv");
  rowCount = table.getRowCount();
  
  worldMap = loadImage("world.topo.bathy.200406.3x5400x2700.jpg"); 
  worldMap.resize(500, 300);
  textureMode(NORMAL);
  fill(255);
  //stroke(color(44,48,32));
  box = createShape(BOX, -650, 300, 0);
  box.beginShape(BOX);
  box.endShape();  
  box.setTexture(worldMap);
  
  fromUSA = new DestinationToTrip(table);
  toUSA = new DestinationToTrip(table2);
  
  fill(150);
  
  pushMatrix();
    camera();
    button1 = new ControlP5(this);
    button1.addButton("From_USA_to_Other_Countries").setValue(1).setPosition((100), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170)).setVisible(true);
    
    button2 = new ControlP5(this);
    button2.addButton("From_Other_Countries_to_USA").setValue(0).setPosition((350), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170));
  popMatrix();
}

void draw() {  
  background(155);  
  fill(0);  
  titlesAndLegends(); 
  boxSetup();
  
  if(isFromUSAVisible == true) {
  fromUSA.displayCurves(table, #F05252);  
  }
  
  if(isToUSAVisible == true){
  toUSA.displayCurves(table2, #6260F5 );
  }
}

void boxSetup(){
   camera(panLeft, zoom , zoom, panLeft, -150, panTop, 0, 1, 0);   // eye(0, 600, 600) center(0, 0, 0) up(0, 1, 0)
  
  pushMatrix();
    translate(-350, 0, 0);
    shape(box);
  popMatrix();  

  pushMatrix();
    translate(350, 0, 0);
    shape(box);
  popMatrix();  
}

void titlesAndLegends() {
  pushMatrix();
    camera();
    textAlign(CENTER);
    textSize(25);
    fill(0);
    text("Flights Involving USA - 2019", width/2, 50);  
    text("Member Country", 350, 200);
    text("Trip Country", width-350, 200);
  popMatrix();
}

void mouseDragged() {
  if((mouseX- pmouseX) > 0){
    panLeft -= 5;
  } else {
    panLeft += 5;
  }
}

void mouseWheel(MouseEvent event) {
  float e = event.getCount();
  if(e == 1) {
    zoom += 30;
  }else {
    zoom -= 30;
  } 
}

public void From_USA_to_Other_Countries() {
  if(!isFromUSAVisible) {
    isFromUSAVisible = true;
  }else {
    isFromUSAVisible = false;
  }
}

public void From_Other_Countries_to_USA() {
  if(!isToUSAVisible) {
    isToUSAVisible = true;
  }else {
    isToUSAVisible = false;
  }
}

If I write the same set of code in an empty sketch it works:

import controlP5.*;

ControlP5 button1;
ControlP5 button2;
boolean isFromUSAVisible = false;
boolean isToUSAVisible = false;

void setup() {
  size(700, 500, P3D);
  
  button1 = new ControlP5(this);
    button1.addButton("From_USA_to_Other_Countries").setValue(1).setPosition((100), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170)).setVisible(true);
    
    button2 = new ControlP5(this);
    button2.addButton("From_Other_Countries_to_USA").setValue(0).setPosition((350), (height-150)).setSize(200, 100).setColorBackground(color(76,112,170));
}

void draw() {
  
}

public void From_USA_to_Other_Countries() {
  if(!isFromUSAVisible) {
    isFromUSAVisible = true;
  }else {
    isFromUSAVisible = false;
  }
}

public void From_Other_Countries_to_USA() {
  if(!isToUSAVisible) {
    isToUSAVisible = true;
  }else {
    isToUSAVisible = false;
  }
}

Capture6

Can anybody please help me?

2

It is embedded in my 3d plane somewhere far beyond.
How to convert it into 2d like the texts. The trick that worked with the texts did not work for the buttons

Captureas
Captureas1375×787 77.2 KB

3

maybe use controlP5.setAutoDraw(false);

see https://codec.trembl.org/614/

void gui() {
currCameraMatrix = new PMatrix3D(g3.camera);
camera();
controlP5.draw();
g3.camera = currCameraMatrix;
}

flaws

there are flaws in your code; e.g. no pushMatrix popMatrix in setup needed

controlP5 = new ControlP5(this); only once

then 2 buttons, not 2 ControlP5

1 Like