[Creative coding/P5js] 0.0 - Getting Started

국내에는 Creative coding 관련 강좌는 물론 유튜브 튜토리얼도 찾아보기 힘들기 때문에.. 해외 유튜버를 찾아보았다.

 

Algorithmic Art의 'Creative coding for complete beginner'를 따라 해 보기로 했다.

https://youtu.be/VpIFZ0xcJWM

 

목소리가 정말 좋으시다. ASMR 같기두 하구.. 명상음악 같기두 하구..

또, 굉장히 우쭈쭈 해주신다. 아이들 대상으로 강의하듯이.. 이런 기분 오랜만이야.

 

어쨌든 첫 강의에서는 간단하게 OpenProcessing 계정을 만들고, 스케치를 하나 생성해보았다.

스케치에는 기본 코드가 작성되어 있는데, 마우스가 움직이는 대로 하얀 점이 찍어지는 코드이다.

 

사용되는 언어는 P5js라는데.. 검색해보니 크리에이티브 코딩을 위한 자바스크립트 라이브러리라고 한다..

 

 

function setup() {
	createCanvas(windowWidth, windowHeight);
	background(100);
}

function draw() {
	ellipse(mouseX, mouseY, 20, 20);
}

 

엄청 간단하다.

아직은 잘 모르겠지만, 기본 설정을 하는 setup 함수 안에서 화면 크기의 캔버스를 만들어주는 것 같고,

draw 함수 안에서 20 * 20 크기의 타원을 마우스 위치를 따라 반복해서 그려 주는 것 같다.

 

결과는?!

 

 

짠!! 기여버..