# Moving figures in z-coordinate (z-axis)

Can someone please tell me, how can I make figures move in(on) the z-axis in p5.js?
Like, ‘X-axis’ makes things move ‘Right-Left’ and ‘Y-axis’ makes things move ‘Up-Down’. But both of them I know.
I am frustrated at the idea of moving for example a ball in(on) z-axis, that is, moving things forward and backward.

2 Likes

Make a variable for z-axis and have your code add or subtract from it?

1 Like

You need createCanvas() () or whatever with WEBGL as 3rd parameter

And translate with 3 parameters

are you still working on your game? When it’s really a 2D game and you want to have an isometric effect when moving the player in Z (simulating a Z movement / 3D effect) please tell us.

Chrisir

1 Like

My last game which are talking about is completed.
I am thinking about a new game which needed to make a path move backward towards me

1 Like

Can you please provide a simple code of a game, regarding my this question???

1 Like

2 Likes
``````

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

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(800, 800, P3D);

avoidClipping();
}

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

pushMatrix();
fill(255, 0, 0);
translate(width/2 +120, height/2 +120, z);
box(20, 20, 20);
popMatrix();

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

fill(0);
text(""+z,
width-102, 20);
}

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

Very intersting…
But is some what difficult to understand…
Can you please give an example in which only a box goes forward and comes back…
That would be easy to understand…
This seems very very complex…
And also please use easily understandable things,coz in this one you have used things like the avoid clipping and translate etc…
Please …please give a simple code in which only a box goes back and front (in z ).

??

In the second example there is only a box going forward

You can delete avoidClipping but you need translate () !

So this is as simple as it gets.

Translate is used to place the box in 3D space

1 Like

Thank you…very very much…
But hee… There’s a problem. The camera gets entered inside the box as it zooms in. Is there any way so that I can make the camera see the box from 45° angle or somewhat with such an angle.
It shouldn’t be totally from upside, and also not totally from front, instead making a certain angle, as defined by me.

I think that’s clipping and thats why I had the avoidClipping function

Also you can move the box lower (translate () the middle value of the 3

(You can also position the camera but that’s not really necessary)

1 Like

When you make the position of the box lower (further down) you see the box more from above.

The command translate positions the box on the screen.

(Of course you could move the camera instead of the box but that’s even more confusing.)

Explanation of translate()

`translate(x,y,z)`:

• translate( x: move box left / right, y: move box up and down, z: move back and forth);

Explanation of 3D in general

• In 2D you draw on a canvas.
• In 3D you position your objects in a room.
• So imagine the room is on a table / desktop surface:
• Move x is left / right on the table
• Move y is above the table / how high above the table (up down).
• Move z (!) is back / forth on the table

Chrisir

Full Sketch

``````

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

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(800, 800, P3D);

avoidClipping();
}

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

pushMatrix();
fill(255, 0, 0);
translate(width/2 +29, height/2 +320, z);   // here position of the box !!!!!!!
box(45);
popMatrix();

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

fill(0);
text(""+z,
width-102, 20);
}

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

Thank you sir so…so…so much
It’s working

Sir please also solve my one more problem…How can I make a player(box) stand over the plane moving backwards.
The plane should move backwards but the player shouldn’t.
Here’s the link to my code

https://editor.p5js.org/Nis_Collect/sketches/hqNc_rtFI

Please just tell me how can I do it…and after you tell me I will implement it in my code.

``````
var z=430;

function setup() {
createCanvas(500, 500, WEBGL);
avoidClipping();
}

function draw() {
background(220);

// translate(-width,-height);
push();
translate(0,30, z);
fill(0);                // BLACK
box(80, 20, 520);
pop();

fill(250,405,127); // yellow
box(55,55,55);
//position(static);
stroke(255);

//  box(60,60,60);
// fill(0);

z-=25;
}
function 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, width/height, 1, 1000000);
}//func
``````
2 Likes

here is a better floor

``````
float z = 199;
float gridLevelY;

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

void setup() {
size(1600, 800, P3D);
gridLevelY = height/2;
}

void draw() {
background(125);
lights();

translate(width/2, height/2+299);

decoration();
drawGrid();

// player
pushMatrix();
translate(220, -320/2, z);
fill(255, 0, 0); // RED
box(33);
z--;
popMatrix();
}

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

void drawGrid() {
int count = 50;
stroke(255); // WHITE
float size = (count -1) * 100;
for (int i = 0; i < count; i++) {
float pos2 = map(i, 0, count-1, -0.5 * size, 0.5 * size);
line(pos2, 0, -size/2, pos2, 0, size/2);
line(-size/2, 0, pos2, size/2, 0, pos2);
}
}

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

void decoration() {
pushMatrix();
translate(-120, -320/2, -99);
fill(0, 0, 255); //blue
box(120, 320, 120);
popMatrix();
}
//
``````
2 Likes

It doesn’t seem a code of p5.js…

Thanks very much…
This code is correct thanks.