▶함께배우는 프로세싱 :: Processing.js 설치 및 시작하기

▶Processing.js tutorial #1 설치 및 시작하기

Processing.js 이란?

---

Processing.js는 자바스크립트로 작성된 라이브러리이며,

프로세싱 코드가 HTML5를 지원하는 브라우저에서

별도의 플러그인 없이 수행될 수 있도록 하는 기능^[각주:1]을합니다.

프로세싱으로 작성한 코드를 HTML의 canvas기능을 사용하여

자동으로 자바스크립트로 변환해줍니다.

*html의 canvas기능은 대부분의 웹브라우저에서 지원

[Processing java script 의 설치과정]

프로세싱 실행화면에서

우측 상단에 [Java]를 클릭한 후 [Java Script]를 눌러주면

javaScript모드로 설정이 변경되게 됩니다.

[JavaScript]가 없다면?

[Add Mode..]를 클릭하신 후

새로 열리는 창에서 [Java Script Mode]를 클릭후

우측에 [Install]을 누르시면 설치가됩니다.

[Processing java와 Processing java script 의 실행모습]

프로세싱 화면 상단의 색상이 바뀌었을뿐,

크게 다른 모습은 아닙니다.

Processing.js 다운로드

---

프로세싱 화면에서와는 별개로

Processing.js 홈페이지에서 다운로드를 받아야합니다.

    [Processing.js 다운로드페이지 바로가기]    

위 사진에 빨간 네모박스 안에서

최신버전의 Processing.js를 다운로드 해줍니다.

다운받으려고 보면

Development와 Production vesion이 있습니다.

사용하고자하는 목적에 맞게 다운로드받아주시면 됩니다.

[Processing.js Development와 Production 클릭시 화면모습]

Development 와 Production의 차이

[ Development - processing.js v1.4.8 ] : 일반적으로 사용할 때

[ Production - processing.min.js v1.4.8 ] : 전송속도를 고려하여 빈칸, 불필요한 부분 삭제

[Processing.js페이지에서 java script라이브러리 다운로드받기]

원하는 버전을 클릭하게되면 다른 페이지로 이동됩니다.

여기서 모두선택(Ctrl+A)을 한 후, 복사를 해줍니다.

[Processing.js페이지에서 java script라이브러리 다운로드받기]

Sublime text, 에디터플러스, 드림위버 등의 프로그램도 있지만

가장 이해하기쉬운 '메모장'을 이용하여 진행하겠습니다.

복사한 Java Script 라이브러리를

메모장에 불어넣기해줍니다.

[Processing.js페이지에서 java script라이브러리 다운로드받기]

메모장을 저장해주는데

이때 저장형식을 .js(Java Script)로 해줍니다.

HTML 파일생성

---

프로세싱이 웹에서 동작하기 위해서는

HTML파일을 만들어주어야 합니다.

[Processing.js예제 - HTML의 형식]

HTML문서의 구조는 위 사진과 같습니다.

(*이 외에도 다양한 형태로 HTML을 구성할 수 있습니다.)

[Processing.js예제 - HTML의 형식]

위 사진에서 빨간색 네모로 표시 되어있는 공간이

프로세싱코드가 들어가는 자리입니다.

HTML파일에 프로세싱 코드 삽입하기

---

만들어 둔 html파일안에

프로세싱 코드를 넣어주면 완성입니다.

동작하는지 확인하는 것이 목표이기때문에

간단한 예제를 하나 만드시거나,

하고 계시던 작업파일을 복사해서

위에서 말씀드렸던 공간에 넣어줍니다.

+@

---

이번 예제를 진행하는 과정에서 주의해야할 부분을

정리해보겠습니다.

- html파일과 processing.js라이브러리 파일은 같은 경로에 위치

- 프로세싱코드가 제대로 동작하는지 프로세싱에서 체크한 뒤 삽입

- Processing.js가 프로세싱코드를 100%지원하는 것은 아님.

- 익스플로러, 크롬, 파이어폭스, 사파리 등 브라우저별 지원여부 체크

[2가지 파일은 같은 폴더안에 있어야 합니다.]

html파일과 processing.js라이브러리 파일은 같은 경로에 위치

html파일과 processing.js라이브러리 파일은

같은 경로안에 위치해야합니다.

[브라우저별 실행화면.]

익스플로러, 크롬, 파이어폭스, 사파리 등 브라우저별 지원여부 체크

브라우저별 지원여부를 미리 체크하고

실행해보아야합니다.

**

같은 브라우저안에서도

어떤 프로세싱코드인지, 어떤 방법으로 적용했는지 등

다양한 요인에따라 실행결과가 달라질 수 있습니다.

**

1. 정기철, 『게임을 만들며 배우는 프로세싱』, 2013, 숭실대학교 출판국, p,181 [본문으로]