processing - 我将 .PDE 转换为 .JS 时出了什么问题？

Question

您好，编码社区，我需要您的帮助。 我从 openprocessing 中获取了一个草图，我需要将其转换为 p5.js。第一个脚本是源代码，下面将由我翻译。我不确定语法。

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

这就是我所做的。 p5.j​​s:

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

但是还是不行。您能帮我了解这两种语言的语法是否相同。

Answer 1

您已经快完成了，但有一些问题:

1. 您在顶部声明变量(例如float x, y, x2, y2, rad, rad2, dist, dist2;等)，但是您不使用值初始化它们。因为 JavaScript 是无类型的(与 Java 不同)，解释器无法猜测您的意思，并且变量将被初始化为 undefined (而在 Java 中，因为它们是 float) > 输入默认为 0)。对 undefined 进行数学运算会得到 NaN(不是数字)。
2. 您不小心用字符串而不是 float 增加了一些值:rotateBy += '.003'; yIn += '.005';
3. 可选:fill(#02021A, 10); 在 p5.js 中不起作用，但您可以使用 fill(r,g,b,a) 并以十六进制表示法传递值: 填充(0x02, 0x02, 0x1A, 10);

这是应用了这两个修复的代码:

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>

看起来很酷!玩得开心!