p5.js 기본 구조와 좌표체계

p5.js의 기본 구조

p5.js의 기본 구조는 아래 코드에서 보는 것과 같이 setup, draw 2개의 시스템 함수로 이루어져 있다.

(자바스크립트의 함수 정의는 function 키워드로 시작됨)

function setup() {
  createCanvas(400, 400);  // 초기에 한 번 실행할 내용을 적어 준다
}

function draw() {
  background(220);  // 반복적으로 실행할 내용을 적어 준다
}

 

• setup 함수 : 초기화를 하는 부분으로, 처음에 한 번만 실행
• draw 함수 :  반복적 실행

 

 

p5.js 좌표 체계

우리가 수학 시간에 접하던 좌표와 ps5.js에서의 좌표는 좀 다르다. 
가로축이 X, 세로축이 Y인건 같지만 가운데가 아닌 화면의 좌측 상단이 (0,0)이 된다.

CANVAS 등 HTML 그래픽 요소에서도 동일한 좌표계가 적용되는데,  검색해보니 CSS 좌표계라는 명칭으로 불리고 있었다.
아래 그림을 참고하면 이해가 좀 더 쉽게 될 것 같다. 

 

CSS 좌표계와 일반 좌표계의 차이

 

 

ps5 레퍼런스 이용

ps5.org 사이트에서는 여러 명령어들을 모아놓은 레퍼런스를 제공한다. 생활코딩의 이고잉님이 예제를 먼저 실행해보고 설명을 본 다음 문법을 보라고 하셨는데, 직접 실행해보면 이해가 더 잘 될 것 같다. 

reference | p5.js

 

circle() 명령어의 레퍼런스 화면

 

위의 그림에서와 같이 예제에 edit / reset / copy 버튼이 있는데 각 버튼의 기능은 다음과 같다.

 

• edit : 편집 (편집 후 run 버튼을 클릭하면 원의 위치나 크기가 바뀐 것을 확인할 수 있다)
• reset : 초기화
• copy : 소스 복사

 

 

 

p5.js 시작하기

p5.js 를 배워보자