레슨 1 / 8·15분
p5.js 시작하기
p5.js의 기본 구조: setup()과 draw()
p5.js는 크리에이티브 코딩을 위한 자바스크립트 라이브러리입니다. 모든 p5.js 프로그램은 두 가지 핵심 함수로 구성됩니다: setup()은 프로그램 시작 시 한 번 실행되어 캔버스를 만들고 초기 설정을 하며, draw()는 매 프레임마다 반복 호출되어 화면을 그립니다. 기본적으로 draw()는 초당 60회 호출됩니다.
javascript
// p5.js 기본 구조
function setup() {
// 프로그램 시작 시 1번만 실행
createCanvas(800, 600); // 800x600 크기의 캔버스 생성
background(20); // 배경색 (0=검정, 255=흰색)
frameRate(60); // 초당 프레임 수 설정
}
function draw() {
// 매 프레임마다 반복 실행 (기본 60fps)
background(20); // 매 프레임 배경을 다시 그려 잔상 제거
// 캔버스 중앙에 원 그리기
fill(255, 100, 150); // 채우기 색상 (R, G, B)
ellipse(width / 2, height / 2, 100, 100); // x, y, 너비, 높이
}- •createCanvas(w, h) — 지정한 크기의 HTML5 캔버스를 생성
- •background(color) — 캔버스 전체를 지정한 색으로 채움
- •frameRate(fps) — draw() 호출 빈도 설정 (기본 60)
- •width / height — 캔버스의 현재 가로/세로 크기
- •setup() — 초기화 코드, draw() — 반복 렌더링 코드
html
<!-- HTML에서 p5.js 사용하기 -->
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1.9.0/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<!-- 캔버스는 p5.js가 자동으로 생성합니다 -->
</body>
</html>💡
draw() 안에서 background()를 호출하지 않으면 이전 프레임의 그림이 그대로 남아 흔적(trail) 효과가 생깁니다. 이 효과를 의도적으로 활용하면 멋진 비주얼을 만들 수 있습니다.