jQuery 개발자인 John Resig이 개발한 자바스크립트 기반의 그래픽 라이브러리로, Processing Java Library를 HTML5 Canvas 환경에 맞게 포팅한 것으로 각종 그래픽 작업 및 효과를 구현할 수 있다.
기존 Java 라이브러리와 동일한 구문을 사용하기 때문에 기존 사용자는 추가 노력 없이 쉽게 사용할 수 있다는 장점이 있다. 안타깝게도 개인적으로 자바 개발자가 아니라 접해 본 경험이 없어 아쉽다.
또한 HTML5의 Canvas 기능을 랩핑한 것이라 Canvas API를 직접 다루지 않고 쉽고 잘 추상화된 Processing 구문만으로 훌륭한 그래픽 효과를 줄 수 있다.
다음의 공식 사이트에서 라이브러리와 데모 및 레퍼런스를 얻을 수 있다
간단한 사용 예를 다음과 같다.
먼저 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 |