2D gui on top of 3D scene

ofey

I am trying to create a 2D GUI on top of a 3D scene. The code works on my computer but not when I put it online here. Using the file processing.min.js v1.4.7

import processing.opengl.*;
boolean overRegion = false;
boolean pressed = false;
boolean button = false;
void setup() {
  size(400, 400, OPENGL);
}
void draw() {
  background (255, 255, 255);
  if (mouseY > 30.0) {
    overRegion = true;
  }
  else {
    overRegion = false;
  }
  camera(200, mouseY, 50, 0, 0, 0, 0, 1, 0);
  stroke(200, 0, 0);
  line(-200, 0, 0, 200, 0, 0);
  stroke(0, 200, 0);
  line(0, -200, 0, 0, 200, 0);
  stroke(0, 0, 200);
  line(0, 0, -200, 0, 0, 200);
  stroke(0, 0, 0);
  if (button) {
    box(50);
  }
  hint(DISABLE_DEPTH_TEST);
  camera();
  stroke(0, 0, 0);
  fill(#919293);
  textSize(12);
  if (button) {
    fill(#BFE1F0);
    rect(0, 0, 55, 30, 7);
  } 
  else {
    fill(#6FCBF5);
    rect(0, 0, 55, 30, 7);
  }
  fill(0, 0, 0);
  text("button", 11, 20);
  hint(ENABLE_DEPTH_TEST);
}
void mousePressed() {
  if (overRegion) {
    pressed = true;
  } 
  else {
    pressed = false;
  }
  if (mouseButton == LEFT) {
    if (mouseX > 0 && mouseX < 55 && mouseY > 0 && mouseY < 30) {
      button = !button;
    }
  }
}
void mouseReleased() {
  pressed = false;
}

Thanks, Shane

ofey

I have noticed that if I comment out lines 34 and 38 it works. So why can hint() not handle rect()? I understood that once I use hint(DISABLE_DEPTH_TEST); it is just the same as working with a 2D space.

GoToLoop

Function hint() is not even mentioned in http://Processing.org/reference
It's more like an advanced secret API!

ofey

Ha ha. So is there some other way to do this then? It appears that something isn't working in processing.js but hint() is mentioned on the processing.js page. http://processingjs.org/reference/hint_/

ofey

I think I know what is wrong. It appears that javascript can't read the radius parameter in

rect(x, y, width, height, radius)

so this is why lines 34 and 38 won't work. When I take out this parameter it works fine. But rect(x, y, width, height, radius) is given in the processing.js reference pages with the radius parameter as an option. processingjs.org/reference/rect_/

Could this be a bug!!!

Thanks,

Shane

ofey

I tested the rect() radius parameter in draw() but outside of hint() and it doesn't work there either. See line 27. So it seems the radius parameter doesn't work with processing.js

ofey

import processing.opengl.*;
boolean overRegion = false;
boolean pressed = false;
boolean button = false;
void setup() {
  size(400, 400, OPENGL);
}
void draw() {
  background (255, 255, 255);
  if (mouseY > 30.0) {
    overRegion = true;
  }
  else {
    overRegion = false;
  }
  camera(200, mouseY, 50, 0, 0, 0, 0, 1, 0);
  stroke(200, 0, 0);
  line(-200, 0, 0, 200, 0, 0);
  stroke(0, 200, 0);
  line(0, -200, 0, 0, 200, 0);
  stroke(0, 0, 200);
  line(0, 0, -200, 0, 0, 200);
  stroke(0, 0, 0);
  if (button) {
    box(150);
  }
  rect(100, 100, 55, 30, 7);
  hint(DISABLE_DEPTH_TEST);
  camera();
  stroke(0, 0, 0);
  fill(#919293);
  textSize(12);
  if (button) {
    fill(#BFE1F0);
    rect(0, 0, 55, 30);
    line(0,0,100,100);
  } 
  else {
    //drawRect2();
    fill(#6FCBF5);
    rect(0, 0, 55, 30);
  }
  fill(0, 0, 0);
  text("button", 11, 20);
  hint(ENABLE_DEPTH_TEST);
}
void drawRect1(){
      fill(#BFE1F0);
      rect(0, 0, 55, 30);
}
void drawRect2(){
      fill(#6FCBF5);
      rect(0, 0, 55, 30);
}
void mousePressed() {
  if (overRegion) {
    pressed = true;
  } 
  else {
    pressed = false;
  }
  if (mouseButton == LEFT) {
    if (mouseX > 0 && mouseX < 55 && mouseY > 0 && mouseY < 30) {
      button = !button;
    }
  }
}
void mouseReleased() {
  pressed = false;
}

ofey

import processing.opengl.*;
boolean overRegion = false;
boolean pressed = false;
boolean button = false;
void setup() {
  size(400, 400, OPENGL);
}
void draw() {
  background (255, 255, 255);
  if (mouseY > 30.0) {
    overRegion = true;
  }
  else {
    overRegion = false;
  }
  camera(200, mouseY, 50, 0, 0, 0, 0, 1, 0);
  stroke(200, 0, 0);
  line(-200, 0, 0, 200, 0, 0);
  stroke(0, 200, 0);
  line(0, -200, 0, 0, 200, 0);
  stroke(0, 0, 200);
  line(0, 0, -200, 0, 0, 200);
  stroke(0, 0, 0);
  if (button) {
    box(150);
  }
  rect(100, 100, 55, 30, 7);
  hint(DISABLE_DEPTH_TEST);
  camera();
  stroke(0, 0, 0);
  fill(#919293);
  textSize(12);
  if (button) {
    fill(#BFE1F0);
    rect(0, 0, 55, 30);
    line(0,0,100,100);
  } 
  else {
    //drawRect2();
    fill(#6FCBF5);
    rect(0, 0, 55, 30);
  }
  fill(0, 0, 0);
  text("button", 11, 20);
  hint(ENABLE_DEPTH_TEST);
}
void drawRect1(){
      fill(#BFE1F0);
      rect(0, 0, 55, 30);
}
void drawRect2(){
      fill(#6FCBF5);
      rect(0, 0, 55, 30);
}
void mousePressed() {
  if (overRegion) {
    pressed = true;
  } 
  else {
    pressed = false;
  }
  if (mouseButton == LEFT) {
    if (mouseX > 0 && mouseX < 55 && mouseY > 0 && mouseY < 30) {
      button = !button;
    }
  }
}
void mouseReleased() {
  pressed = false;
}