P5.js - 시작하기

P5.js

p5.js 무료 오픈소스 라이브러리로 다양한 이미지 처리를 통해 캔버스를 다루거나 3D입체도형, 애니메이션 처리, 기하학적인 이미지 처리 등을 좀 더 쉽게 해결할 수 있습니다.

공식 홈페이지도 한글 번역을 지원하니 보다 API 문서를 읽는데 도움이 됩니다.

p5 라이브러리를 사용하는데 중요한 메소드 2가지가 있습니다.

• setup()
• draw()

setup은 초기화 즉 처음에 페이지가 로드될 때, 처리할 코드를 입력합니다.

draw는 애니메이션 처리를 위한 코드를 입력합니다.

함수를 만들어서 정의만 해두면 코드가 알아서 실행됩니다.

 

시작하기

간단한 예제를 보겠습니다.

p5js.org/ko/

home | p5.js

먼저 공식홈페이지에서 p5.js를 다운로드 후 연결하도록 합니다.

다운로드 - p5.min.js(압축)을 받습니다.

다운로드 받은 파일을 연결 후 간단한 캔버스 생성과 도형을 그려보았습니다.

See the Pen P5.js start1 by myhappyman (@myhappyman) on CodePen.

 

또한, 마우스 이벤트를 통해 입력한 위치에 도형을 계속해서 그릴수도 있습니다.

See the Pen P5.js start2 by myhappyman (@myhappyman) on CodePen.

 

마우스 이동과 클릭에 따라 도형의 색이 달라진다!