P5.js
1. P5.js의 간단한 소개
p5.js는 디자이너와 아티스트들이 좀 더 손쉽게 프로그래밍에 접근할 수 있도록 만들어진 processing이라는 프로그램을 기반으로 만들어 졌습니다.
p5.js는 캔버스 요소를 사용하는 그리지만, 캔버스에 국한되지 않고, 텍스트, 입력, 비디오, 웹캠 및 사운드 와 같은 HTML5 개체를 포함하여 브라우저 페이지를 스케치로 생각할 수 있습니다.
그래픽, 애니메이션, 영상, 사운드 등과 같은 미디어 표현에 아주 뛰어난 능력을 발휘하고 있어 미디어 아트를 하는 학생들이나 동적인 웹 프로그래밍을 하고자 하는 개발자들에게 도움을 줍니다.
P5.js의 간결한 문법 구조로 인하여 쉽게 익히고 활용할 수 있다는 장점이 있고, p5.js를 지원하는 라이브러리들도 아주 풍부한 편입니다.
https://p5js.org/ko/libraries/
2. 간단한 예시
p5.js는 에디터를 지원하기 때문에 개발 전, 이 에디터롤 통해 다양한 시도를 해볼 수 있다.
아래의 예시로 나오는 코드들을 에디터에 넣어보면서 확인을 해보면 이해가 훨씬 쉬워진다. 
setup(){....}
setup( ){...} 은 프로그램을 실행시 1회 만 실행되는 함수이다.
주로 프로그램 실행에 필요한 기본 설정을 하는 코드를 작성하는 곳이라고 생각하면 된다.
draw(){...}
draw( ){...} 는 프로그램을 중지할 때 까지 계속 반복(무한반복)되는 함수이다. 따라서 프로그램이 해야 할 실질적인 작업은 대부분 draw( ) 에서 이루어집니다.
Canvas (캔버스)는 크롬과 같은 웹브라우저에서 나타나는 웹문서에 이미지로 표현되는 객체(DOM)입니다.
웹페이지 일부 영역에 그림을 그릴 수 있는 도화지(캔버스)를 만든다는 의미로 이해하면 되겠습니다.
실제로 캔버스 영역을 마우스 오른쪽 버튼을 클릭하여 이미지 파일로 다운로드가 가능합니다.
p5.js 에서 작업하는 대부분의 작업은 주로 캔버스를 대상으로 하므로 그림, 영상, 애니메이션, 게임과 같은 어플리케이션을 만든다면 바로 이 캔버스를 대상으로 작업을 하는 것이다.
2-1 2D
circle(x, y, d);
x, y 는 원을 그리는 기준점이다. x, y 좌표를 원의 중심으로 하는 원을 그리며, 지름의 길이는 d 이다. 원을 그리는 기준이 중앙( CENTER )으로 되어 있으나, 원의 기준점을 바꿀 수도 있다.
function setup(){
createCanvas(500, 400);
}
function draw(){
background(0, 150, 255);
circle(250, 200, 400);
}
fill(r,g,b,a)
도형의 색을 정하는 함수.
point(x,y)
function setup(){
createCanvas(500, 400);
background(255);
}
function draw(){
stroke(random(256), random(256), random(256), 100);
strokeWeight(random(1, 30));
point(random(width), random(height));
}
stroke(color)
strokeWeight(weight)
앞서 살펴 본 fill( )은 도형의 내부를 칠하는 함수라면 stroke( ) 는 점과 선의 컬러를 지정하는 함수입니다 strokeWeight( )는 점과 선의 두께(굵기)를 지정하는 함수입니다.
이외에도 noStroke( )라는 함수가 있는데 이는 원과 사각형과 같은 도형을 그릴 때 외곽선을 그리지 않고 싶을 경우에 사용합니다.
2-2 3D
createCanvas(w, h, WEBGL)
WEBGL은 Wikipedia에 다음과 같이 설명 되어 있다.
"WebGL은 OpenGL ES 2.0을 기반으로 하고 3차원 그래픽을 사용하기 위한 프로그래밍 인터페이스를 제공한다.
WebGL은 HTML5 캔버스 요소를 사용하고 문서 객체 모델 인터페이스를 사용해서 액세스할 수 있다.
자바스크립트 언어의 일부로서 자동 메모리 관리자가 제공된다."
WEBGL 은 3차원 그래픽을 위한 자바스크립트용 라이브러리이다.
WEBGL 을 사용하면 캔버스에 3D 그래픽을 처리할 수 있는 기능을 가지게 된다.
캔버스에서 3D 관련 함수들을 이용할 수 있게 해주며 3D 객체들을 사용할 필요가 없다면 WEBGL 이라는 인수는 생략하여야 한다.
plane([w], [h], [detailX], [detailY])
plane( ) 는 3D 로 입체화된 평면을 그리는 함수이다. 여기에서는 평판이라고 표기 하였다.
w 는 너비(가로의 크기), h 는 높이(세로의 크기),
detailX와 detailY 는 입체도형에서 각 면을 몇 개로 나누어서 표현할 것인가 하는 것이다. 세분면이라고 한다.
let i = 0;
function setup(){
createCanvas(500, 400, WEBGL);
}
function draw(){
background(220);
rotateX(i += 0.1);
plane(100, 100, 1);
}let i=0;
function setup(){
createCanvas(500, 400, WEBGL);
}
function draw(){
background('#AADD00');
rotateX(-0.9);
rotateY(i += 0.01);
sphere(150, 24, 24);
}2-3 webcam
let cam;
function setup() {
createCanvas(400, 300);
cam = createCapture(VIDEO);
cam.size(400, 300);
}
function draw(){
image(cam, 0, 0);
}3.reference
