핵심 개념 1 — RGB 색상 모드

빛의 삼원색 — 가산혼합

컴퓨터 화면은 빨강(Red), 초록(Green), 파랑(Blue) 세 가지 빛을 섞어서 모든 색을 만듭니다. 이것을 RGB라고 합니다.

미술 시간에 배운 삼원색은 빨강·노랑·파랑이었습니다. 그건 물감의 삼원색(감산혼합)입니다. 물감은 섞을수록 빛을 흡수해서 어두워집니다. 빨강+노랑+파랑을 다 섞으면 거무튀튀한 갈색이 됩니다. 반면 컴퓨터 화면은 빛입니다. 빛은 섞을수록 밝아지는 가산혼합입니다.

왜 0~255일까?

컴퓨터는 모든 정보를 0과 1로 저장합니다. 8자리의 0/1(= 8비트 = 1바이트)로 표현할 수 있는 숫자가 0부터 255까지, 총 256가지입니다. 하나의 색상 채널에 1바이트씩 배정한 것입니다. 깊이 이해할 필요는 없습니다. 기억할 건 하나 — 0이 최소, 255가 최대.

fill(r, g, b) 기본 문법

각 색상 채널은 0~255 범위이고, fill(빨강, 초록, 파랑) 순서로 넣습니다.

function setup() {
  createCanvas(400, 400);
  background(240);
  noStroke();

  // 빨강
  fill(255, 0, 0);
  ellipse(100, 200, 80, 80);

  // 초록
  fill(0, 255, 0);
  ellipse(200, 200, 80, 80);

  // 파랑
  fill(0, 0, 255);
  ellipse(300, 200, 80, 80);
}

첫 번째 숫자가 빨강, 두 번째가 초록, 세 번째가 파랑입니다. 순서를 외우세요 — R-G-B.

색 혼합 예시

function setup() {
  createCanvas(400, 400);
  background(240);
  noStroke();

  // 빨강 + 초록 = 노랑
  fill(255, 255, 0);
  ellipse(80, 100, 70, 70);

  // 빨강 + 파랑 = 보라
  fill(255, 0, 255);
  ellipse(180, 100, 70, 70);

  // 초록 + 파랑 = 청록
  fill(0, 255, 255);
  ellipse(280, 100, 70, 70);

  // 전부 0 = 검정
  fill(0, 0, 0);
  ellipse(130, 250, 70, 70);

  // 전부 255 = 흰색
  fill(255, 255, 255);
  stroke(200);
  ellipse(230, 250, 70, 70);
  noStroke();  // 테두리 설정 복원
}

흰색 원은 배경과 구분되지 않아서 테두리를 넣었습니다. 모든 값이 255면 흰색, 모든 값이 0이면 검정입니다.

stroke()와 background()에도 동일 적용

fill()만 색을 바꿀 수 있는 게 아닙니다. stroke()와 background()도 똑같이 RGB를 받습니다.

function setup() {
  createCanvas(400, 400);
  background(30, 30, 80);  // 어두운 남색 배경

  // 테두리 색도 RGB로 지정
  stroke(255, 255, 0);     // 노란색 테두리
  strokeWeight(4);         // 테두리 두께
  fill(100, 200, 255);     // 하늘색 채우기
  ellipse(200, 200, 150, 150);
}

채우기, 테두리, 배경 세 가지 모두 RGB로 제어할 수 있습니다.

fill() 인자 개수 정리

stroke()와 background()도 똑같은 규칙입니다. 인자 수에 따라 동작이 달라집니다.

구글 Color Picker

원하는 색의 RGB 값은 외울 필요가 없습니다.

1. 구글에서 “color picker” 검색
2. 색상 선택기에서 원하는 색 클릭
3. RGB 값 확인 → 코드에 fill(R, G, B) 형태로 복사

전문 디자이너도 이렇게 합니다. 색상값이 필요할 때 이 도구를 쓰세요.

핵심 개념 2 — 투명도 (alpha)

alpha란?

RGB 뒤에 네 번째 숫자를 추가하면 투명도(alpha)를 조절할 수 있습니다. fill(255, 0, 0, 128)은 반투명한 빨강입니다.

alpha를 안 쓰면 기본값이 255입니다. 지금까지 fill(255, 0, 0)이라 쓴 건 사실 fill(255, 0, 0, 255)와 같았습니다.

반투명 원 겹치기

반투명 도형을 겹치면 빛이 섞이는 효과를 만들 수 있습니다.

function setup() {
  createCanvas(400, 400);
  background(240);
  noStroke();

  // 반투명 빨강
  fill(255, 0, 0, 100);
  ellipse(170, 180, 160, 160);

  // 반투명 초록
  fill(0, 255, 0, 100);
  ellipse(230, 180, 160, 160);

  // 반투명 파랑
  fill(0, 0, 255, 100);
  ellipse(200, 240, 160, 160);
}

세 원이 겹치는 가운데 부분을 보세요. 빨+초+파가 섞여서 밝은 색이 됩니다. 빛이니까 섞을수록 밝아지는 가산혼합입니다. alpha 값을 100 대신 50이나 200으로 바꾸면 겹치는 부분의 색이 달라집니다.

stroke()에도 alpha 적용

fill()뿐만 아니라 stroke()에도 alpha를 넣을 수 있습니다.

function setup() {
  createCanvas(400, 400);
  background(240);
  noFill();
  strokeWeight(6);

  // 반투명 테두리 원 여러 개 겹치기
  stroke(255, 0, 0, 80);
  ellipse(150, 200, 200, 200);

  stroke(0, 0, 255, 80);
  ellipse(250, 200, 200, 200);

  stroke(0, 180, 0, 80);
  ellipse(200, 140, 200, 200);
}

noFill()로 채우기를 없애고 테두리만 남기면, 선만으로 색이 섞이는 효과를 만들 수 있습니다. 올림픽 로고 같은 느낌입니다.

2주차 잔상 효과의 원리

2주차에서 background(255, 220, 180, 30)을 쓰면 잔상이 남았습니다. background()에 alpha를 넣으면, 매 프레임마다 반투명한 배경을 덮는 방식입니다. 완전히 지우는 게 아니라 살짝만 덮으니까, 이전 프레임의 그림이 서서히 사라집니다.

핵심 개념 3 — HSB 색상 모드

RGB의 한계

RGB로 하늘색 fill(0, 100, 255)를 만들었다고 합시다. 이 색을 좀 더 어둡게 만들려면 세 숫자를 각각 얼마나 줄여야 할까요? 감이 잘 오지 않습니다. 파스텔 톤으로 바꾸려면 R을 올릴지 G를 올릴지도 막막합니다.

HSB 색상 모드는 이 문제를 해결합니다. ‘어둡게 하고 싶으면 밝기 숫자 하나만 줄이면 된다’ — 이렇게 직관적으로 색을 다룰 수 있습니다.

colorMode(HSB) 선언

HSB를 쓰려면 setup() 안에 한 줄만 추가합니다.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 255);  //  HSB 모드 전환
}

이 한 줄 이후로 fill(), stroke(), background()가 전부 HSB 기준으로 동작합니다. 숫자 네 개는 순서대로 H 범위(360), S 범위(100), B 범위(100), alpha 범위(255)입니다. 마지막 255를 넣어야 투명도가 RGB와 똑같이 0~255로 동작합니다.

H, S, B 각각의 의미

HSB는 색상환(Color Wheel)을 기반으로 합니다. 모든 색을 원형으로 배치한 것으로, 빨강에서 시작해 주황·노랑·초록·파랑·보라를 거쳐 다시 빨강으로 돌아옵니다.

H (Hue, 색상) — 0~360

색상환을 시계처럼 생각하세요. 0도부터 한 바퀴(360도) 돌면 원래 색으로 돌아옵니다.

색상환의 구간별 분위기도 알아두면 좋습니다.

작품의 분위기를 정할 때 H 구간을 먼저 정하면 컬러 톤이 자연스럽게 잡힙니다.

S (Saturation, 채도) — 0~100

채도는 색이 얼마나 선명한지입니다. 100이면 원색 그대로, 0이면 색이 빠져서 회색입니다. 파스텔 톤을 만들고 싶으면 S를 낮춥니다. H는 그대로 두고 S만 바꾸면 같은 색 계열에서 톤만 달라집니다.

B (Brightness, 밝기) — 0~100

밝기는 밝고 어두운 정도입니다. 100이면 밝고, 0이면 항상 검정입니다. 어두운 분위기를 만들고 싶으면 B를 낮춥니다.

미술 용어와의 연결

미술에서 배운 개념이 HSB에서는 숫자 하나 바꾸는 것으로 그대로 옮겨옵니다.

HSB 색상 비교

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 255);
  background(0, 0, 100);  // 흰 배경 (HSB에서 B=100)
  noStroke();

  // 같은 빨강, 채도만 다르게
  fill(0, 100, 100);  // 선명한 빨강
  ellipse(80, 100, 70, 70);

  fill(0, 60, 100);   // 중간 채도 빨강
  ellipse(170, 100, 70, 70);

  fill(0, 30, 100);   // 파스텔 빨강 (연분홍)
  ellipse(260, 100, 70, 70);

  // 같은 파랑, 밝기만 다르게
  fill(240, 100, 100);  // 밝은 파랑
  ellipse(80, 250, 70, 70);

  fill(240, 100, 60);   // 중간 파랑
  ellipse(170, 250, 70, 70);

  fill(240, 100, 30);   // 어두운 파랑 (남색)
  ellipse(260, 250, 70, 70);
}

위 줄은 빨강의 채도만, 아래 줄은 파랑의 밝기만 바꾼 것입니다. RGB로 하려면 세 숫자를 다 건드려야 하는데, HSB는 한 숫자만 바꾸면 됩니다.

HSB의 실용: 색상 팔레트 만들기

HSB의 핵심 장점은 같은 색 계열의 팔레트를 쉽게 만들 수 있다는 것입니다. H를 고정하고 S나 B만 바꾸면 됩니다.

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100, 255);
  background(0, 0, 100);
  noStroke();

  // H=200(하늘색 계열)을 고정하고 S와 B 조합
  fill(200, 100, 100);  // 선명하고 밝은
  rect(20, 50, 70, 70);

  fill(200, 60, 100);   // 파스텔 밝은
  rect(110, 50, 70, 70);

  fill(200, 100, 60);   // 선명하고 어두운
  rect(200, 50, 70, 70);

  fill(200, 40, 80);    // 부드럽고 중간
  rect(290, 50, 70, 70);
}

H=200 하나만 고정했는데 네 가지 다른 톤이 나옵니다. RGB로는 이 규칙성이 보이지 않습니다.

RGB vs HSB

HSB가 항상 좋은 건 아닙니다. 정확한 색이 정해져 있을 때(브랜드 색상 등)는 RGB가 낫고, 색을 규칙적으로 변화시킬 때는 HSB가 훨씬 편합니다. 2교시에서 for 반복문을 배우면 H 값을 0~360으로 변화시켜 무지개를 코드 한 줄로 만들 수 있습니다.