JS/canvas putImageData가 실패합니다.

Question

다음 코드는 오류없이 실패하고 단순히 모든 픽셀을 초록색으로 유지하지 않습니다. 그 결과 잡음 효과는 아주 멋지지만, 나는 그것들을 녹색으로 원한다. 행을 복사하지만 RGBA 읽기 프레임에 정렬하지 않기 때문에 오류라고 생각합니다. 바이올린은 여기에 있습니다 : http://jsfiddle.net/mDk2W/2/

var s = document.getElementById('s'); 
s.width = 640; 
s.height = 480; 
var x = s.getContext('2d'); 
var idata; 
var ppx; 

function arrayCopy(src, sstart, dst, dstart, length) { 
    for (var i = sstart; i < sstart + length; i += 1) { 
     dst[dstart++] = src[i]; 
    } 
} 

function loadPixels() { 
    idata = x.getImageData(0, 0, s.width, s.height); 
    ppx = idata.data; 
} 

function updatePixels() { 
    idata.data = ppx; 
    x.putImageData(idata, 0, 0); 
} 

function setup_static() { 
    loadPixels(); 
    for (var y = 0; y < ppx.length - 4; y += 4) { 
     var spread = Math.round(Math.random() * 4); 
     switch (spread) { 
      case (1): 
       if (y - 1920 > 0) { 
        ppx[y + 1] = ppx[y - 1919]; 
       } 
       break; 
      case (2): 
       if (y - 4 > 0) { 
        ppx[y + 1] = ppx[y - 3]; 
       } 
       break; 
      case (3): 
       ppx[y + 1] = parseInt(Math.round(Math.random()) * 255); 
       if (y + 1921 < ppx.length) { 
        ppx[y + 1920] = ppx[y + 1]; 
       } 
       break; 
      case (4): 
       ppx[y + 1] = parseInt(Math.round(Math.random()) * 255); 
       if (y + 5 < ppx.length) { 
        ppx[y + 5] = ppx[y + 1]; 
       } 
       break; 
      case (0): 
       break; 
     }; 
    } 
} 
setup_static(); 
var height = s.height; 
var heightover2 = height/2.0; 
var widthby4 = s.width * 4; 

function draw() { 
    for (y = 0; y < height; y += 1) { 
     arrayCopy(ppx, parseInt(Math.round(Math.random() * (heightover2))), ppx, y * widthby4, widthby4); 
    } 
    updatePixels(); 
    requestAnimationFrame(draw); 
} 
draw(); 

Answer 1

작업 바이올린 : http://jsfiddle.net/8rgFQ/ 다음 코드는 작동하고 (다양한 feedback의 수준) 4 개 가지 그리기 기능이

:

var s = document.getElementById('s'); 
s.width = 640; 
s.height = 395; 
var height = s.height; 
var heightover2 = height/2.0; 
var widthby4 = s.width*4; 
var x = s.getContext('2d'); 
var idata; 
var ppx,pixels; 
function arrayCopy(src,sstart,dst,dstart,length) { 
      for(var i = sstart; i < sstart+length;i+=1) { 
        dst[dstart++] = src[i]; 
      } 
    } 
function fillArray(a,c,l) { 
    a = new Array(l); 
    while(l-- > 0) { 
     a[l] = c; 
    } 
    return a; 
}; 
function loadPixels() { 
    idata = x.getImageData(0,0,s.width,s.height); 
    ppx = idata.data; 
    idata = x.getImageData(0,0,s.width,s.height); 
    pixels = idata.data; 
} 
function updatePixels() { 
    idata.data = pixels; 
    x.putImageData(idata,0,0); 
} 
function setup_static() { 
     loadPixels(); 
     for (var y = 0; y < ppx.length-4;y+=2) { 
      var spread = Math.round(Math.random()*4); 
      switch(spread) { 
     case(1): 
      if(y-widthby4+1 > 0) { 
      ppx[y+1] = ppx[y-widthby4+1]; 
      } 
      break; 
     case(2): 
      if(y-4 > 0) { 
      ppx[y+1] = ppx[y-3]; 
      } 
      break; 
     case(3): 
      ppx[y+1] = parseInt(Math.round(Math.random())*255); 
      if(y+widthby4+1 < ppx.length) { 
      ppx[y+widthby4+1] = ppx[y+1]; 
      } 
      break; 
     case(4): 
      ppx[y+1] = parseInt(Math.round(Math.random())*255); 
      if(y+5 < ppx.length) { 
      ppx[y+5] = ppx[y+1]; 
      } 
      break; 
     case(0): 
      break; 
      }; 
    } 
} 
setup_static(); 
//arrayCopy(ppx,0,pixels,0,ppx.length); 
//updatePixels(); 
// height rows of feedback per frame and no reading frame alignment 
function draw() { 
    for (y = 0; y < height; y += 1) { 
     arrayCopy(pixels, parseInt(Math.round(Math.random() * (heightover2))), pixels, y * widthby4, widthby4); 
    } 
    updatePixels(); 
    requestAnimationFrame(draw); 
} 
//arrayCopy(ppx,0,pixels,0,ppx.length); 
//draw(); 
// height rows of feedback per frame 
function draw1() { 
    for(y = 0; y < height;y+=1) { 
     var row = parseInt(Math.round(Math.random()*(heightover2))); 
     row -= row%2; 
      arrayCopy(pixels,row, pixels, y*widthby4,widthby4); 
    } 
    updatePixels(); 
    requestAnimationFrame(draw1); 
} 
//arrayCopy(ppx,0,pixels,0,ppx.length); 
//draw1(); 
// no feedback beyond 1 frame 
function draw2() { 
    for(y = 0; y < height;y+=1) { 
     var row = parseInt(Math.round(Math.random()*(heightover2))); 

     row -= row%2; 
      arrayCopy(ppx,row, pixels, y*widthby4,widthby4); 
    } 
    for(y = 0; y < height;y+=1) { 
     var row = parseInt(Math.round(Math.random()*(heightover2))); 

     row -= row%2; 
      arrayCopy(pixels,row, pixels, y*widthby4,widthby4); 
    } 
    updatePixels(); 
    requestAnimationFrame(draw2); 
} 
//draw2(); 
// 1 row of feedback per frame 
function draw3() { 
    for(y = 0; y < height;y+=1) { 
     var row = parseInt(Math.round(Math.random()*(heightover2))); 

     row -= row%2; 
      arrayCopy(ppx,row, pixels, y*widthby4,widthby4); 
    } 
    for(y = 0; y < height;y+=1) { 
     var row = parseInt(Math.round(Math.random()*(heightover2))); 

     row -= row%2; 
      arrayCopy(pixels,row, pixels, y*widthby4,widthby4); 
    } 
    var row = parseInt(Math.round(Math.random()*(heightover2))); 
    arrayCopy(pixels,row,ppx,row*widthby4,widthby4); 
    updatePixels(); 
    requestAnimationFrame(draw3); 
} 
draw3(); 

HTML/CSS :

<style> 
#s { 
    width:640px; 
    height:395px; 
    background:black; 
} 
</style> 
<canvas id="s"></canvas>