▶ Processing.js :: Processing.js 시작하기 :: 기초 튜토리얼

Processing :: Processing.js의 시작

html파일에서 프로세싱 적용하기

오늘 살펴보고자 하는 것은

Processing.js입니다^^

먼저 어떤 예제인지 영상을 통해

확인해보세요~

Processing.js란?

Processing.js는 데이터시각화, 인터랙티브 애니메이션,

미디어아트, 인포그래픽, 비디오게임 등 다양한 작업을

웹 표준의 작업환경에서 구현할 수 있도록 해줍니다.

중요한점은 Processing의 언어 그대로 

특별한 플러그인 없이 구현이 가능하다는 점입니다^^

Processing의 결과물을 오프라인에서만

활용하는것이 아니라, 웹표준 환경에서 직접

구현할 수 있도록 해주는 것입니다.

[ Processing.js 메인 페이지의 모습 ]

프로세싱js는 프로세싱과는 별개로

Processing.js라는 주소를 사용합니다.

Processing.js예제를 시작하기전에

아래 파일을 다운로드받아주세요^^

예제폴더.zip

파일을 받으신 후

압축을 풀어주세요~

폴더 안에는 위와같이 3개의 파일이 들어있습니다.

img폴더에는 예제에 사용될 이미지가 들어있습니다.

example은 html파일입니다.

그리고 Processing.js 파일이 있습니다.

그 다음,

 [example]을 오른쪽클릭하여 편집기로 열어주세요

(에디터플러스, 메모장, 드림위버 등등 모두 가능합니다.)

html파일의 구성!

편집기로 열어보면

html의 구성은 아래사진과 같이 되어있습니다.

/*코드가 들어가는 부분입니다*/ 라고 표시에 둔

부분에 프로세싱 코드를 입력하시면 됩니다.

코드가 들어가는 <script>태그 아래에 있는

<canvas></canvas>태그를 통해 결과물이 출력되게 됩니다.

우리나라처럼 웹에 대한 접근성이

좋은 나라에서는 processing.js를 이용해서

다양한 콘텐츠를 만들 수 있을 것 같습니다.

앞으로 열심히 공부해야겠다는 생각이드네요^^