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

但是还是不行。你能帮我理解这两种语言的语法是否相同吗？

Answer 1

您快完成了，但还有一些陷阱：

您在顶部声明变量（例如 float x, y, x2, y2, rad, rad2, dist, dist2; 等），但是您不使用值初始化它们。因为 JavaScript 是无类型的（不像 Java），解释器无法猜测你的意思是什么类型，变量将被初始化为 undefined（而在 Java 中，因为它们是 float 类型，它们将默认为 0）。对 undefined 进行数学运算得到 NaN（不是数字）。
你不小心用字符串而不是浮点数增加了一些值：rotateBy += '.003'; yIn += '.005';
可选：fill(#02021A, 10); 在 p5.js 中不起作用，但是您可以使用 fill(r,g,b,a) 并以十六进制表示法传递您的值：fill(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>

看起来很酷！玩得开心！

我将 .PDE 转换为 .JS 有什么问题？

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

processing

converters

p5.js