# How to go from plane to 3D

**URL:** <https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263>\
**Category:** Beginners\
**Created:** [August 7, 2022, 3:41pm UTC](https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263 "2022-08-07T15:41:42Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Karrajo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karrajo/32/14745_2.png) [@Karrajo](https://discourse.processing.org/u/Karrajo)\
**Post date:** [August 7, 2022, 3:41pm UTC](https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263/1 "2022-08-07T15:41:42Z")

</div>

```auto
float t=1;
void setup() {
  size(800, 800);
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  translate(width/2, height/2);
  
  for (int i = 0; i < 100; i++) {
    float x = width/4 * sin(t*i*PI*2);    
    float y = height/4 * sin(t*i*PI*3);
    rect(x,y,2,2);
  }
   t += 0.00001;
}

```

Hello,  
I have this system of equations that cause the points to move like on a Lissajous curve. I’m trying to add a third dimension to it and be able to change the point of view of the camera to visualize what is happening.  
I understand that I have to change rectangles to cubes and add a variable z, but I don’t know how to do it. I have tried something with Peasycam but I don’t know how to change the position of the cubes.  
Any help or idea?  
Thank you very much

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [August 7, 2022, 3:56pm UTC](https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263/2 "2022-08-07T15:56:45Z")

</div>

Hello @Karrajo,

For starters you need to work with the P3D renderer.

Some tutorials and references to get you started:  
[https://processing.org/tutorials/rendering](https://processing.org/tutorials/rendering)  
[https://processing.org/reference/size\_.html](https://processing.org/reference/size_.html)  
[https://processing.org/tutorials/p3d](https://processing.org/tutorials/p3d)

Interesting topic:

> [@rotationX/rotationY getting really slow](https://discourse.processing.org/t/rotationx-rotationy-getting-really-slow/19151):
>
> the rotation is gradually getting slower and really laggy, anyone know why this is happening? Many thanks, Callum // ------------------------------------START------------------------------------ // ~variables & imports import peasy.\*; ArrayList\<PVector\> points = new ArrayList\<PVector\>(); float u; float v; float tau; static final int NUM\_SHOW = 2; // ------------------------------------SETUP------------------------------------ void setup() { size(800, 800, P3D); //background(20); color…

I suggest you start simple and build on that…

Reference:  
[https://mathcurve.com/courbes3d.gb/lissajous3d/lissajous3d.shtml](https://mathcurve.com/courbes3d.gb/lissajous3d/lissajous3d.shtml)

Some modifications to your code for P3D to give you some ideas:

```auto
float t=1;
void setup() {
  size(800, 800, P3D);
}

void draw() {
  background(0);
  noStroke();
  fill(255);
  lights();

  int counter = (frameCount-1)%720; // 0 to 719 and repeats
  float angle = counter*(TAU/720);
  // println(frameCount, counter, angle, degrees(angle)); // Testing

  translate(width/2, height/2);
  rotateX(angle);

  for (int i = 0; i < 100; i++) {
    float x = width/4 * sin(t*i*PI*2);
    float y = height/4 * sin(t*i*PI*3);
    float z = 200*sin(t*i*PI*4);
    //rect(x, y, 2, 2);
    stroke(0, 255, 0);
    strokeWeight(5);
    
    point(x+20, y+20, z+20); // offset by 20 so the sphere did not cover it
  
    push();
    translate(x, y, z);
    noStroke();
    sphere(10);
    pop();

  }
  t += 0.00001;
}

```

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/4/44fed8c080d418c54bf87e6511f8302000f0f501.png)

I really had to throttle back on the example I provided since this is your journey.

Have fun!

`:)`

---

<div class="post-metadata">

**Author:** ![Karrajo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/karrajo/32/14745_2.png) [@Karrajo](https://discourse.processing.org/u/Karrajo)\
**Post date:** [August 7, 2022, 4:32pm UTC](https://discourse.processing.org/t/how-to-go-from-plane-to-3d/38263/3 "2022-08-07T16:32:30Z")

</div>

Omg, glv, thank you very much,  
your code is incredible but also with the references I can continue to go deeper into the code. Thank you very much