javascript - 从处理转移到 p5.js

Question

我正在用处理库做一些简单的实验，并想将其中一个草图移植到 P5.js，以便它可以放在 web 上。下面是处理中的代码(java):

float t;

void setup() {
  background(20);
  size(500, 500);
}

void draw(){
  stroke(random(0,255), random(0,255), random(0,255));

  translate(width/2, height/2);
  rotate(radians(45));
  line(x(t), y(t), y(t), x(t));
  println(x(t));
  println(y(t));
  t++;


}

float x(float t) {
  return cos(t / 10) * 200;
}

float y(float t) {
  return sin(t / 100) * 200;
}

我正在打印 x(t) 和 y(t) 的值以供引用，它们在处理控制台中显示正常。我试图重写它以被 P5.js(javascript) 接受:

var t;

function setup() {
  background(20);
  createCanvas(500, 500);
}

function draw(){
  stroke(random(0,255), random(0,255), random(0,255));

  translate(width/2, height/2);
  rotate(radians(45));
  line(x(t), y(t), y(t), x(t));
  print(x(t));
  print(y(t));
  t++;
}

function x(t) {
  return cos(t / 10) * 200;
}

function y(t) {
  return sin(t / 100) * 200;
}

当我在 P5.js 开发环境中运行它时，控制台为每个值返回 null，并且屏幕上没有绘制任何内容。希望有人能帮忙，谢谢!

Answer 1

在 Processing(基于 Java 构建)中，您的 t 变量获得 0.0 的默认 float 值。

在 P5.js(基于 JavaScript 构建)中，您的 t 变量获得默认值 undefined。然后，您尝试将该值与其他操作一起使用，这就是为什么它们都不按您预期的方式工作。

解决问题的简单方法是手动将默认值设置为 0。