javascript - 在处理 js 时无法从 PImage 获取像素 []

Question

我一直在尝试使用 processing.js 运行以下代码，但它只会让我看到一个灰色窗口。我认为这是因为它没有正确访问图像像素[]。

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);
}