P5.js set() 导致绘图停止工作

Question

这是我的示例代码：

function setup() {

  createCanvas(500, 500);
  background(255);

  fill(255, 0, 0);
  rect(100, 100, 100, 100);

  set(0, 0, color(0));
  updatePixels();

  fill(255, 0, 0);
  rect(300, 100, 100, 100);

  set(0, 0, color(255));
  updatePixels();

}

这个程序应该在屏幕上绘制两个红色方块。它应该是这样的：

绘制第一个正方形后，位置 (0, 0) 的像素也使用函数 set(). To make the change take effect, updatePixels() 手动设置为黑色。绘制完第二个正方形后，将像素点(0, 0)设置回白色，再次调用updatePixels()

但是当你看实际结果时，第二个方块不见了：

一段时间后，我确实找到了解决这个问题的方法，但我不明白为什么它会起作用。在调用 set() 之前，你必须插入一个 loadPixels().

function setup() {

  createCanvas(500, 500);
  background(255);

  fill(255, 0, 0);
  rect(100, 100, 100, 100);

  loadPixels();
  set(0, 0, color(0));
  updatePixels();

  fill(255, 0, 0);
  rect(300, 100, 100, 100);

  loadPixels();
  set(0, 0, color(255));
  updatePixels();

}

我以为如果你想把像素数据加载到pixels[]，你只需要调用loadPixels()。此外，set() 的 p5.js 参考没有告诉您必须在使用 set() 之前调用 loadPixels() 才能正确使用它。
那么，为什么调用loadPixels()可以解决问题呢？这个问题可能是一个错误吗？

Answer 1

如果你查看文档，它说将显示器 window 的像素数据加载到 pixels[] 数组中。 This function must always be called before reading from or writing to pixels[] 。请注意，只有使用 set() 或直接操作 pixels[] 进行的更改才会发生。
所以这应该总是在 set

之前声明

read more https://p5js.org/reference/#/p5/loadPixels

P5.js set() 导致绘图停止工作

P5.js set() causes drawing to stop working

javascript

p5.js