ProcessingJS, 자바스크립트 Canvas 라이브러리

Posted in 모바일/Javascript // Posted at 2013. 7. 12. 14:07

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 파일이 아닌 스크립트만으로도 가능하다. 다음과 같이...