What's wrong in my converting .PDE to .JS?

Question

Hello coding community I need your help. I took a sketch from openprocessing and I need to convert it into p5.js. The first script is the source code, then below will by my translation. I'm not sure about the syntax.

float x, y, x2, y2, rad, rad2, dist, dist2;
float deg, incr, yIn, rotateBy, ang;


void setup() {
  size(600, 600);
  background(#02021A);
  incr = 1; // numVerts = 360/incr
  rad = -20;
  rad2 = -160;
  dist = 500;
  dist2 = 550;
}

void draw() {
  noStroke();
  fill(#02021A, 10);
  rect(0, 0, width, height);
  fill(random(0, 255), 255, 255);
  
  rotateBy += .003;
  pushMatrix();
  translate(width/2, height/2);
  rotate(rotateBy);
  deg = 0;
  while (deg <= 360) {
    deg += incr;
    ang = radians(deg);
    x = cos(ang) * (rad + (dist * noise(y/100, yIn)));
    y = sin(ang) * (rad + (dist * noise(x/80, yIn)));
    ellipse(x, y, 1.5, 1.5);
    x2 = sin(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    y2 = cos(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    ellipse(x2, y2, 1, 1);
  }
  yIn += .005;
  popMatrix();
}

This what I've done. p5.js:

let x, y, x2, y2, rad, rad2, dist, dist2;
let deg, incr, yIn, rotateBy, ang;


function setup() {
  createCanvas(600, 600);
  background('#02021A');
  incr = 1; // numVerts = 360/incr
  rad = -20;
  rad2 = -160;
  dist = 500;
  dist2 = 550;
}

function draw() {
  noStroke();
  fill('#02021A');
  rect(0, 0, width, height);
  fill(random(0, 255), 255, 255);
  
  rotateBy += '.003';
  push();
  translate(width/2, height/2);
  rotate(rotateBy);
  deg = 0;
  while (deg <= 360) {
    deg += incr;
    ang = radians(deg);
    x = cos(ang) * (rad + (dist * noise(y/100, yIn)));
    y = sin(ang) * (rad + (dist * noise(x/80, yIn)));
    ellipse(x, y, 1.5, 1.5);
    x2 = sin(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    y2 = cos(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    ellipse(x2, y2, 1, 1);
  }
  yIn += '.005';
  pop();
}

But it still doesn't work. Could you help me understand if the syntax is the same in these two languages.

Answer 1

You're almost there, but there are a couple of gotchas:

1. you declare variables at the top (e.g. float x, y, x2, y2, rad, rad2, dist, dist2;, etc.), however you don't initialize them with values. Because JavaScript is untyped (unlike Java), the interpreter can't guess what type you meant and the variables will be initialised to undefined (while in Java, because they're float type they'll default to 0). Doing math operations on undefined results in NaN (not a number).
2. you're accidentally incrementing some values by strings instead of floats: rotateBy += '.003'; yIn += '.005';
3. optional: fill(#02021A, 10); won't work in p5.js, however you can use fill(r,g,b,a) and pass your values in hex notation: fill(0x02, 0x02, 0x1A, 10);

This is your code with these two fixes applied:

let x = 0, y = 0, x2 = 0, y2 = 0, rad = 0, rad2 = 0, dist = 0, dist2 = 0;
let deg = 0, incr = 0, yIn = 0, rotateBy = 0, ang = 0;


function setup() {
  createCanvas(600, 600);
  background('#02021A');
  incr = 1; // numVerts = 360/incr
  rad = -20;
  rad2 = -160;
  dist = 500;
  dist2 = 550;
}

function draw() {
  noStroke();
  fill(0x02, 0x02, 0x1A, 10);
  rect(0, 0, width, height);
  fill(random(0, 255), 255, 255);
  rotateBy += 0.003;
  push();
  translate(width/2, height/2);
  rotate(rotateBy);
  deg = 0;
  while (deg <= 360) {
    deg += incr;
    ang = radians(deg);
    x = cos(ang) * (rad + (dist * noise(y/100, yIn)));
    y = sin(ang) * (rad + (dist * noise(x/80, yIn)));
    ellipse(x, y, 1.5, 1.5);
    x2 = sin(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    y2 = cos(ang) * (rad2 + (dist2 * noise(y2/20, yIn)));
    ellipse(x2, y2, 1, 1);
  }
  yIn += 0.005;
  pop();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

That looks pretty cool! Have fun !