P5JS 정리

서론

P5JS를 공부하며 배운 것들을 정리해보자

구현해보기

createGraphics

createGraphics()는 새로운 p5.Renderer 객체를 생성하고 반환한다
Renderer는 컴퓨터 프로그램으로 이미지를 만드는 방식인데
새로운 이미지 객체를 생성한다는 의미이다

let pg;
function setup() {
  createCanvas(100, 100);
  pg = createGraphics(100, 100);
}

function draw() {
  background(200);
  pg.background(100);
  pg.noStroke();
  pg.ellipse(pg.width / 2, pg.height / 2, 50, 50);
  image(pg, 50, 50);
  image(pg, 0, 0, 50, 50);
}

image()는 그려준다는 의미이고, 매개변수 pg는 그려줄 객체이고
그 뒤는 xy 좌표를 가르킨다

map

map함수는 원래의 값을 다른 상태로 정규화시키는 함수로

✏️ map(value, start1, stop1, start2, stop2, [withinBounds])

value: 바꿀 값
start1: 원래 값의 범위(하한)
stop1: 원래 값의 범위(상한)
start1: 바꿀 값의 범위(하한)
stop1: 바꿀 값의 범위(상한)

사이즈

공부하면서 window 크기가 바뀌거나 canvas 크기가 바뀔 때
사용했던 함수이다

document.body.clientHeight: body 전체의 높이(스크롤 포함)
windowHeight: 브라우저의 화면 높이(탭 등 제외)
height: canvas 전체 높이
window.(X or Y)Offset: 스크롤이 멈출 때 까지의 높이

push, pop

p5js에는 canvas에서 사용되는 save(), restore()과 같은 기능인
push(), pop() 함수가 있다
또한 canvas와 마찬가지로 stack으로 동작한다

✏️ push(), pop()

push: 스타일의 상태를 저장
이후에 push한 스타일로 이어서 작성 가능

pop: 이전 상태로 복원
push해 놓았던 스타일을 해제시킨다음 이전의 상태로 돌아갈 수 있음