1

Processing スケッチを微調整して、Web アプリに必要な TV 静的効果のバリエーションを作成しました。この効果を JS/canvas に変換したいと思います。loadPixels()次の処理コードに示されている、copyArray()、 、updatedPixels()に相当する純粋な javascript/canvas は何ですか?または、おそらく JS/canvas はProcessing/Javaほど効率的draw()ではないことを考えると、どのように変換するのが最善でしょうか?

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

2 に答える 2

1

ワンショット変換には John Resig の Processing.js を使用できます: http://processingjs.org/

キャンバスとJSの作業はもう少し低レベルです。

于 2013-03-19T13:51:48.870 に答える
0

私はこれまで、HTMLCanvasElement を指す s を使用してこれらの関数を実装してきました。ループのアンロールなしで arrayCopy を改善できるかどうかについては、まだ結論が出ていません。

    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()。

于 2013-03-19T14:05:06.100 に答える