[p5.js] 기본 활용법 + 도형 만들어보기

p5.js는 vscode와 같은 에디터가 없어도 기본적으로 웹에서 활용할 수 있는 에디터를 제공한다.

https://editor.p5js.org/

p5.js Web Editor

 

위 페이지에서 코드를 작성할 수 있고, 이렇게 작성한 코드를 외부로 export하거나 아니면 다운로드 받아서 자신의 로컬환경에 설치된 vscode와 같은 에디터에서 열어볼 수도 있다.

 

상단의 File > Share를 선택하면 위와 같은 창이 나오는데,

iframe으로 html에 바로 삽입할 수도 있고, 주소를 연결해서 full screen으로 볼 수도 있다.

 

다만 위와 같이 상단바는 없앨 수 없으므로, 저 바가 보기 싫다면 소스코드 자체를 직접 배포하면 된다.

 

 

 

점, 선, 면 등 여러 도형 만들어보기

 

 

push()와 pop()을 이용한 도형 레이어화 예제

(여러 도형을 만들고, 이들을 묶어서 한꺼번에 옮김)