[프로세싱] p5.js 를 이용한 웹프로그래밍

웹에 작품을 전시하려면 웹 프로그래밍을 배워야한다. 웹 프로그래밍에는 자바스크립트(Javascript) 언어를 많이 사용하는데 이것을 프로세싱을 이용해서 구현할 수 있다.



먼저, 프로세싱에서 p5js 라는 모드를 설치해야한다.
프로세싱을 실행한 후, 오른쪽 상단에 Java 버튼을 눌러 모드를 추가해준다.

그 다음, p5.js 를 선택한 후, 모드를 설치한다.

//프로세싱 언어와 다른 점.

프로세싱 언어는 Java 언어를 기반으로 하였지만, 웹 프로그래밍을 위한 ph.js 모드는 자바스크립트 언어이다. 그로 인해 프로세싱과 약간의 차이가 있다.

* size() 함수는 creatCanvas() 함수로 바꾼다.

* 함수의 선언에서는 자바스크립트 형식으로 'function' 키워드를 사용한다.

* frameRate(num) 함수는 그대로 있고, frameRate 번수는 사용할 수 없다. 대신 frameRate() 함수를 파라미터 없이 사용하면 frameRate 변수를 대신한다.

* 자바스크립트는 로딩 작업을 동기적으로 하지 않는다. 즉 로딩 작업이 마친 것을 꼭 확인해야하는데, 이 문제를 해결하기 위해서 콜백 함수를 이용하거나, setup() 전에 실행되는 preload() 함수에서 로딩 작업을 하는 방법이 있다.

* 마우스 이벤트와 유사하게 touch와 관련된 변수와 함수가 있다.

- mouseX -> touchX 

- mouseY -> touchY

- mousePressed() -> touchStarted()

- mouseDragged() -> touchMoved()

- mouseReleased() -> touchEnded()

* push()/popMatix()와 push/popStyle()은 push()와 pop()으로 대신한다.

* 배열 변수를 선언하는 방식이 다르다. 그리고 배열은 가변 길이를 지원한다.

* 변수의 자료형을 지정하지 않는다. 대신 변수 선어네 'var' 키워드를 사용한다.

* 자세한 차이점은 아래 페이지를 참고하자.

https://github.com/processing/ph.js/wiki/Processing=transition