Question

我正在使用处理库进行一些简单的实验，并希望将其中一个草图移植到P5.js，以便它可以放在网上。下面是处理中的代码（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

在处理（基于Java构建）中，您的t变量的默认float值为0.0。

在P5.js（基于JavaScript构建）中，您的t变量的默认值为undefined。然后，您尝试将该值与其他操作一起使用，这就是为什么它们都不能按预期运行的原因。

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

Answer 2

尝试在顶部说var t = 0;，而不是：var t;

从处理转移到p5.js

2 个答案: