為什么此代碼在 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()語句來回答這個問題。