等效于处理函数的高效 javascript [英] Efficient javascript equivalent of Processing functions
问题描述
我调整了处理草图,以生成网络应用所需的电视静态效果的变体.现在我想把这个效果转换成JS/canvas.loadPixels()
、copyArray()
、updatedPixels()
和 draw()<的纯 javascript/canvas 等价物是什么?/code> 如以下处理代码中所示,或者如何最好地进行转换,因为 JS/canvas 可能不如 Processing/Java效率?
I tweaked a Processing sketch to produce a variant of a TV static effect I need for a web app. Now I want to convert this effect into JS/canvas. What are the pure javascript/canvas equivalents of loadPixels()
, copyArray()
, updatedPixels()
, and draw()
as given in the following Processing code, or how best to go about the conversion given that, probably, JS/canvas are not as efficient as Processing/Java?
int[] ppx;
Random generator = new Random();
void setup() {
size(640,480);
loadPixels();
ppx = new int[pixels.length];
for (int y = 0; y < ppx.length;y++) {
int spread = generator.nextInt(5);
switch(spread) {
case(1):
if(y-480 > 0) {
ppx[y] = ppx[y-480];
}
break;
case(2):
if(y-1 > 0) {
ppx[y] = ppx[y-1];
}
break;
case(3):
ppx[y] = color(0,generator.nextInt(2)*255,0);
if(y+480 < ppx.length) {
ppx[y+480] = ppx[y];
}
break;
case(4):
ppx[y] = color(0,generator.nextInt(2)*255,0);
if(y+1 < ppx.length) {
ppx[y+1] = ppx[y];
}
break;
case(0):
break;
};
}
frameRate(100000000000L);
}
void draw() {
for (int y = 0; y < height;)
arrayCopy(ppx, generator.nextInt(height/2), pixels, y++*width,width);
updatePixels();
}
推荐答案
到目前为止,我已经实现了这些函数,其中 s 指向了 HTMLCanvasElement.在没有 arrayCopy 是否可以改进尚无定论1448943/javascript-fastest-way-of-copying-an-array-portion-into-another">循环展开:
I've implemented these functions so far with s pointing to a HTMLCanvasElement. Jury is still out on whether arrayCopy can be improved without loop unrolling:
var x = s.getContext('2d');
var pixels;
function arrayCopy(src,sstart,dst,dstart,length) {
length += sstart;
dstart += length;
while(--length > sstart) {
dst[--dstart] = src[length];
}
}
function loadPixels() {
pixels = x.getImageData(0,0,s.width,s.height);
}
function updatePixels() {
x.putImageData(0,0,pixels);
}
我仍然不确定如何使 JS 等效于 draw()
函数.
I'm still unsure about how to make the JS equivalent of a draw()
function.
这篇关于等效于处理函数的高效 javascript的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!