# Custom 3d shapes in p5.js

**URL:** <https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662>\
**Category:** Coding Questions\
**Created:** [November 24, 2020, 1:13pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662 "2020-11-24T13:13:35Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [November 24, 2020, 1:13pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/1 "2020-11-24T13:13:35Z")

</div>

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

https://codepen.io/sarathjasrin/embed/preview/yLaBLOp?height=300&slug-hash=yLaBLOp&default-tabs=js,result&host=https://codepen.io

I wanted to create 3D version like below:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6fe0c7529f47c4ed1f1d8d9bc1a8234031c3ef61.png)

How I can achieve the above. Thanks in advance.

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 26, 2020, 6:43pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/3 "2020-11-26T18:43:21Z")

</div>

You don’t have a z-component in your vertexes, so it just will be flat.  
[Just an example.](https://editor.p5js.org/noelpil/sketches/L8q2xBZtM)

---

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [November 26, 2020, 7:41pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/4 "2020-11-26T19:41:43Z")

</div>

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

https://codepen.io/sarathjasrin/embed/preview/ZEpzELR?height=300&slug-hash=ZEpzELR&default-tabs=js,result&host=https://codepen.io

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 26, 2020, 8:08pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/5 "2020-11-26T20:08:48Z")

</div>

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.

```auto
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);
}

```

---

<div class="post-metadata">

**Author:** ![sarath.jasrin](https://avatars.discourse-cdn.com/v4/letter/s/f475e1/32.png) [@sarath.jasrin](https://discourse.processing.org/u/sarath.jasrin)\
**Post date:** [November 26, 2020, 9:22pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/6 "2020-11-26T21:22:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 26, 2020, 11:06pm UTC](https://discourse.processing.org/t/custom-3d-shapes-in-p5-js/25662/8 "2020-11-26T23:06:30Z")

</div>

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.

```auto
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();
}

```