如何访问 p5.js 中的 PGraphics 像素

Question

我正在尝试从 p5.js 中的 PGraphics 实例访问像素，但即使在调用 loadPixels() 之后数组还是空的。

这是我尝试过的方法：

var buffer;

function setup() {
  createCanvas(100,100);
  pixelDensity(1);

  buffer = createGraphics(100,100);
  buffer.background(128);
}

function draw() {
  image(buffer,0,0);
}

function mouseDragged(){
  buffer.ellipse(mouseX,mouseY,3,3);
  buffer.loadPixels();
  console.log(buffer.pixels);//expecint pixels array, getting empty array
}

是否可以使用 p5.js 访问 PGraphics 中的像素？如果可以，怎么做？

Answer 1

这似乎是一个错误：https://github.com/processing/p5.js/issues/1403

其他相关错误here and here。

已在最新版本（2016 年 8 月 17 日版本 0.5.3）中修复。

如果您像我一样使用 p5.js 编辑器，那么显然它使用的是旧版本的库。您可以下载最新版本并将其复制到您的草图文件夹中。这似乎在编辑器运行之间持续存在，这有点可怕，但也许在幕后发生了一些魔法。

无论如何，您的代码在更新到最新版本后可以正常工作。

如何访问 p5.js 中的 PGraphics 像素

How to access PGraphics pixels in p5.js

javascript

processing

p5.js