# 3d-sine-cosine-in-3d from p5js to Processing 3.x

**URL:** <https://discourse.processing.org/t/3d-sine-cosine-in-3d-from-p5js-to-processing-3-x/28022>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [February 23, 2021, 1:28pm UTC](https://discourse.processing.org/t/3d-sine-cosine-in-3d-from-p5js-to-processing-3-x/28022 "2021-02-23T13:28:08Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![HerClau](https://avatars.discourse-cdn.com/v4/letter/h/4bbf92/32.png) [@HerClau](https://discourse.processing.org/u/HerClau)\
**Post date:** [February 23, 2021, 1:28pm UTC](https://discourse.processing.org/t/3d-sine-cosine-in-3d-from-p5js-to-processing-3-x/28022/1 "2021-02-23T13:28:08Z")

</div>

I am trying to reproduce the example “Sine Cosine in 3D” from the site at the beginning of the skecht.  
I show you how far I have come. But it is very far from reproducing the p5js skecht.  
Could you guide me to reach the goal?

```auto
//https://p5js.org/examples/3d-sine-cosine-in-3d.html
void setup() {
  size(710, 710, P3D);
}

void draw() {
  background(250);
  strokeWeight(1.5);
  rotateX(frameCount * 0.01);

  for (int j = 0; j < 5; j++) {
    push();
    for (int i = 0; i < 80; i++) {
      translate(
        sin(frameCount * 0.001 + j) * 100,
        sin(frameCount * 0.001 + j) * 100,
        i * 0.1
      );
      rotateZ(frameCount * 0.002);
      push();
      //translate(width,height,0);
      sphere(1);
      pop();
    }
    pop();
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 23, 2021, 2:17pm UTC](https://discourse.processing.org/t/3d-sine-cosine-in-3d-from-p5js-to-processing-3-x/28022/2 "2021-02-23T14:17:42Z")

</div>

remember that p5.js has its 0,0 in the middle of the screen but processing in the upper left corner.

Therefore, we need to translate everything to the center in processing.

It is also important to reduce sphereDetail()!

Warm regards,

Chrisir

```auto

//https://p5js.org/examples/3d-sine-cosine-in-3d.html
void setup() {
  size(710, 710, P3D);
  sphereDetail(3);

  // noStroke(); 
  fill(255, 0, 0);
  //strokeWeight(1.5);
  strokeWeight(0.5);
}

void draw() {
  //background(250);
  background(0);
  lights();

  translate(width/2, height/2); 
  rotateX(frameCount * 0.01);

  for (int j = 0; j < 5; j++) {
    pushMatrix();
    for (int i = 0; i < 80; i++) {
      translate(
        sin(frameCount * 0.001 + j) * 100, 
        sin(frameCount * 0.001 + j) * 100, 
        i * 0.1
        );
      rotateZ(frameCount * 0.002);
      // push();
      //translate(width,height,0);
      // point(0, 0, 0);

      sphere (13); 
      // pop();
    }
    popMatrix();
  }
}

```