processing.js javascript Library 소개
Programming/Javascript 2008/05/11 17:26- 소개 John Resig 가 5월 8일 processing.js 라는 자바스크립트 라이브러리를 공개
- processing.js 란 ?
브라우저에서 Processing 이라는 프로그래밍 언어를 실행할 수 있도록 하는 자바스크립트 라이브러리.
또한 Processing 이란 뭐지 라는 질문이 생길텐데 Processing 이란 데이터 비쥬얼화를 위한 프로그래밍 언어 (비쥬얼 디자인을 위한 프로그래밍언어: Processing is a data visualization programming language. ) 뭔가 어려워 보이는데 실제 사용해보면 무지 간단함. - 사용방법 소개
- Processing.js 라이브러리 파일을 다운로드하기
- html 파일을 작성 후 , <script type="text/javascript" src="processing.js"></script> 를 추가하여 라이브러리 파일을 불러들임.
- canvas 태그 추가
<canvas width="100" height="100"></canvas>
이런식으로... - Processing 함수 호출하기
- 브라우저 호환성문제
processing.js 는 canvas 태그를 사용하고 있기에 IE 에서는 사용불가이지만 FF, Safari , Opear 등에서는 문제없음.
IE 문제를 해결하기위해서는 excanvas.js 를 다운로드해서 불러들이도록해야함.
위 사용방법에 따라 간단한 예를 들어보면<head>
<title>Processing Sample</title>
<script type="text/javascript" src="processing.js"></script> --> 2
<!--[if IE]><script type="text/javascript" src="excanvas.js"></script><![endif]--> -->브라우저호환성문제 해결용
<script type="text/javascript">
window.onload = function() {
var canvas = document.getElementsByTagName('canvas')[0];
var p = Processing(canvas);
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);
}; --> 4
</script>
</head>
<body>
<div>
<canvas width="400" height="400"></canvas> --> 3
</div>
</body>
<html>
보면 알지만 아주간단함.
아주 손쉽게 다음과 같은 이지미를 자바스크립트를 이용해 작성가능함.
http://ejohn.org/blog/processingjs/ 에서 확인할 수 있음.
'Programming > Javascript' 카테고리의 다른 글
| Javascript 의 alert 를 대체할 blackbird (0) | 2008/10/14 |
|---|---|
| processing.js javascript Library 소개 (0) | 2008/05/11 |
