p5.js란 무엇인가?

p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리로, 예술가, 디자이너, 교육자, 입문자, 그리고 모두에게 접근성 높고 포용적인 언어를 지향하며 무료 오픈 소스로 제공되는 언어입니다.

 

마치 스케치북처럼 다양한 드로잉 기능을 제공하며 인터넷 브라우저 전체를 스케치북 삼아 그릴 수 있을 뿐 아니라, 텍스트, 입력, 비디오, 웹캠, 그리고 사운드 등을 비롯한 각종 HTML 요소를 사용할 수 있습니다.

 

프로세싱(Processing)의 구문과 규칙을 최대한 따르기때문에 프로세싱의 웹버전이라고 할 수 있습니다. 하지만 프로셋ㅇ이은 Java언어를 기반으로 하고 p5.js는 웹 브라우저에서 동작하는 자바스크립트 프레임워크로서 시각적인 미디어 아트나 사용자와의 상호작용을 쉽게 구현하 수 있도록 지원한다는 것이 다른 점입니다.

p5.js 바로가기

home | p5.js

 

p5.js 웹에디터를 이용하여 코드를 입력하고 바로 실행하면 preview 화면에 시뮬레이션이 됩니다.

그림을 스케치하듯 코딩도 쉽게 할 수 있어야 한다는 의미에서 소스코드를 스케치(Sketch)라고 합니다.

 

p5.js의 기본적인 코드의 구조는

function setup() {

}

function draw() {

}

 

위의 코드와 같습니다.

 

p5.js 사이트에서 왼쪽 메뉴 중 '예제'를 선택하여 궁금한 내용을 공부해보기 바랍니다.

예제 공부하기

 

아두이노의 통합개발환경(IDE)는 프로세싱으로부터 많은 영향을 받아 개발되었기때문에 매우 비슷한 구조를 가지고 있습니다. 아두이노에서의 코딩과정도 그림을 스케치하듯 코딩도 쉽게 할 수 있어야 한다는 의미로 소스코드를 스케치(sketch)라고 합니다.

 

아두이노의 소스 구조

void setup(){
}


void loop(){

}

 

 

다음시간부터는 아두이노와 p5.js를 연결하여 활용하는 방법에 대해 공부하겠습니다.

 

참고도서 : 코딩북스 New p5.js & 아두이노 연동(김성일 지음)

https://www.yes24.com/Product/Goods/121204100

[전자책]New P5.js & 아두이노 연동 - 예스24