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

Question

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

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 到 frameCount + 1 的 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>

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

My code can't draw anything instead of displaying a white canvas

javascript

processing

p5.js