처리 중 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); 
} 

코드가 나는 그것이 processing.js에서 작동하지 않는 이유를 정확히 모르는 여기 http://sketchpad.cc/sp/pad/view/ro.TExeW6NhoU8/rev.163

Answer 1

실행 중입니다.

그러나 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

가