레슨 2 / 8·15분
도형과 색상
다양한 도형 그리기
p5.js는 원, 사각형, 선, 삼각형, 호 등 다양한 기본 도형 함수를 제공합니다. 각 도형은 위치와 크기를 매개변수로 받으며, fill()과 stroke()으로 색을 지정합니다. 색상은 RGB(빨강, 초록, 파랑) 또는 HSB(색상, 채도, 밝기) 모드로 표현할 수 있습니다.
javascript
function setup() {
createCanvas(600, 400);
background(240);
}
function draw() {
background(240);
// ── 채우기와 테두리 설정 ──
fill(66, 135, 245); // RGB 파란색 채우기
stroke(30, 60, 120); // 테두리 색상
strokeWeight(3); // 테두리 두께
// ── 기본 도형들 ──
ellipse(100, 100, 80, 80); // 원: x, y, 너비, 높이
rect(200, 60, 80, 80); // 사각형: x, y, 너비, 높이
line(350, 60, 430, 140); // 선: x1, y1, x2, y2
triangle(500, 60, 460, 140, 540, 140); // 삼각형: x1,y1, x2,y2, x3,y3
// ── 호(arc) ──
fill(245, 166, 66);
arc(100, 280, 80, 80, 0, PI + QUARTER_PI, PIE); // x, y, w, h, 시작각, 끝각, 모드
// ── 채우기/테두리 없이 ──
noFill(); // 채우기 없음 (투명)
stroke(220, 50, 50);
ellipse(250, 280, 80, 80);
noStroke(); // 테두리 없음
fill(50, 200, 100);
rect(350, 240, 80, 80);
}색상 모드: RGB vs HSB
javascript
function setup() {
createCanvas(600, 300);
}
function draw() {
background(0);
// ── RGB 모드 (기본) ──
// colorMode(RGB, 최대R, 최대G, 최대B, 최대Alpha)
colorMode(RGB, 255);
fill(255, 0, 0); // 빨강
rect(20, 20, 50, 50);
fill(0, 255, 0); // 초록
rect(80, 20, 50, 50);
fill(0, 0, 255); // 파랑
rect(140, 20, 50, 50);
fill(255, 200, 0, 150); // 노랑 (반투명)
rect(200, 20, 50, 50);
// ── HSB 모드 — 무지개 색상 만들기에 유리 ──
// colorMode(HSB, 최대Hue, 최대Sat, 최대Bright)
colorMode(HSB, 360, 100, 100);
noStroke();
for (let i = 0; i < 360; i += 10) {
fill(i, 90, 90);
rect(20 + i * 1.5, 150, 15, 80);
}
}- •fill(r, g, b, a) — 도형 안쪽 색상 설정 (a는 투명도, 0~255)
- •stroke(r, g, b) — 도형 테두리 색상 설정
- •strokeWeight(n) — 테두리 두께 (픽셀)
- •noFill() / noStroke() — 채우기 또는 테두리 비활성화
- •colorMode(HSB) — HSB 모드에서 색상(Hue)만 바꾸면 무지개 생성 가능
💡
HSB 컬러 모드는 그라데이션이나 색상 팔레트를 만들 때 매우 편리합니다. Hue(0~360)만 변경하면 빨-주-노-초-파-보 순서로 자연스럽게 색이 바뀝니다.