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.
Can someone please tell me?? Please…please help me.
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???
Please…Please…Please…Please
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 ).
Please…Please…Please…please…please…
??
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.
Please read the tutorial about P3D
And reference about translate
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
please read the tutorial to get a better understanding of translate()
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
Web Links
see https://github.com/Kango/Processing-snippets/wiki/3D---P3D---OPENGL-BASICS
see https://www.processing.org/tutorials/p3d/
see https://www.processing.org/tutorials/transform2d/
see https://www.processing.org/reference/translate_.html
see https://www.processing.org/reference/camera_.html
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.