Making a 3D table

Processing Libraries
11

Yes look at the camera command

(I modified the parameters of your table (swapped y and z) and removed peasyCam)

The idea of 3D space is that you draw not on a canvas but inside a box / room where you can place stuff further away (away from you, into the screen depth). The idea is that with translate()

  • the first parameter is x (you move something left right on the table surface e.g.),
  • the 2nd y is the height (you move something up and down above the table) and
  • the 3rd z is that you move something back and forth on the table surface.

There is a first person camera lib called queasy cam

see also

First sketch: we move the table


ArrayList<Objects> objects = new ArrayList<Objects>();

void setup() {
  size(600, 600, P3D);

  // 4 legs
  objects.add(new Objects(200-100, 102, -200, 10, 100, 10));
  objects.add(new Objects(200+100, 102, -200, 10, 100, 10));
  objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10));
  objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10));

  // and the table itself 
  objects.add(new Objects(200, 50, -200+50, 
    240, 10, 140 ));
}

void draw() {
  background(55);

  camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0), 
    width/2.0, height/2.0, 0, 
    0, 1, 0);
  lights();

  translate(mouseX, mouseY, 0);
  for (Objects o : objects) 
    o.show();
}


// ===============================================================
//class

class Objects {
  PVector pos, bsize;
  Objects(int x, int y, int z, 
    int b, int h, int t) {
    pos = new PVector(x, y, z);
    bsize = new PVector(b, h, t);
  }

  void show() {
    pushMatrix();
    translate(pos.x, pos.y, pos.z);
    box(bsize.x, bsize.y, bsize.z);
    popMatrix();
  }
}//class
//

Next sketch: moving camera (x-pos and height)



ArrayList<Objects> objects = new ArrayList<Objects>();

void setup() {
  size(600, 600, P3D);

  // 4 legs
  objects.add(new Objects(200-100, 102, -200, 10, 100, 10));
  objects.add(new Objects(200+100, 102, -200, 10, 100, 10));
  objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10));
  objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10));

  // and the table itself 
  objects.add(new Objects(200, 50, -200+50, 
    240, 10, 140 ));
}

void draw() {
  background(55);

  camera(mouseX, map(mouseY, 0, height, -200, 200), (height/2.0) / tan(PI*30.0 / 180.0), 
    200, 50, -200, 
    0, 1, 0);
  lights();

  // translate(mouseX, mouseY, 0);
  for (Objects o : objects) 
    o.show();
}


// ===============================================================
//class

class Objects {
  PVector pos, bsize;
  Objects(int x, int y, int z, 
    int b, int h, int t) {
    pos = new PVector(x, y, z);
    bsize = new PVector(b, h, t);
  }

  void show() {
    pushMatrix();
    translate(pos.x, pos.y, pos.z);
    box(bsize.x, bsize.y, bsize.z);
    popMatrix();
  }
}//class
//

next sketch

you can move the camera around in a room in which the table stands

hold a keyboard key - you can see a top view of room and table and where you are

the camera height (y) is fixed.


ArrayList<Objects> objects = new ArrayList<Objects>();
PVector cameraPos=new PVector(); 

final color RED=color(255, 0, 0);
final color GREEN=color(0, 255, 0);
final color BLUE=color(0, 0, 255);
final color WHITE=color(255);

void setup() {
  size(1700, 900, P3D);

  //  the table itself 
  objects.add(new Objects(200, 50, -200+50, 
    240, 10, 140, color(170)));

  // 4 legs
  objects.add(new Objects(200-100, 102, -200, 10, 100, 10, RED));
  objects.add(new Objects(200+100, 102, -200, 10, 100, 10, BLUE));
  objects.add(new Objects(200-100, 102, -200+100, 10, 100, 10, GREEN));
  objects.add(new Objects(200+100, 102, -200+100, 10, 100, 10, WHITE));
}

void draw() {
  background(55);

  cameraPos.set(mouseX, -26, map(mouseY, 0, height, -400, 300)); 

  if (keyPressed) {
    // 2D : top down view
    background(255);
    camera();
    translate(  width/2-200, 100+height/2 );
    for (Objects o : objects) 
      o.show2D();
    showSphere2();
  } else 
  {
    // 3D view 
    avoidClipping();
    camera(cameraPos.x, cameraPos.y, cameraPos.z, 
      200, 45, -200+50, 
      0, 1, 0);
    lights();
    for (Objects o : objects) 
      o.show();

    showSphere();
  }
}

//----------------------------------------------------------------

void showSphere() {
  //show camera look at in 3D
  pushMatrix();
  translate(   200, 45, -200+50 );
  noStroke(); 
  fill(RED);
  sphere(6);
  popMatrix();
}

void showSphere2() {
  //show camera POS in 2D
  pushMatrix();
  translate(  cameraPos.x, cameraPos.z );
  noStroke(); 
  fill(GREEN);
  sphere(6);
  popMatrix();
}

void avoidClipping() {
  // avoid clipping :
  // https : //
  // forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear
  perspective(PI/3.0, (float) width/height, 1, 1000000);
}//func

// ===============================================================
//class

class Objects {

  PVector pos, bsize;
  color col;

  Objects(int x, int y, int z, 
    int b, int h, int t, 
    color col_) {
    pos = new PVector(x, y, z);
    bsize = new PVector(b, h, t);
    col=col_;
  }

  void show() {
    //3D
    pushMatrix();
    fill(col); 
    stroke(0); 
    translate(pos.x, pos.y, pos.z);
    box(bsize.x, bsize.y, bsize.z);
    popMatrix();
  }

  void show2D() {
    // in 2D 
    fill(col); 
    stroke(0); 
    rect(pos.x-bsize.x/2, pos.z-bsize.z/2, 
      bsize.x, bsize.z);
  }
}//class
//

Chrisir