为啥这段代码没有在 p5.js 的画布上输出任何东西？

Posted 2023-02-16

【中文标题】为啥这段代码没有在 p5.js 的画布上输出任何东西？

【英文标题】：Why does this code not output anything onto the canvas in p5.js?为什么这段代码没有在 p5.js 的画布上输出任何东西？

【发布时间】：2020-07-02 14:23:12

【问题描述】：

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

当我将 forEach 循环放入 setup 函数时，什么也没有出现。如果我把它放在绘图功能中，我会看到我正在寻找的确切结果弹出半秒钟然后消失...... （程序运行时调用setup函数，每帧连续调用draw循环）（line函数从第一个x,y画一条线到第二个x,y line(x,y x,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);

【问题讨论】：

setup 是 p5 执行的第一个函数，然后每帧执行绘制，并且您基本上通过将背景设置为白色来清除画布。在迭代数字之前在设置中执行后台

【参考方案1】：

想想事情发生的顺序。

你自己说的：

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

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

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