Processing :: Processing.js의 시작
html파일에서 프로세싱 적용하기
오늘 살펴보고자 하는 것은
Processing.js입니다^^
먼저 어떤 예제인지 영상을 통해
확인해보세요~
Processing.js란?
Processing.js는 데이터시각화, 인터랙티브 애니메이션,
미디어아트, 인포그래픽, 비디오게임 등 다양한 작업을
웹 표준의 작업환경에서 구현할 수 있도록 해줍니다.
중요한점은 Processing의 언어 그대로
특별한 플러그인 없이 구현이 가능하다는 점입니다^^
Processing의 결과물을 오프라인에서만
활용하는것이 아니라, 웹표준 환경에서 직접
구현할 수 있도록 해주는 것입니다.
프로세싱js는 프로세싱과는 별개로
Processing.js라는 주소를 사용합니다.
Processing.js예제를 시작하기전에
아래 파일을 다운로드받아주세요^^
파일을 받으신 후
압축을 풀어주세요~
폴더 안에는 위와같이 3개의 파일이 들어있습니다.
img폴더에는 예제에 사용될 이미지가 들어있습니다.
example은 html파일입니다.
그리고 Processing.js 파일이 있습니다.
그 다음,
[example]을 오른쪽클릭하여 편집기로 열어주세요
(에디터플러스, 메모장, 드림위버 등등 모두 가능합니다.)
html파일의 구성!
편집기로 열어보면
html의 구성은 아래사진과 같이 되어있습니다.
/*코드가 들어가는 부분입니다*/ 라고 표시에 둔
부분에 프로세싱 코드를 입력하시면 됩니다.
코드가 들어가는 <script>태그 아래에 있는
<canvas></canvas>태그를 통해 결과물이 출력되게 됩니다.
우리나라처럼 웹에 대한 접근성이
좋은 나라에서는 processing.js를 이용해서
다양한 콘텐츠를 만들 수 있을 것 같습니다.
앞으로 열심히 공부해야겠다는 생각이드네요^^
'시각화 > 프로세싱' 카테고리의 다른 글
▶ Processing :: 프로세싱 배우기 :: 기초예제 3 - ellipse()와 rect() (0) | 2014.04.16 |
---|---|
▶ Processing :: 프로세싱 사례 :: Shaping Cyclone (1) | 2014.04.15 |
▶ Processing :: 프로세싱 배우기 :: 기초예제 2 - 이미지 불러오기 (2) | 2014.04.11 |
▶ Processing :: 프로세싱 배우기 :: 기초예제 2 - 키보드에 반응하는 도형 (0) | 2014.04.09 |
▶ Processing :: 프로세싱 배우기 :: 기초예제모음 (0) | 2014.04.07 |