2013-03-19 2 views
1

웹 응용 프로그램에 필요한 TV 정적 효과의 변형을 만들기 위해 처리 스케치를 조정했습니다. 이제이 효과를 JS/캔버스로 변환하고 싶습니다. loadPixels(), copyArray(), updatedPixels()draw()의 순수 자바 스크립트/캔버스 동등 물은 다음 처리 코드에 나와있는 것과 같습니다. 또는 JS/캔버스가 효율적으로 이 아님을 조건으로 변환에 가장 적합한 방법은 처리/자바?처리 함수의 효율적인 자바 스크립트

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

답변

0

내가했습니다 지금까지 HTMLCanvasElement를 가리키는 이들 함수를 구현했습니다. 심사 위원은 loop unrolling없이 여부 arrayCopy can be improved에 여전히 :

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

난 여전히 draw() 함수의 JS 상응하는 방법에 대한 확실 해요.

+0

draw()는 while (true) {do stuff}와 같은 루프입니다. 또한 프레임 속도를 안정적으로 유지하려고합니다. 출처를 살펴보십시오. https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java –

+0

@ v.k. 시원한. 링크 주셔서 감사합니다! –

1
당신은 한방 변환에 존 레식의 Processing.js 사용할 수 있습니다

: http://processingjs.org/

캔버스와 JS는 좀 더 낮은 수준 어쩌면 여기에 시작되어 작동합니다 http://net.tutsplus.com/tutorials/javascript-ajax/canvas-from-scratch-pixel-manipulation/

+0

시도했지만 unlocated 토큰이 불법으로 실패했습니다. –

+0

그 net.tutsplus 기사를 살펴 보면서 내가 찾고있는 기능 중 적어도 두 가지를 보았습니다. – Jeffpowrs

+0

아마 무작위의 원인이 실패 할 수도 있습니다. Processingjs는 순수한 java를 번역 할 수 없습니다. built in function random()을 사용해보십시오. http://processing.org/reference/random_.html –