P5.js to Processing - How did I do? Are there better/more efficient methods?

p5.js Coding Questions
1

Hello!
I found this tutorial video online for creating Sine wave structures in p5.js
I don’t really know p5 very well, but I thought I would follow along, and try to do everything in the video with Processing instead.
For the most part I think I did ok. I got really confused with some of the rotations.
I think maybe p5 rotates from the center automatically, while Processing must be translated first?
I’m not really sure. But I wanted to see what everyone here thought.
Check my work, so to speak.

Here’s the original p5.js code from the tutorial.

function setup() {
  createCanvas(400, 400, WEBGL)
    angleMode(DEGREES)
}

function draw() {
  background(30)

    rotateX(60)

    noFill()
    stroke(255);

  for (var i = 0; i < 50; i++) {

    var r = map(sin(frameCount / 2), -1, 1, 100, 200)
      var g = map(i, 0, 50, 100, 200)
      var b = map(cos(frameCount), -1, 1, 200, 100)

      stroke(r, g, b)

      rotate(frameCount/ 20)

      beginShape()
      for (var j = 0; j < 360; j += 60) {
      var rad = i * 3
        var x = rad * cos(j)
        var y = rad * sin(j)
        var z = sin(frameCount * 2 + i * 5) * 50

        vertex(x, y, z)
    }
    endShape(CLOSE)
  }
}

Here is my translation into Processing.

void setup() {
  size(400, 400, P3D);
  frameRate(30);
  pixelDensity(2);
}

void draw() {
  background(30);

  translate(0, height/4, -200);
  rotateX(radians(60));

  noFill();
  stroke(255);
  strokeWeight(2);

  translate(width/2, height/2);

  for (float i = 0; i < 50; i++) { // number of rings

    float r = map(sin(radians(frameCount)), -1, 1, 100, 200);
    float g = map(i, 0, 20, 100, 200);
    float b = map(cos(radians(frameCount)), -1, 1, 255, 100);
    stroke(r, g, b);

    rotate(radians(frameCount)/50);

    beginShape();
    for (float j = 0; j < 360; j += 60) { 
      float rad = i * 3;
      float x = (rad * cos(radians(j)));
      float y = (rad * sin(radians(j)));
      float z = sin(radians(frameCount * 2 + i * 5)) * 50;

      vertex(x, y, z);
    }
    endShape(CLOSE);
  }
}
2

Hi,

Yes I know this feeling :wink:

It’s because p5js uses WebGL to display 3D. It’s an API that is close to OpenGL and therefore uses Normalized Device Coordinates (NDC) which are centered around 0 on the screen and goes from -1 to 1 in both x and y axis.

(from concepts of WEBGL)

So when doing 3D in p5js you don’t need to first translate to width / 2 and height / 2 because it’s already translated :wink:

Also in your Processing sketch, you use frameRate(30) but if you explicitly want to cap the frame rate of your sketch to 30, you don’t need to set it.

Also the pixelDensity() function is only used when you have a retina display or high dpi on window or Linux, see pixelDensity() / Reference / Processing.org
But if not, you don’t need it.

Last note on your code, I personally find it more clear when using directly radians as the angle value rather than degrees because you need to use the conversion function and it makes it more verbose.

3

Thank you!
Yeah, translating in general messes with my head. I keep losing track of where zero is.
So it was weird seeing p5 not seem to even care. Thank you for the reading material!

I used frameRate(30) because I’m on a Mac, and P3D doesn’t seem to work unless I include that.
I get a lot of errors regardless, but if I set the framerate, it’ll at least run.
Is there a better solution?

And pixelDensity(), you caught me! :blush:
I had just put that in there to experiment, to see if it’d look any better on my computer.
Forgot to take it out before posting.

Finally, I would love to use radians directly, but they confuse the hell out of me! :sweat_smile:
It’s hard enough learning to code when you’re terrible at math — without throwing PI into the mix!
But you’re right. I bet if I use radians more, I might begin to understand them.
For example: the way the original sketch drew the hexagons blew my mind, and it’s taking me a while to figure out what is happening.

Thank you so much for taking the time.
I appreciate your helpful input!

1 Like