如何在 p5.js 中制作随机放置的省略号循环？

Question

我正在尝试在 p5.js 中创建一个循环，它会在 canvas 上绘制小椭圆。我以前做过类似的事情，但代码不同。在那里，当我想尝试循环时，我只需要输入：

    for (var i = 0; i < 200; i++) {}

我正在使用的手册（制作：p5.js 入门）告诉我执行此操作的代码是相似的。这是它给出的绘制一堆线条的示例：

    for (var i = 20; i < 400; i += 8) {
       line(i,40,i+60,80)
    }

但是，当我输入此代码进行测试时，它不起作用。谁能解释一下如何在屏幕上绘制多个小椭圆（我为椭圆的 x 和 y 坐标设置了变量，以便它们是随机的）？

编辑：这是一个更完整的代码版本：

    function draw() {
        noStroke();
        fill(fishCr,fishCg,fishCb);
        arc(ellX,ellY,ellW,ellH,0,180);
        arc(ellX+5,ellY-10,ellW/1.5,ellH/1.5,arcEl,50);
        arc(ellX-45,ellY+20,ellW/1.5,ellH*1.5,340,110);
        arc(ellX-60,ellY-10,ellW/1.5,ellH*2,arcT,40);
        fill(0,200,255,0.5); //this is the start of the code in                 
                             //question
        for (var i = 0; i < 200; i++) {
            ellipse(bubX,bubY,5,5);
        }
    }

Answer 1

请尝试更具体，而不是说它不起作用。到底发生了什么？你在 the JavaScript console 中看到了什么？

您还应该阅读有关 for 循环的教程。 Here是我为Processing写的，但是基本思路是一样的

您的第一个 for 循环从 0 开始并增加 1，直到达到 200。您的第二个 for 循环从 20 开始并增加 8 直到达到 400.

另请注意，您在第二个 for 循环中有一个额外的左大括号 {。

如果您仍然无法理解，请 post 显示问题的 MCVE。祝你好运。

编辑： 看看你的 for 循环：

for (var i = 0; i < 200; i++) {
  ellipse(bubX,bubY,5,5);
}

此处您绘制了 200 个圆圈，但您是根据 bubX 和 bubY 变量在同一位置绘制所有圆圈。你可能想在这里传递随机值而不是每次都传递相同的变量。

Answer 2

createCanvas(500, 500);

function setup() {
  for (var i = 0; i < 200; i++) {
    ellipse(random(0, width), random(0, height), 5);
  }
}

这将创建一个 Canvas 并在随机位置绘制 200 个小圆圈。这是您要找的东西吗？

如何在 p5.js 中制作随机放置的省略号循环？

How to make randomly placed ellipses loop in p5.js?

for-loop

p5.js