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

Answer 2

我一直在处理这个问题。问题似乎是文档出错了。

我几乎完全按照你在上面显示的结果做了相同的结果，但事实证明这是你必须这样做的方式：

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

JSFiddle

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

2 个答案: