javascript - P5.js中的随机球速度

我有以下代码：

var posX1 = 0, posY1 = 100;
var speedX1 = random(1,3), speedY1 = random(1,3);

var posX2 = 0, posY2 = 200;
var speedX2 = 2, speedY2 = 0;

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

function draw()
{
    // redraw the background so you blank the screen
    background(255);

    if(posX1 > width)
    {
      speedX1 = -speedX1;
    }

    // update the position based on the speed
    posX1 += speedX1;
    posY1 += speedY1;

    // draw a ball
    strokeWeight(20);
    point(posX1, posY1);

    //
    posX2 += speedX2;
    posY2 += speedY2;

    //draw a ball
    strokeWeight(20);
    point(posX2, posY2);


}

在P5中。我基本上希望两个圆圈以1到3之间的随机速度相互竞争，但它们甚至不会出现在屏幕上。谁能指出我要去哪里了？

最佳答案

在调用setup()之前不能使用P5.js函数。

如果运行此代码并查看JavaScript控制台（应该始终是第一步），则会看到错误消息，提示未定义random()。如果您再用Google搜索该错误，则会得到大量结果来说明发生了什么。

从the P5.js FAQ：

  为什么在setup（）之前不能使用p5函数和变量来分配变量？

  对此的解释有些复杂，但必须这样做
  设置库的方式以支持全局和全局
  实例模式。要了解发生了什么，我们先来看一下
  当加载带有p5的页面时（在全局模式下），顺序发生。


  <head>中的脚本已加载。
  HTML页面加载的<body>（完成后，将触发onload事件，然后触发步骤3）。
  p5启动，所有功能都添加到全局名称空间。


  因此，问题在于在p5之前，脚本已加载并评估
  在尚不了解p5变量的情况下启动。如果我们尝试
  在这里打电话给他们，他们会导致错误。但是，当我们使用p5时
  函数在setup（）和draw（）内部调用就可以了，因为
  脚本首次出现时，浏览器不会查看函数内部
  已加载。这是因为setup（）和draw（）函数不是
  在用户代码中被调用，它们只是被定义的，所以里面的东西
  他们尚未运行或评估。

  直到p5启动，setup（）函数才真正生效
  运行（p5为您调用），此时，p5功能存在
  在全局名称空间中。

换句话说，您必须在草图的顶部定义变量，但只能在setup()函数中分配它们：

var speedX1;
var speedY1;

function setup()
{
    createCanvas(640, 480);

    speedX1 = random(1,3);
    speedY1 = random(1,3);
}

关于javascript - P5.js中的随机球速度，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/40155342/