Making a 3D table

Processing Libraries
1

OK, I’m trying to make a 3D game starting with a table, but when I hit play to see the 2 legs of the table I only see one. Can someone explain what I do?

here what I got so far.

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

void draw(){
  background(55);
  noFill();
  translate(300, 300, 0);// first leg
  box(20,100,50);
  translate(400, 400, 0);// second leg
  box(20,100,50);
}

i just tried this, but the 2 legs ain’t lining up. idk what to do.
in sketch

ArrayList<Objects> objects = new ArrayList<Objects>();
void setup(){
  size(600,600,P3D);
  objects.add(new Objects(300,300));
  objects.add(new Objects(300,400));
}

void draw(){
  background(55);
  for (Objects o: objects){
    noFill();
    rotateY(0.5);
    o.show();
  }

in Objects

class Objects {
  PVector pos;
  Objects(int x, int y){
    pos = new PVector(x,y);
  }
  
  void show(){
    translate(pos.x,pos.y);
    box(20,100,50);
  }
}
2 Likes
2

possible you not see that
( in both above approaches )
the translate is adding up

if you not want that must use a push / pop
around each translate / box

3

So how I use push pop? In the tutoral I saw he wrote a whole other program to do it.

4

try to learn about processing commands from the reference
or examples or tutorials or videos…
https://processing.org/reference/push_.html

5

OK, I added a few things but my table legs ain’t looking right. Can you tell me why? I want them 20,100,20

sketch

import peasy.*;
PeasyCam cam;

ArrayList<Objects> objects = new ArrayList<Objects>();
void setup(){
  size(600,600,P3D);
  cam = new PeasyCam(this,100);
  objects.add(new Objects(300,300));
  objects.add(new Objects(400,300));
  objects.add(new Objects(300,200));
  objects.add(new Objects(400,200));
}

void draw(){
  background(55);
  for (Objects o: objects){
    o.show();
  }
}

Objects

class Objects {
  PVector pos;
  Objects(int x, int y){
    pos = new PVector(x,y);
  }
  
  void show(){
    push();
    translate(pos.x,pos.y);
    box(20,100,20);
    pop();
  }
}
6

try:

import peasy.*;
PeasyCam cam;

ArrayList<Objects> objects = new ArrayList<Objects>();
void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 2000);
  objects.add(new Objects(200-100, 200,    0,  10,10,100));
  objects.add(new Objects(200+100, 200,    0,  10,10,100));
  objects.add(new Objects(200-100, 200+100,0,  10,10,100));
  objects.add(new Objects(200+100, 200+100,0,  10,10,100));
  
  objects.add(new Objects(200,     200+50, 50, 240,140,10 ));
}

void draw() {
  background(55);
  for (Objects o : objects) o.show();
}

//Objects

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() {
    push();
    translate(pos.x, pos.y, pos.z);
    box(bsize.x, bsize.y, bsize.z);
    pop();
  }
}

SNAG-0122
SNAG-0122.jpg606×628 23.5 KB

7

tyvm, that looks perfect. If i’m correct the shapes x, y are made from their center. Is that correct?

8

The shapes are positioned at x,y,z

You forgot the Z

But center, yes

9

please note that you can give the objects a fill color different from white, e.g. light gray (170 or so) and that it looks better when you use lights() in draw():

void draw() {
  background(55);
  lights(); 
  for (Objects o : objects) 
        o.show();
}
10

TY, if I placed in a character could I get the camera to see what the character would see? Like from their point of view.

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

12

TY, I’ll try it out. If I’m reading this correct. You use a PVector instead of peasycam to control the camera. Is that right?
So if I added a human I could mae the PVector pos be the head of the player.

1 Like
13

yes, i show it in the style like you started,
also i wanted you to get the feeling for that relative positioning,

but yes, the next step would be to take the
virtual center point (200,200,0) out of the object code
and put it in a leading
translate(200,200,0); // like a “TABLE center”
so all gets more easy.

14

It’s a different concept.
Peasycam is a library.

I am using the camera() command
See reference

And then I use the camera:

  • with a PVector for its position (the first 3 parameters).
  • For its look-at I use normal variables (the middle 3 parameters) and
  • for the up-vector (the last 3 parameters) just numbers (you don’t change these 3 normally).

Now the sketch is confusing in that you always look at the center of the table. So you always rotate while moving. Strange. Normally we just look ahead when walking.

To fix this, look at the library queasycam

You wrote

So if I added a human I could mae the PVector pos be the head of the player.

That’s right.

You have two options:

  • First-person shooter (easier): The player is invisible but you have a first person view

See First-person shooter - Wikipedia

  • They are unlike third-person shooters, in which the player can see (usually from behind) the character they are controlling. Examples are Tomb Raider or Mario.

See Third-person shooter - Wikipedia

2 Likes
15

I’m trying to make a first person game that I can walk around & see the world I’ve created, but for some reason I can’t get this code to work. Can anyone tell me how to get peasycam to be a first person game view. I’ve tried in setup();
cam = new PeasyCam(this, player.z);
but it shows me the floor every veiw. Even though the player is 150 pixels off the floor.

16

Peasycam is the wrong library

Look at queasycam

1 Like
17

I’ve looked at quesycam it says its simple, but I’m still not getting a view from my player. I’ve tried basic example, only saw inside a box & maze runner tutorial. It worked in the example, but when I tried adding it to my program it doesn’t give me a first person shooter view.

18

QueasyCam is a super-simple first-person-shooter camera for 3D Processing sketches. It steals its name and its desired ease of use from PeasyCam.

A QueasyCam camera can be controlled using the mouse and WASD keys (as well as Q and E for upward and downward motion).

See: https://github.com/jrc03c/queasycam

import queasycam.*;

QueasyCam cam;

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);

  cam = new QueasyCam(this);
  cam.speed = 5;              // default is 3
  cam.sensitivity = 0.5;      // default is 2

  //  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));

  //floor
  objects.add(new Objects(-1000, 102+50+2, -1000, 
    4000, 3, 4000, 
    color(200)));
}

void draw() {
  background(55);

  avoidClipping();
  lights();

  for (Objects o : objects) 
    o.show();
}

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

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();
  }
}//class
//
1 Like
19

I’ve read that article on quesycam and tried the examples. Like I said before when I tried adding it like the maze runner example in quesycam it didn’t work. In the mazerunner example the cam is on the player like I want but when I added it to my player I saw a very far off veiw. Couldn’t even see my character. I don’t get why you said see link. When what I said clearly told anyone I already been there I started the examples. As can see from this picture the cam aint where it suppose to be still this aka first person shooter shows the player. The red circle is the player it extends queasycam like in mazerunner example.

messup
messup592×602 4.36 KB

btw it not super simple either.

20

Ok, I was still thinking of the table Sketch and made it for you.

The library is not perfect for a maze I guess

You have to make a collision detection with the walls etc.

When you want to have better help, show your entire code in a way we can run it