使用p5.js改变加工代码和显示形状

Question

我想将处理代码更改为 p5.js。我试着写了p5.js的代码，但是在p5.js上什么也显示不了。原文件和我的代码如下所示。

这是我的代码：

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; 
}

这是源代码：（表单处理）

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

定义r时需要使用floor()。虽然 JavaScript 没有像 Java 这样的变量的严格数据类型，但当你说 cx[1.348] 这样的东西时，它仍然不知道你的意思。当您使用非整数值进行数组访问时，您会得到 cx[1.348] = NaN，然后当您尝试在 NaN, NaN 处绘制一个点时，它不会执行任何操作。所以你的代码应该在第 23 行说 let r = floor(random(3))（你也可以考虑在 setup() 中设置背景颜色）。

使用p5.js改变加工代码和显示形状

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

processing

p5.js