Using p5.js to change the processing codes and display the shape

Question

I want to change Processing code to p5.js. I tried to write the code of p5.js, but it cannot be displayed anything on p5.js. The original file and my code are shown below.

This is my code:

function setup(){
  createCanvas(400,400);
}
   var N = 100;
   var cx   = [0.000, 1.000, 0.500]; 
   var cy   = [0.000, 0.000, 0.866]; 
   var x = 0.0, y = 0.0; 
   
function draw(){
   for (var i = 0; i < N; i++) { 
       nextPoint();
       drawPoint(); 
   } 
}
function drawPoint(){
  strokeWeight(1);
  var px = map(x,0,1.0,0,300);
  var py = map(y,0,1.0,0,300);
  point(px, py); 
}

function nextPoint() {
   let r = random(3);
    x = (x + cx[r]) / 2.0; 
    y = (y + cy[r]) / 2.0; 
}

This is source code:(form processing)

void setup(){
  size(400,400);
}
   int N = 100;
   float[] cx   = { 0.000, 1.000, 0.500 }; 
   float[] cy   = { 0.000, 0.000, 0.866 }; 
   float x = 0.0, y = 0.0; 
   
void draw(){
   for (int i = 0; i < N; i++) { 
       nextPoint();
       drawPoint(); 
   } 
}
void drawPoint(){
  strokeWeight(1);
  float px = map(x,0,1.0,0,300);
  float py = map(y,0,1.0,0,300);
  point(px, py); 
}
void nextPoint() {
   int r = (int)random(3);
    x = (x + cx[r]) / 2.0; 
    y = (y + cy[r]) / 2.0; 
}

Answer 1

You need to use floor() when you define r. Although JavaScript doesn't have rigid data types for its variables like Java, it still doesn't know what you mean when you say something like cx[1.348]. When you use non-integer values for array access, you get cx[1.348] = NaN, and then when you try to draw a point at NaN, NaN, it doesn't do anything. So your code should say let r = floor(random(3)) on line 23 (you might also consider setting the background color in setup()).