728x90

jQuery 개발자인 John Resig이 개발한 자바스크립트 기반의 그래픽 라이브러리로, Processing Java Library를 HTML5 Canvas 환경에 맞게 포팅한 것으로 각종 그래픽 작업 및 효과를 구현할 수 있다. 


기존 Java 라이브러리와 동일한 구문을 사용하기 때문에 기존 사용자는 추가 노력 없이 쉽게 사용할 수 있다는 장점이 있다. 안타깝게도 개인적으로 자바 개발자가 아니라 접해 본 경험이 없어 아쉽다.


또한 HTML5의 Canvas 기능을 랩핑한 것이라 Canvas API를 직접 다루지 않고 쉽고 잘 추상화된 Processing 구문만으로 훌륭한 그래픽 효과를 줄 수 있다. 


다음의 공식 사이트에서 라이브러리와 데모 및 레퍼런스를 얻을 수 있다

=> http://processingjs.org/

 

간단한 사용 예를 다음과 같다.


먼저 Processing 구문의 그래픽 코드를 pde 파일로 준비한다.

 

* basic-example.pde (http://processingjs.org/learning/ 에서 발췌)

// Global variables

float radius = 50.0;

int X, Y;

int nX, nY;

int delay = 16;


// Setup the Processing Canvas

void setup(){

  size( 200, 200 );

  strokeWeight( 10 );

  frameRate( 15 );

  X = width / 2;

  Y = width / 2;

  nX = X;

  nY = Y;  

}


// Main draw loop

void draw(){  

  radius = radius + sin( frameCount / 4 );

  

  // Track circle to new destination

  X+=(nX-X)/delay;

  Y+=(nY-Y)/delay;

  

  // Fill canvas grey

  background( 100 );

  

  // Set fill-color to blue

  fill( 0, 121, 184 );

  

  // Set stroke-color white

  stroke(255); 

  

  // Draw circle

  ellipse( X, Y, radius, radius );                  

}


// Set circle's next destination

void mouseMoved(){

  nX = mouseX;

  nY = mouseY;  

}



다음으로 processingJS 라이브러리르 참조하고 pde 파일을 Canvas로 연결하는 HTML 파일을 생성한다. 


* Test.html

<!DOCTYPE html>

<html>

<head>

  <script src="processing-1.4.1.js"></script>

</head>

<body> 

  <canvas data-processing-sources="basic-example.pde"></canvas>  

</body>

</html>


참고로 pde 파일을 웹 서버가 이해할 수 있도록 MIME 타입 설정을 잊지 말자.


물론 pde 파일이 아닌 스크립트만으로도 가능하다. 다음과 같이...

<!DOCTYPE html>

<html>

<head>

  <script src="processing-1.4.1.js"></script>

</head>

<body> 

  <script type="application/processing">

  // Global variables

  float radius = 50.0;

  int X, Y;

  int nX, nY;

  int delay = 16;

  

  // Setup the Processing Canvas

  void setup(){

    size( 200, 200 );

    strokeWeight( 10 );

    frameRate( 15 );

    X = width / 2;

    Y = width / 2;

    nX = X;

    nY = Y;  

  }

  

  // Main draw loop

  void draw(){  

    radius = radius + sin( frameCount / 4 );

    

    // Track circle to new destination

    X+=(nX-X)/delay;

    Y+=(nY-Y)/delay;

    

    // Fill canvas grey

    background( 100 );

    

    // Set fill-color to blue

    fill( 0, 121, 184 );

    

    // Set stroke-color white

    stroke(255); 

    

    // Draw circle

    ellipse( X, Y, radius, radius );                  

  }

  

  // Set circle next destination

  void mouseMoved(){

    nX = mouseX;

    nY = mouseY;  

  }

  </script>

  <canvas></canvas>  

</body>

</html>

 

다양한 데모를 직접 체험해 보고 싶으면 http://processingjs.org/download/ 에서 Examples zipped를 다운받아서 로컬 브라우저로 바로 확인 가능하다


'모바일 > Javascript' 카테고리의 다른 글

Zepto.js  (0) 2013.07.15
자바스크립트 상속  (0) 2013.07.12
평점에서 별표 마킹  (0) 2012.11.16
자주 쓰는 jQuery 기능 - 이벤트 편  (0) 2011.08.04
자주 쓰는 jQuery 기능 - 셀렉터(Selector) 편  (2) 2011.08.03