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

**URL:** <https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594>\
**Category:** Coding Questions\
**Created:** [March 16, 2021, 9:57pm UTC](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594 "2021-03-16T21:57:54Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 16, 2021, 9:57pm UTC](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594/1 "2021-03-16T21:57:54Z")

</div>

Hello!  
I found this [tutorial video](https://www.youtube.com/watch?v=vmhRlDyPHMQ) 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.**

```auto
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.**

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

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [March 16, 2021, 10:36pm UTC](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594/2 "2021-03-16T22:36:57Z")

</div>

Hi,

> [@leatherbird](#):
>
> I got really confused with some of the rotations.

Yes I know this feeling 😉

It’s because p5js uses [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API) 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.

[![](https://blog.mozilla.org/hacks/files/2013/04/webgl-axes.png) ](https://blog.mozilla.org/hacks/files/2013/04/webgl-axes.png)

(from [concepts of WEBGL](https://hacks.mozilla.org/2013/04/the-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 😉

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](https://processing.org/reference/pixelDensity_.html)  
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.

---

<div class="post-metadata">

**Author:** ![leatherbird](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@leatherbird](https://discourse.processing.org/u/leatherbird)\
**Post date:** [March 17, 2021, 2:50am UTC](https://discourse.processing.org/t/p5-js-to-processing-how-did-i-do-are-there-better-more-efficient-methods/28594/3 "2021-03-17T02:50:28Z")

</div>

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! 😊  
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! 😅  
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!