以下代码失败且没有错误,它只是不将所有像素保持为绿色。由此产生的噪音效果非常酷,但我希望它们是绿色的。 我认为错误是因为我正在复制行但没有将它与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();
答案 0 :(得分:1)
工作小提琴:http://jsfiddle.net/8rgFQ/
以下代码有效且具有4种不同的绘图功能(具有不同级别的feedback):
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>