p5js 셋업

p5js 캔버스 셋업

• setup: 초기 세팅만 해준다.

  • createCanvas: 캔버스를 생성하는 함수

  • angleMode, rectMode: 각도 모드, 사각형 그리기 모드 설정하는 함수

• draw: 캔버스를 계속 그린다.

  • 예: setup, draw 각각의 background 함수에 random 색깔

  • 예: draw에서 background 함수 지우고, 도형 파라미터에 mouseX

  • 예: background 함수에서 투명도 파라미터를 설정하면, 잔상이 남는 효과가 생긴다.

  • 우리는 초기 설정 코드를 제외하고, 앞으로 거의 모든 코드를

    • function draw() { /** 여기 **/ } 안에 쓴다.

• 렌더러: CANVAS API 2D, WEBGL API - 2D & 3D, 쉐이더

p5js에서 2D 좌표

• (0, 0) 원점의 위치는 왼쪽모서리.

• p5js뿐만 아니라 순수 HTML 캔버스의 기본 세팅입니다.

---

p5js 시스템 변수

• 시스템 변수 (예약어): 이미 예약된 이름이다. 우리는 그냥 가져다가 쓰기만 하면 된다.

• windowWidth, windowHeight

  • 예: 캔버스 너비, 높이를 현재 인터넷 창 크기만큼

• width, height

  • 예: 도형 파라미터에 width, height을 넣어보자.

  • 캔버스의 중앙에 도형을 그리고 싶다면?

    • 너비의 중간. 높이의 중간.

    • ellipse(width * 0.5, height * 0.5, 40, 40)

    • rect(width * 0.5, height * 0.5, 40, 40)

• rectMode(CENTER) 코드로 사각형 그리기 설정을 바꿀 수 있다.

• 이 외: mouseX, mouseY 등