🌟 p5.js 컬러 Part. 1 : 다양한 모드

p5.js에서는 색을 다루는 방식을 컬러모드(colorMode)로 제어할 수 있습니다.

1. p5.js 기본 색상 정의 방식

🌈 1. RGB : 기본 모드
🌈 2. HSB : Hue, Saturation, Brightness
🌈 3. HSL : Hue, Saturation, Lightness
🌈 4. Grayscale : 회색조
🌈 5. Hex Color : 웹 표준 16진수 컬러 코드
🌈 6. CSS : CSS 표준 컬러 이름 문자열

2. 색을 사용하는 곳 (색상 관련 함수)

• background(color) : 캔버스의 배경색
• fill(color) : 도형을 채우는 색
• stroke(color) : 도형의 윤곽선/선의 색
• noFill() : 도형 채우지 않기
• noStroke() : 도형 윤곽선 그리지 않기
• color(v1, v2, v3, alpha) : 색상 객체를 생성하여 변수에 저장

3. 컬러 모드 설정 : colorMode()

p5.js의 색상 시스템의 핵심은 colorMode() 함수입니다. 이 함수를 사용하여 색상을 해석하는 방식을 지정할 수 있씁니다.

colorMode(mode, [range1], [range2], [range3], [rangeA])

• mode : 사용할 색상 모델을 지정합니다. (RGB, HSB, HSL 중 하나)
• range1~3 : 각 색상 구성요소 (R, G, B 혹은 H, S, B)의 최대값을 지정합니다.
• rangeA : 알파값(투명도)의 최대값을 지정합니다.

범위 변경할 때

• RGB모드의 경우 색상 최대값을 1로 설정하여 0.0에서 1.0 사이의 부동 소수점 값을 사용할 수도 있습니다. 이는 종종 셰이더나 다른 그래픽 API와 연동할 때 편리합니다.

colorMode(RGB, 1.0); // R, G, B의 최대값을 1.0으로 설정

fill(1.0, 0.0, 0.0); // 빨간색
rect(50, 50, 100, 100);

fill(0.0, 0.5, 0.5); // 중간 톤의 청록색
rect(150, 50, 100, 100);

colorMode(RGB, 255); // 원래 255 범위로 복원
fill(0, 0, 255); // 파란색
rect(250, 50, 100, 100);

• 각 채널마다 다른 범위를 설정할 수도 있습니다.

colorMode(RGB, 100, 100, 100, 1);
// R: 0-100, G: 0-100, B: 0-100, Alpha: 0-1
fill(100, 0, 0, 0.5);   // 반투명 빨강
rect(125, 200, 100, 100);

컬러 모드를 변경할 때

• 한 스케치 내에서 여러 컬러 모드를 바꾸어가며 사용할 수도 있습니다.

  // RGB 모드로 그리기
  colorMode(RGB, 255);
  fill(255, 0, 0);
  rect(50, 50, 100, 100);
  
  // HSB 모드로 전환
  colorMode(HSB, 360, 100, 100);
  fill(120, 80, 90);
  rect(200, 50, 100, 100);
  
  // 다시 RGB로 전환
  colorMode(RGB, 255);
  fill(0, 0, 255);
  rect(125, 200, 100, 100);
}

이제부터는 여러 컬러 모드의 사용법에 대한 설명입니다.

A. RGB 모드 🔴🟢🔵

• 설정 : colorMode(RGB, maxR, maxG, maxB, maxA)
• 기본 범위 : colorMode(RGB, 255, 255, 255, 255) 혹은 간단히 colorMode(RGB)

function setup() {
  createCanvas(400, 400);
  
  // RGB 모드 (기본값이므로 별도 표기 안함)
  // 범위: R(0-255), G(0-255), B(0-255)
  fill(255, 0, 0);      // 빨강
  rect(50, 50, 100, 100);
  
  fill(0, 255, 0);      // 초록
  rect(200, 50, 100, 100);
  
  fill(0, 0, 255);      // 파랑
  rect(125, 200, 100, 100);
}

사용 방법

• fill(gray) : 회색 (0~255)
• fill(gray, alpha) : 투명도가 있는 회색
• fill(r, g, b) : RGB 값
• fill(r, g, b, alpha) : 투명도가 있는 RGB

B. HSB 모드 🌈

색상, 채도, 밝기를 사용하여 사람이 색을 인지하는 방식과 유사하게 색을 지정합니다.

• 설정: colorMode(HSB, maxH, maxS, maxB, maxA)
• 기본 범위 : colorMode(HSB, 360, 100, 100, 100)

function setup() {
  createCanvas(400, 400);
  
  // HSB 모드로 변경
  colorMode(HSB);
  // 기본 범위: H(0-360), S(0-100), B(0-100)
  
  fill(0, 100, 100);      // 빨강 (Hue 0도)
  rect(50, 50, 100, 100);
  
  fill(120, 100, 100);    // 초록 (Hue 120도)
  rect(200, 50, 100, 100);
  
  fill(240, 100, 100);    // 파랑 (Hue 240도)
  rect(125, 200, 100, 100);
}

사용 방법

• Hue (색조, H): 0부터 360까지의 각도로 표현 (색상환).
• Saturation (채도, S): 0 (무채색/회색)부터 100 (가장 선명한 색)까지.
• Brightness (밝기, B): 0 (검은색)부터 100 (가장 밝은 색)까지.
• 알파 (투명도): 0 (투명)부터 100 (불투명)까지.

C. HSL 모드 ☀️

HSB와 비슷하지만 밝기 대신 Lightness(명도)를 사용합니다.

• 설정: colorMode(HSL, maxH, maxS, maxL, maxA)
• 기본 범위 : colorMode(HSL, 360, 100, 100, 100)

function setup() {
  createCanvas(400, 400);
  
  // HSL 모드로 변경
  colorMode(HSL);
  // 기본 범위: H(0-360), S(0-100), L(0-100)
  
  fill(0, 100, 50);       // 빨강
  rect(50, 50, 100, 100);
  
  fill(120, 100, 50);     // 초록
  rect(200, 50, 100, 100);
  
  fill(240, 100, 50);     // 파랑
  rect(125, 200, 100, 100);
}

사용 방법

• Hue (색조, H): 0부터 360까지.
• Saturation (채도, S): 0부터 100까지.
• Lightness (명도, L): 0 (검은색)부터 50 (순수한 색상)을 거쳐 100 (흰색)까지.

D. Grayscale 모드

p5.js에서 색상 함수의 인수를 하나만 사용하면 그레이스케일로 해석됩니다.

• 구문: fill(v) 또는 fill(v, alpha)
• 범위: 현재 colorMode()에서 설정된 최대값까지.
  • RGB 모드 : 0부터 255까지.
  • HSB/HSL 모드: 각 모드의 최대 밝기/명도 값에 따라 달라지며, 일반적으로 0부터 100까지입니다.

colorMode(RGB);
fill(0);   // 검은색 (R, G, B 모두 0)
fill(255); // 흰색 (R, G, B 모두 255)
fill(128, 100); // 회색 (밝기 128), 투명도 100

E. Hex Color 사용하기

웹 표준 16진수 컬러 코드를 색상 관련 함수에 직접 사용할 수 있습니다.

function setup() {
  createCanvas(400, 400);
  
  // Hex 컬러 (# 포함 또는 제외 모두 가능)
  fill('#FF0000');        // 빨강
  rect(50, 50, 100, 100);
  
  fill('#00FF00');        // 초록
  rect(200, 50, 100, 100);
  
  fill('0000FF');         // 파랑 (# 없이도 가능)
  rect(125, 200, 100, 100);
  
  // 투명도 포함 (8자리 hex)
  fill('#FF000080');      // 반투명 빨강
  rect(275, 200, 100, 100);
}

F. CSS 컬러 네임 사용하기

CSS 표준 컬러 이름을 문자열로 사용할 수 있습니다.

function setup() {
  createCanvas(400, 400);
  
  fill('red');
  rect(50, 50, 100, 100);
  
  fill('coral');
  rect(200, 50, 100, 100);
  
  fill('dodgerblue');
  rect(125, 200, 100, 100);
}