为什么此代码在 p5.js 中的 canvas 上没有任何内容？

Question

在 p5.js 中，我试图可视化线性搜索算法。 我有一组数字，并希望通过将它们绘制为向上的线来可视化它们。

当我将 forEach 循环放入设置 function 时，什么也没有出现。 如果我把它放在draw function中，我看到我正在寻找的确切结果弹出半秒钟然后消失...... （程序运行时调用设置function，并且不断调用绘图循环每帧）（function 线从第一个 x,y 到第二个 x,y 线（x,yx,y）绘制一条线

这是代码：

let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
let buffer = 0

function setup() {
  createCanvas(400, 400);

  
  numbers.forEach((number) => {
    stroke(0);
    strokeWeight(4);
    line(buffer, height, buffer, number * 50)
    buffer += 15
  });
}

function draw() {
  background(255);
}

Answer 1

想想事情发生的顺序。

你自己说的：

程序运行时调用setup function，每帧不断调用draw loop

因此，使用您拥有的代码， setup function 在程序的最开始运行一次，然后draw function 每秒调用 60 次。 您在draw function 中所做的唯一一件事就是绘制背景，这会删除您在setup function 中绘制的内容。 尝试删除对background(255)的调用以了解我的意思。

然后当你把你的代码移到draw function中时，我会提供这个提示：每帧buffer变量的值是多少？ 您可能会使用一些console.log()语句来回答这个问题。