Custom 3d shapes in p5.js

p5.js Coding Questions
1

I tried to create custom 3d shape using beginShape method. I have successfully created 2d view and added orbitControl. Now I can move around the shape but it looks flat. I tried to use z value but it’s looks different than I expected. Please check the below codepen

I wanted to create 3D version like below:

image
image736×424 2.72 KB

How I can achieve the above. Thanks in advance.

3

You don’t have a z-component in your vertexes, so it just will be flat.
Just an example.

4

@noel When I try using z values in vertex it’s looks like below

5

In 3D you really have to imagine spatially.
Let’s say we want a square from the origin (0, 0, 0) to the right without going forwards or backward, and another from the origin forwards (towards you)
Imagine what coordinates you would use.

function setup() {
  createCanvas(800, 600, WEBGL);
}

function draw() {
  background(175);
  orbitControl(5,5,5);
  drawShape();
}

function drawShape() {
  fill("#555555");
  beginShape();    // first rectangle to the right
  
  vertex(0, 0, 0);  // origin
  vertex(100, 0, 0);  // 100 right
  vertex(100,-100, 0);  // 100 right & 100 up
  vertex(0, -100, 0);   // origin 100 up
                        //  second rectangle outwards (to your direction)
  vertex(0, 0, 0);  // origin
  vertex(0, 0, 100);  // origin 100 out  
  vertex(0,-100, 100);  // 100 up 100 out 
  vertex(0, -100, 0);  // origin 100 up
  
  endShape(CLOSE);
}
1 Like
6

@noel your reply gave me the different perspective of drawing. I think I need learn 3D basics first before doing this :smiley: . I will try and reply in this thread with final output.

1 Like
8

Personally I try to keep it simple and more extended for understanding.
I saw you withdraw your last post, but I will post the answer anyway.

function setup() {
  createCanvas(800, 600, WEBGL);
}

function draw() {
  background(175);
  orbitControl(5, 5, 5);
  drawShape();
}

function drawShape() {
  
  beginShape();
  fill("gray");
  vertex(0, 0, 0);
  vertex(200, 0, 0)
  vertex(200, 0, 100);
  vertex(100, 0, 100);
  vertex(100, 0, 200);
  vertex(0, 0, 200); 
  endShape();
 
  beginShape();
  fill("yellow")
  vertex(0, 0, 0);
  vertex(0, 20, 0);
  vertex(200, 20, 0)
  vertex(200, 0, 0);
  endShape();
 
  beginShape();
  fill("red");
  vertex(200, 0, 100);
  vertex(200, 20, 100);
  vertex(100, 20, 100);
  vertex(100, 0, 100);
  endShape();
  
  beginShape();
  fill("blue");
  vertex(100, 20, 100);
  vertex(100, 20, 200);
  vertex(100, 0, 200);
  vertex(100, 0, 100);
  endShape();
  
  beginShape();
  fill("green");
  vertex(0, 0, 0)
  vertex(0, 0, 200)
  vertex(0, 20, 200)
  vertex(0, 20, 0)
  endShape();
}
1 Like