在处理js时无法从PImage获取pixels[]

Question

我一直在尝试使用processing.js运行下面的代码，但是它只会给我一个灰色的窗口。我认为这是因为它不能正确访问图像pixels[]。

PImage img;


void setup() {  // this is run once.  
 size(600, 400); 
 img=loadImage("http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1");

} 
void draw() {  // this is run repeatedly.   

int dimension = (img.width*img.height);
img.loadPixels();
for (int i=0; i < dimension; i+=2) { 
  img.pixels[i] = color(0, 0, 0); 
} 
img.updatePixels();
   image(img, 0, 0);
}

代码在这里运行，http://sketchpad.cc/sp/pad/view/ro.TExeW6NhoU8/rev.163

Answer 1

我不知道为什么它不能在processing.js上工作。

但是，每次调用draw()函数时，您都要进行图像处理(绘制黑色条纹)，这似乎是不必要的，并且可能对浏览器来说过于密集。请记住，setup()函数在草图开始时调用一次，而draw()函数在草图运行时在无限循环中调用(它在关闭草图时停止)。

因此，基本上在setup()函数中进行一次图像处理，然后在draw()函数中绘制处理后的图像(您不需要这样做，也可以在setup()函数中绘制图像)。看看你在http://sketchpad.cc/sp/pad/view/ro.TExeW6NhoU8/rev.163上的其他例子，这段代码可能会这样做：

PImage img;

void setup() {  // this is run once.  
  size(600, 400); 
  img=loadImage("http://c.tadst.com/gfx/600x400/int-mountain-day.jpg?1");
  img.loadPixels();
  int dimension = (img.width*img.height);
  for (int i=0; i < dimension; i+=2) { 
     img.pixels[i] = color(0, 0, 0);
  } 
  img.updatePixels();
} 
void draw() {  // this is run repeatedly. It only draws the image again and again.   
  image(img, 0, 0);
}

Answer 2

我一直在处理这个问题。问题似乎在于文档是完全错误的。

我做的几乎和你上面展示的一样，结果也一样，但事实证明这是你必须要做的：

var pixels = bg.pixels.toArray();
for(var i=0;i<pixels.length;++i){
  pixels[i] = color(0);
}
bg.pixels.set(pixels);

JSFiddle