p5.js

22 Mar 2018 on Processing

스케치를 웹 상에 올려보도록 하겠다.

프로세싱 언어로 스케치한 프로그램을 웹에 올려보도록 하겠다. 웹 상에 올리기 위해서는 Java 모드가 아닌 p5.js 모드로 변경해야 한다. p5.js는 프로세싱 프로그램을 웹 브라우저에서 실행시킬 수 있도록 지원해주는 Javascript 라이브러리다.

p5.js 모드는 PDE에서 Add Mode를 통해 추가한다. Java 모드 프로세싱 언어와 p5.js 모드 프로세싱이 다른 부분이 있기 때문에 차이점은 여기에서 확인할 수 있다.

p5.js 모드 소스코드

p5.js 모드로 작성한 프로그램은 다음과 같다.

function setup() {
  createCanvas(640, 480);
  stroke(255);
  noFill();
}

function draw() {
  background(0);
  ellipse(mouseX, mouseY, 50, 50);  
}

위 소스코드에서 Java 모드와 다른 p5.js 모드의 특징이 나타난다. p5.js 모드에서는 size()를 사용하지 않고 대신 createCanvas()를 사용한다.

Github Pages에 업로드하기

Github Pages를 통해 웹에 프로세싱 프로그램을 올려보도록 하겠다.

먼저 github에서 repository를 생성한다. repository 이름을 www로 하도록 하겠다.

그리고 프로세싱 소스코드를 repository에 업로드한다.

setting에 들어가서 github pages란에서 None을 master branch로 변경한다.

url 주소는 https://[github username].github.io/[repository name]/ 으로 생성된다. 필자의 경우에는 https://qpakzk.github.io/www/로 url 주소가 생성되었다. https://qpakzk.github.io/www/로 접속하면 프로세싱 프로그램을 웹에서 확인할 수 있다.