p5.j​​s - 随机（）、高度和宽度未定义？

我正在尝试使用 p5.js 让球在画布上弹跳，但似乎width, height, and random()没有定义。 这是我的全部代码：

function setup() {
  createCanvas(640,480);
  background(240);
}

var dot = {
  x: random(width), 
  y: random(height), 
  size: 50,
  r: 255,
  g: 0,
  b: 0,
  speedX: 5,
  speedY: 5
};

function draw() {
  background(240);
  fill(dot.r, dot.g, dot.b);
  ellipse(dot.x, dot.y, dot.size, dot.size);
  if (dot.x >= 615 || dot.x <= 25) { //if the ball is out of screen horizontally
    dot.speedX = dot.speedX * -1;
  } 

  if (dot.y >= 465 || dot.y <= 25) { //if the ball is out of screen vertically
    dot.speedY = dot.speedY * -1;
  }

  dot.x = dot.x + dot.speedX;
  dot.y = dot.y + dot.speedY;
}

如果我使用 JavaScriptMath.random，效果很好。此外，如果我手动输入宽度和高度为数字（640 和 480），效果很好。 p5.j​​s 不应该自动分配height, width, random， ETC。？ 这是怎么回事？

您不能使用 P5.js 函数或变量（包括width, height, and random()) until after setup()叫做。那是因为 P5.js 尚未加载，因此它们尚未定义。您必须确保对 P5.js 函数或变量的任何调用都在之后setup()叫做。

在你的情况下，你定义dot直接在顶层，这发生在最开始的时候，之前setup()叫做。您可以通过输入来测试这一点console.println()拨打您旁边的电话dot定义，并在里面setup()功能。

要解决此问题，请将初始化移至dot位于setup()功能：

var dot;

function setup() {
  createCanvas(640,480);
  
  dot = {
      x: random(width), 
      y: random(height), 
      size: 50,
      r: 255,
      g: 0,
      b: 0,
      speedX: 5,
      speedY: 5
  }

  background(240);
}

function draw() {
  ...

您可以阅读有关此内容的更多信息P5.js 常见问题解答 https://github.com/processing/p5.js/wiki/Frequently-Asked-Questions#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup.