Rectangle moving along the z-axis

Processing Coding Questions
1

Hello,

I am learning Processing reading the Daniel Shiffman book and I just started the Chapter “Trasformation and 3D”. The following code is the first example about using the z axis.

I can not understand why once Z reached a value around 310 the rectangle is not drawn anymore. When z is set to 0 again the rectangle is draw again.

What I am missing here?

Thanks a lot for your support
Raoul

// A variable for the Z (depth) coordinate
float z = 0;

void setup() {

  // When using (x,y,z) coordinates, we must tell Processing we want a 3D sketch. 
  // This is done by adding a third argument, P3D (or OPENGL), to the size() function. 

  size(400, 400, P3D);
  
  frameRate(30);
}

void draw() {
  background(255);
  stroke(0);
  fill(175);

  // Translate to a point before displaying a shape there

  translate(width/2, height/2, z);
  rectMode(CENTER);
  rect(0, 0, 8, 8); 

  // Increment z (i.e. move the shape toward the viewer)

  z += 2;
  println(z);

  // Restart rectangle
  if (z > 600) {
    z = 0;
  }
}
2

i see this too,
might be limit OR a bug??
anyhow you can try as workaround

//  translate(width/2, height/2, z);
  translate(width/2, height/2);
  scale(z);

works with OR without P3D renderer.

1 Like
3

Thank so much Kll for checking it out . I don’t know, I thought that maybe I was missing some information but now it seems it could be a bug.
Thank for the alternative solution.

4

Hello,

It’s not a bug.

The camera itself has a precise position in the 3D space (as has the rect).

When the rect moves through the camera and is BEHIND the camera, the rect is not visible anymore.

as a proof here is a slowly moving camera (attached to z, but moving slower than the rect)

  • additionally I added a fixed box (that seems to move because the camera moves towards you)

  • additionally I added avoidClipping with reduces the area a 3D shape would be cut of by the near camera

Chrisir



// A variable for the Z (depth) coordinate
float z = 0;

void setup() {

  // When using (x,y,z) coordinates, we must tell Processing we want a 3D sketch.
  // This is done by adding a third argument, P3D (or OPENGL), to the size() function.
  size(400, 400, P3D);

  frameRate(30);
}

void draw() {

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

  avoidClipping();

  background(255);
  lights();
  stroke(0);
  fill(175);

  pushMatrix();
  fill(255, 0, 0); 
  translate(-100, -20, -200); 
  box(20, 20, 20);
  popMatrix(); 

  // Translate to a point before displaying a shape there
  translate(width/2, height/2, z);

  rectMode(CENTER);
  rect(0, 0, 8, 8);

  // Increment z (i.e. move the shape toward the viewer)
  z += 2;

  println(z);

  // Restart rectangle
  if (z > 600) {
    z = 0;
  }
}

void avoidClipping() {
  // avoid clipping (at camera): 
  // 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 
//
2 Likes
5

yes, i play that too,
but not find any info regarding that camera thinking and the specific numbers

  • P3D
  • z range 310 …0 … - ??

now i see

The default values are: perspective(PI/3.0, width/height, cameraZ/10.0, cameraZ10.0) where cameraZ is ((height/2.0) / tan(PI60.0/360.0));

and that is internal of P3D?

 float cameraZ = (height/2.0)/ tan(PI * 60.0/360.0) ;
 float fovy, aspect, zNear, zFar;

void my_perspective(){
 fovy = PI/3.0;
 aspect = width/height;
 zNear = cameraZ/10.0;
 zFar  = cameraZ*10.0;
 perspective(fovy, aspect, zNear, zFar);
}

now with above code i can see rect up to z = 330
with zNear = 1; ( instead z = 340 )
( using perspective but not camera !)

test code:

// check on https://discourse.processing.org/t/rectangle-moving-along-the-z-axis/8736/4

int step=10, z = 0;

void setup() {
  size(400, 400, P3D);
  stroke(200, 0, 0);
  fill(0, 200, 0);
  rectMode(CENTER);
}

void draw() {
  my_perspective();
  background(200, 200, 0);
  translate(width/2, height/2, z);
  //  translate(width/2, height/2);
  //  scale(z);
  rect(0, 0, 8, 8);                    //  rect(0, 0, 400, 400);
}

void keyPressed() {
  println("key "+key+" keyCode "+keyCode);
  if ( keyCode == 38 ) z +=step; // key UP              310 . 320 green to yellow (rect or background/rect invisible )
  if ( keyCode == 40 ) z -=step; // key DOWN
  println("z "+z+" cameraZ "+cameraZ+" fovy "+fovy+" aspect "+aspect+" zNear "+zNear+" zFar "+zFar);
}

float cameraZ = (height/2.0)/ tan(PI * 60.0/360.0) ;
float fovy, aspect, zNear, zFar;

void my_perspective() {
  fovy = PI/3.0;
  aspect = width/height;
  zNear = cameraZ/10.0;    //z 330 cameraZ 86.60254 fovy 1.0471976 aspect 1.0 zNear 8.660254 zFar 866.0254
  // zNear = 1; //kll test   z 340 cameraZ 86.60254 fovy 1.0471976 aspect 1.0 zNear 1.0 zFar 866.0254
  zFar  = cameraZ*10.0;
  perspective(fovy, aspect, zNear, zFar);
}

float cameraZ = (height/2.0)/ tan(PI * 60.0/360.0) ;
float fovy, aspect, zNear, zFar;

void my_perspective() {
  fovy = PI/3.0;
  aspect = width/height;
  zNear = cameraZ/10.0;    //z 330 cameraZ 86.60254 fovy 1.0471976 aspect 1.0 zNear 8.660254 zFar 866.0254
  // zNear = 1; //kll test   z 340 cameraZ 86.60254 fovy 1.0471976 aspect 1.0 zNear 1.0 zFar 866.0254
  zFar  = cameraZ*10.0;
  perspective(fovy, aspect, zNear, zFar);
}

and that looks like with this you would still not be able to zoom in
( like to see some details on the rect surface… )
as it works with

  translate(width/2, height/2);
  scale(z);
1 Like
6

you can find information about the camera in the reference:

https://www.processing.org/reference/camera_.html

The camera has an initial position.
The default values are


camera(width/2.0, height/2.0, (height/2.0) / tan(PI*30.0 / 180.0),  // its position 
      width/2.0, height/2.0, 0,       // where it's looking at 
      0, 1, 0);    // whether it's rotated / don't change this

You can just change the camera’s z-position so it’s more far away from the rectangle (closer to you).

OR

you can leave the camera where it is

you can just start the rectangle more far away from you by setting its initial value to -300 (the negative means, it’s more far away from you) and let it fly to +300.

Instead of a rect use box(), looks better. Use also lights().

Chrisir

3 Likes
7

Thanks a lot for the explanation Chrisir!! This camera concept is new to me, I will look at it in the reference.

Raoul

1 Like