Question

我正在尝试在p5.js中创建一个循环，它将在画布上绘制小椭圆。我之前做过类似的事情，但代码却不同。在那里，当我想尝试循环时，我必须输入的是：

    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。

如果您仍然无法理解，请发布显示问题的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中随机放置省略号循环？

2 个答案: