我的代码不能绘制任何东西，而是显示白色 canvas

Question

我是 p5.js 的新手，我编写这段代码来绘制一些随机循环曲线。 但我不知道为什么我的代码没有返回任何东西。 有人可以指出我们的错误吗？ 提前致谢！

var modifier1 = 300;
var modifier2 = 300;
var modifier3 = 2;
var addition = 90;
var count = 0;

function setup()
{
  createCanvas(600, 600);
    background(255);
}

function draw()
{
  translate(width/2, height/2);
  stroke(237, 34, 93);
  beginShape();
    while (count < 500)
    {
    var x = modifier1 * sin(radians(modifier3 * frameCount + addition));
    var y = modifier2 * sin(radians(frameCount));
    vertex(x,y);
        count++;
    }
    endShape();
}

Answer 1

您的代码没有绘制任何内容，因为您指定了具有相同坐标的 500 个顶点 ( vertex )。 请注意， x和y不会改变，因为frameCount在循环运行时不会改变。 因此，该形状仅包含 500 个相同的点。
在接下来的帧中， frameCount发生了变化，但您再次使用相同的协调器指定了 500 个顶点。 坐标与前一帧中的坐标不同，但形状本身由 500 个相同的点组成。

如果您使用count而不是frameCount您的形状将立即绘制：

 var modifier1 = 300; var modifier2 = 300; var modifier3 = 2; var addition = 90; var count = 0; function setup() { createCanvas(600, 600); background(255); } function draw() { translate(width/2, height/2); stroke(237, 34, 93); beginShape(); while (count < 500) { var x = modifier1 * sin(radians(modifier3 * count + addition)); var y = modifier2 * sin(radians(count)); vertex(x,y); count++; } endShape(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>

如果要“逐步”绘制形状，则需要将 frameCount 中的 1 段添加到frameCount frameCount + 1 ：

 var modifier1 = 300; var modifier2 = 300; var modifier3 = 2; var addition = 90; var count = 0; function setup() { createCanvas(600, 600); background(255); } function draw() { translate(width/2, height/2); stroke(237, 34, 93); beginShape(); var x1 = modifier1 * sin(radians(modifier3 * frameCount + addition)); var y1 = modifier2 * sin(radians(frameCount )); vertex(x1, y1); var x2 = modifier1 * sin(radians(modifier3 * (frameCount+1) + addition)); var y2 = modifier2 * sin(radians(frameCount+1)); vertex(x2, y2); endShape(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js"></script>