时间戳

首页 > 解决方案 > 使用p5.js更改处理代码并显示形状

processing - 使用p5.js更改处理代码并显示形状

问题描述

我想将处理代码更改为 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; 
}

标签： processingp5.js

解决方案

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

推荐阅读