🌟 p5.js 컬러 Part. 3 : 색상 보간과 Lerp

p5.js를 포함한 대부분의 그래픽 프레임워크에서 사용하는 색상 보간(Color Interpolation), 특히 Lerp (Linear Interpolation)에 대한 설명입니다.

---

1. 선형 보간(Linear Interpolation, Lerp)의 개념

Lerp는 가장 일반적인 형태의 보간으로, 두 값 A와 B 사이를 직선적으로 연결하는 중간값 V를 찾는 수학적 방법입니다.

📐 Lerp의 수학적 공식

Lerp 함수는 다음과 같이 정의됩니다:

$V = A + (B - A) × t$

• $V$ : 결과 값
• $A$ : 시작 값 (Start Value)
• $B$ : 끝 값 (End Value)
• $t$ : 보간 계수 (Interpolation Factor), 0.0에서 1.0 사이의 값

$t$ 값에 따른 결과:

t 값	결과 V	의미
0.0	A	시작 값과 동일
0.25	A + (B-A)×0.25	시작점에서 25% 지점
0.5	(A+B)/2	정확히 중간
0.75	A + (B-A)×0.75	끝점에서 25% 전
1.0	B	끝 값과 동일

A와 B의 비율이 t에 따라 달라지는 원리는 이렇게 이해하면 됩니다.

• t=0일 때: 100% A, 0% B
• t=0.3일 때: 70% A, 30% B
• t=0.5일 때: 50% A, 50% B
• t=1일 때: 0% A, 100% B

실제 코드에서 숫자만 가지고 Lerp를 이해해봅시다. 시작이 10이고 끝이 100인 범위를 보간하는 예시입니다.

// 숫자 Lerp 예제
function setup() {
  let start = 10;
  let end = 100;
  
  // t=0.0 → 10
  console.log(lerp(start, end, 0.0));   // 10
  
  // t=0.5 → 55 (중간값)
  console.log(lerp(start, end, 0.5));   // 55
  
  // t=1.0 → 100
  console.log(lerp(start, end, 1.0));   // 100
}

---

2. p5.js에서의 색상 Lerp

p5.js에서는 lerpColor() 함수를 사용하여 색상을 보간합니다. 이 함수는 내부적으로 색상의 각 채널(R, G, B, A 등)에 대해 개별적으로 선형 보간을 수행합니다.

⚙️ lerpColor() 함수 구문

lerpColor(c1, c2, amt)

파라미터:

• c1: 시작 색상 (p5.Color 객체)
• c2: 끝 색상 (p5.Color 객체)
• amt: 보간 계수 t (0.0에서 1.0 사이의 float 값)

반환값:

• 보간된 중간 색상 (p5.Color 객체)

📝 색상 보간의 작동 원리

색상 보간은 선택된 색상 모드(RGB, HSB 등)의 각 채널에 대해 독립적으로 Lerp 공식을 적용합니다.

RGB 모드에서 색상 C₁ = (R₁, G₁, B₁)과 C₂ = (R₂, G₂, B₂)를 t만큼 보간하면:

R_lerp = R₁ + (R₂ - R₁) × t
G_lerp = G₁ + (G₂ - G₁) × t
B_lerp = B₁ + (B₂ - B₁) × t

빨강(255, 0, 0)과 파랑(0, 0, 255)을 t=0.5로 보간하는 과정을 계산해보면,

• R: 255 + (0 - 255) × 0.5 = 127.5
• G: 0 + (0 - 0) × 0.5 = 0
• B: 0 + (255 - 0) × 0.5 = 127.5
• 결과: (127.5, 0, 127.5) → 보라색

이렇게 계산되는 것을 볼 수 있습니다.

---

3. 기본 사용 예제

예제 1: 마우스 위치로 색상 보간하기

let colorA, colorB;

function setup() {
  createCanvas(400, 200);
  
  // 색상 객체 생성
  colorMode(RGB);
  colorA = color(255, 0, 0);    // 빨간색
  colorB = color(0, 0, 255);    // 파란색
  
  noStroke();
}

function draw() {
  // 마우스 X 좌표를 0.0~1.0 사이의 t 값으로 매핑
  let t = map(mouseX, 0, width, 0.0, 1.0, true);
  // true는 값을 0.0~1.0 사이로 클램프(제한)

  // 두 색상을 t만큼 보간
  let interpolatedColor = lerpColor(colorA, colorB, t);

  // 보간된 색상으로 배경 채우기
  background(interpolatedColor);

  // 정보 표시
  fill(255);
  textAlign(CENTER, CENTER);
  textSize(16);
  text("마우스를 좌우로 움직여 보세요", width / 2, height / 2 - 20);
  text("t = " + t.toFixed(2), width / 2, height / 2 + 10);
}

예제 2: 애니메이션으로 색상 순환하기

let colorA, colorB;
let t = 0;

function setup() {
  createCanvas(400, 200);
  
  colorA = color(255, 100, 0);   // 주황색
  colorB = color(100, 0, 255);   // 보라색
  
  noStroke();
}

function draw() {
  // sin 함수를 사용해 t를 0~1 사이에서 왕복
  t = (sin(frameCount * 0.02) + 1) / 2;
  
  let c = lerpColor(colorA, colorB, t);
  background(c);
  
  fill(255);
  textAlign(CENTER, CENTER);
  text("t = " + t.toFixed(2), width / 2, height / 2);
}

---

4. 색상 보간 모드의 중요성 (RGB vs HSB)

Lerp는 선형적이지만, 인간의 눈은 색상을 선형적으로 인지하지 않습니다. 어떤 색상 모드에서 보간하느냐에 따라 중간색이 매우 다르게 나타납니다.

A. RGB 보간의 특징 (직선 경로)

RGB 공간에서 Lerp는 3차원 큐브 내부를 가장 직선으로 이동합니다.

장점:

• 계산이 간단하고 빠름
• 예측 가능한 결과

단점:

• 보간 과정에서 '칙칙한(muddy)' 또는 '회색빛'이 도는 중간색 생성 가능
• 특히 보색(Complementary Colors) 사이를 보간할 때 채도가 낮은 중간색이 나오기 쉬움
• 두 색상의 빛이 서로 상쇄되는 효과

function setup() {
  createCanvas(600, 200);
  
  colorMode(RGB);
  let red = color(255, 0, 0);
  let green = color(0, 255, 0);
  
  // RGB 보간 - 칙칙한 중간색
  for (let i = 0; i < width; i++) {
    let t = i / width;
    let c = lerpColor(red, green, t);
    stroke(c);
    line(i, 0, i, height);
  }
  
  fill(255);
  noStroke();
  textAlign(CENTER);
  text("RGB 보간: 중간에 회색빛이 도는 색", width/2, height/2);
}

B. HSB/HSL 보간의 특징 (색상환 경로)

HSB 또는 HSL 공간에서 보간을 수행하면 색조(Hue)는 색상환을 따라 이동하고, 채도(Saturation)와 밝기(Brightness)는 독립적으로 변해요.

장점:

• 사람이 인지하기에 더 자연스럽고 생동감 있는 색상 변화
• 중간색의 채도를 높게 유지
• 무지개 그라디언트 같은 자연스러운 전환

주의사항:

• 두 색상 사이의 거리가 180도 이상일 경우, 색상환을 돌아가는 방향(시계 방향 또는 반시계 방향)을 고려해야 함

function setup() {
  createCanvas(600, 200);
  
  colorMode(HSB, 360, 100, 100);
  let red = color(0, 100, 100);      // Hue 0
  let green = color(120, 100, 100);  // Hue 120
  
  // HSB 보간 - 선명한 중간색
  for (let i = 0; i < width; i++) {
    let t = i / width;
    let c = lerpColor(red, green, t);
    stroke(c);
    line(i, 0, i, height);
  }
  
  fill(255);
  noStroke();
  textAlign(CENTER);
  text("HSB 보간: 생동감 있는 색상 전환", width/2, height/2);
}

---

5. 실전 활용 예제

예제 1: 다중 색상 그라디언트

function setup() {
  createCanvas(600, 200);
  
  colorMode(HSB, 360, 100, 100);
  
  // 여러 색상 정의
  let colors = [
    color(0, 100, 100),      // 빨강
    color(60, 100, 100),     // 노랑
    color(120, 100, 100),    // 초록
    color(240, 100, 100),    // 파랑
    color(300, 100, 100)     // 자홍
  ];
  
  noStroke();
  
  let segmentWidth = width / (colors.length - 1);
  
  for (let i = 0; i < width; i++) {
    // 현재 위치가 어느 구간에 속하는지 계산
    let segment = floor(i / segmentWidth);
    let t = (i % segmentWidth) / segmentWidth;
    
    // 마지막 구간 처리
    if (segment >= colors.length - 1) {
      segment = colors.length - 2;
      t = 1;
    }
    
    let c = lerpColor(colors[segment], colors[segment + 1], t);
    stroke(c);
    line(i, 0, i, height);
  }
}

예제 2: 원형 색상 그라디언트

function setup() {
  createCanvas(400, 400);
  
  colorMode(HSB, 360, 100, 100);
  
  let centerColor = color(200, 80, 100);  // 중심: 파란색
  let edgeColor = color(0, 100, 50);      // 가장자리: 어두운 빨강
  
  noStroke();
  
  let maxDist = dist(0, 0, width/2, height/2);
  
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      // 중심으로부터의 거리 계산
      let d = dist(x, y, width/2, height/2);
      let t = d / maxDist;
      t = constrain(t, 0, 1);  // 0~1로 제한
      
      let c = lerpColor(centerColor, edgeColor, t);
      stroke(c);
      point(x, y);
    }
  }
}

예제 3: 시간 기반 색상 변화

function setup() {
  createCanvas(600, 400);
  noStroke();
}

function draw() {
  colorMode(HSB, 360, 100, 100);
  
  // 시간을 시뮬레이션 (0~1, 하루를 표현)
  let timeOfDay = (frameCount * 0.005) % 1;
  
  let dawn = color(30, 70, 60);      // 새벽: 주황빛
  let day = color(200, 60, 90);      // 낮: 밝은 하늘색
  let dusk = color(15, 80, 50);      // 저녁: 붉은빛
  let night = color(240, 70, 20);    // 밤: 어두운 파랑
  
  let skyColor;
  
  if (timeOfDay < 0.25) {
    // 새벽 → 낮
    let t = timeOfDay * 4;
    skyColor = lerpColor(dawn, day, t);
  } else if (timeOfDay < 0.5) {
    // 낮 → 저녁
    let t = (timeOfDay - 0.25) * 4;
    skyColor = lerpColor(day, dusk, t);
  } else if (timeOfDay < 0.75) {
    // 저녁 → 밤
    let t = (timeOfDay - 0.5) * 4;
    skyColor = lerpColor(dusk, night, t);
  } else {
    // 밤 → 새벽
    let t = (timeOfDay - 0.75) * 4;
    skyColor = lerpColor(night, dawn, t);
  }
  
  background(skyColor);
  
  // 정보 표시
  colorMode(RGB);
  fill(255);
  textSize(50);
  textAlign(CENTER);
  text("시간: " + (timeOfDay * 24).toFixed(1) + "시", width/2, height/2);
}

예제 4: 인터랙티브 팔레트 생성기

let baseColor;
let numColors = 5;

function setup() {
  createCanvas(600, 400);
  colorMode(HSB, 360, 100, 100);
  
  baseColor = color(random(360), 80, 90);
  noStroke();
}

function draw() {
  background(220);
  
  // 보색 계산
  let hue = hue(baseColor);
  let complementaryColor = color((hue + 180) % 360, 80, 90);
  
  // 색상 팔레트 그리기
  let boxWidth = width / numColors;
  
  for (let i = 0; i < numColors; i++) {
    let t = i / (numColors - 1);
    let c = lerpColor(baseColor, complementaryColor, t);
    
    fill(c);
    rect(i * boxWidth, 0, boxWidth, height * 0.7);
    
    // 색상 정보 표시
    fill(0);
    textAlign(CENTER);
    textSize(12);
    text("t=" + t.toFixed(2), i * boxWidth + boxWidth/2, height * 0.75);
    text("H=" + hue(c).toFixed(0), i * boxWidth + boxWidth/2, height * 0.8);
  }
  
  // 안내 텍스트
  fill(0);
  textSize(16);
  textAlign(CENTER);
  text("클릭하여 새로운 색상 팔레트 생성", width/2, height * 0.95);
}

function mousePressed() {
  baseColor = color(random(360), 80, 90);
}

6. 고급 기법

A. easing 함수와 결합하기

선형 보간 대신 easing 함수를 적용하면 더욱 자연스러운 색상 변화를 만들 수 있습니다.

function setup() {
  createCanvas(600, 200);
  colorMode(HSB, 360, 100, 100);
  noStroke();
}

function draw() {
  let c1 = color(0, 100, 100);
  let c2 = color(240, 100, 100);
  
  for (let i = 0; i < width; i++) {
    let t = i / width;
    
    // easeInOut 적용
    let easedT = t < 0.5 
      ? 2 * t * t 
      : 1 - pow(-2 * t + 2, 2) / 2;
    
    let c = lerpColor(c1, c2, easedT);
    stroke(c);
    line(i, 0, i, height);
  }
}

B. 다중 채널 독립 제어

function setup() {
  createCanvas(400, 400);
  colorMode(HSB, 360, 100, 100);
  
  let h1 = 0, s1 = 100, b1 = 100;
  let h2 = 240, s2 = 50, b2 = 80;
  
  for (let y = 0; y < height; y++) {
    for (let x = 0; x < width; x++) {
      let tX = x / width;
      let tY = y / height;
      
      // X축: Hue 변화, Y축: Saturation 변화
      let h = lerp(h1, h2, tX);
      let s = lerp(s1, s2, tY);
      let b = b1;  // 밝기는 고정
      
      stroke(h, s, b);
      point(x, y);
    }
  }
}

7. 성능 최적화 팁

A. Color 객체 재사용

반복문에서 매번 lerpColor()를 호출하는 대신, 가능하면 미리 계산된 색상 배열을 사용하세요.

// 비효율적
function draw() {
  for (let i = 0; i < 1000; i++) {
    let c = lerpColor(colorA, colorB, random());
    // ...
  }
}

// 효율적
let colorPalette = [];
function setup() {
  for (let i = 0; i < 100; i++) {
    colorPalette[i] = lerpColor(colorA, colorB, i / 100);
  }
}

function draw() {
  for (let i = 0; i < 1000; i++) {
    let c = colorPalette[floor(random(100))];
    // ...
  }
}

B.픽셀 단위 그라디언트는 createGraphics() 사용

복잡한 그라디언트는 한 번만 그린 후 이미지로 재사용하는 것이 좋습니다.

let gradient;

function setup() {
  createCanvas(400, 400);
  
  // 그라디언트를 한 번만 생성
  gradient = createGraphics(width, height);
  gradient.colorMode(HSB, 360, 100, 100);
  
  for (let i = 0; i < width; i++) {
    let t = i / width;
    let c = lerpColor(color(0, 100, 100), color(240, 100, 100), t);
    gradient.stroke(c);
    gradient.line(i, 0, i, height);
  }
}

function draw() {
  // 미리 만든 그라디언트 사용
  image(gradient, 0, 0);
  
  // 다른 그리기 작업...
}

---

8. 정리

RGB 보간을 사용하는 경우:

• 비슷한 색조의 색상 간 보간
• 밝기나 투명도만 변경
• 빠른 계산이 필요한 경우

HSB/HSL 보간을 사용하는 경우:

• 무지개 그라디언트
• 자연스러운 색상 전환
• UI/UX 디자인의 부드러운 색상 변화
• 예술적이고 생동감 있는 표현

1. Lerp는 선형 보간: V = A + (B - A) × t
2. lerpColor()는 각 채널을 독립적으로 보간: RGB의 경우 R, G, B 각각 Lerp 적용
3. 색상 모드가 결과에 큰 영향: RGB는 직선 경로, HSB는 색상환 경로
4. 자연스러운 색상 전환에는 HSB 추천: 중간색의 채도와 생동감 유지
5. 성능 고려: 반복 계산보다는 미리 계산된 팔레트 활용

---