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

Processing Coding Questions
#1

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?

//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();
  }
}
#2

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


//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();
  }
}
1 Like