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

**URL:** <https://discourse.processing.org/t/control-p5-buttons-in-p3d-follows-the-3d-orientation-of-the-sketch-how-to-make-it-fixed/19618>\
**Category:** Libraries\
**Created:** [April 10, 2020, 12:11pm UTC](https://discourse.processing.org/t/control-p5-buttons-in-p3d-follows-the-3d-orientation-of-the-sketch-how-to-make-it-fixed/19618 "2020-04-10T12:11:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Samizen](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Samizen](https://discourse.processing.org/u/Samizen)\
**Post date:** [April 10, 2020, 12:11pm UTC](https://discourse.processing.org/t/control-p5-buttons-in-p3d-follows-the-3d-orientation-of-the-sketch-how-to-make-it-fixed/19618/1 "2020-04-10T12:11:08Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/02ead1865dce80a167cf001cbcd53f062e4136fa.png)

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

 ![Capture5](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4b5f042fece104532c9be522e1c57dedb86a9c65.png)

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:

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

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/13fa162013e1fcef57c39b32ad30e9e615d07262.png)

Can anybody please help me?

---

<div class="post-metadata">

**Author:** ![Samizen](https://avatars.discourse-cdn.com/v4/letter/s/dfb087/32.png) [@Samizen](https://discourse.processing.org/u/Samizen)\
**Post date:** [April 10, 2020, 5:47pm UTC](https://discourse.processing.org/t/control-p5-buttons-in-p3d-follows-the-3d-orientation-of-the-sketch-how-to-make-it-fixed/19618/2 "2020-04-10T17:47:26Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/9/998313c19a9f5d9f6aa70c4fb9568f97a2574ca4.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [April 10, 2020, 7:37pm UTC](https://discourse.processing.org/t/control-p5-buttons-in-p3d-follows-the-3d-orientation-of-the-sketch-how-to-make-it-fixed/19618/3 "2020-04-10T19:37:41Z")

</div>

maybe use controlP5.setAutoDraw(false);

see [https://codec.trembl.org/614/](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

> [@Samizen](#):
>
> ControlP5 button1; ControlP5 button2;

controlP5 = new ControlP5(this); only once

then 2 buttons, not 2 ControlP5