🌟 p5.js 컬러 Part. 2 : color() 객체

p5.js에서는 컬러를 지정하고, 객체에 저장하여 사용하면 코드를 더 깔끔하게 관리할 수 있습니다.
Color 객체는 반복해서 생성하는 것보다 미리 만들어서 재사용하는 것이 효율적입니다.

1. p5.Color( color() ) 객체 — 생성과 내부 구조

• color() 함수는 p5.Color 객체를 만듭니다. 기본 해석은 RGB(0~255)이며 colorMode()에 따라 해석 방식이 바뀝니다. p5.js 공식문서

function setup() {
  createCanvas(400, 400);
  
  // Color 객체 생성
  let c1 = color(255, 0, 0);
  let c2 = color(0, 255, 0);
  let c3 = color('#0000FF');
  
  fill(c1);
  rect(50, 50, 100, 100);
  
  fill(c2);
  rect(200, 50, 100, 100);
  
  fill(c3);
  rect(125, 200, 100, 100);
  
  // Color 객체에서 값 추출
  let r = red(c1);        // 255
  let g = green(c2);      // 255
  let b = blue(c3);       // 255
}

• 중요: p5.Color 객체는 생성될 때 적용되던 color mode와 각 채널의 최대값(max)을 내부에 저장합니다. 즉, 나중에 다른 mode로 바꿔도 이 객체가 생성될 때의 해석 정보가 유지됩니다.

colorMode(RGB, 255);          // 기본
let c1 = color(255, 0, 0);    // 빨강 (RGB 기준)

colorMode(HSB, 360, 100, 100);
let c2 = color(180, 50, 100); // HSB 해석으로 만들어진 p5.Color

2. p5.Color의 읽기/쓰기 유틸

• 컴포넌트 읽기: red(c), green(c), blue(c), alpha(c), hue(c), saturation(c), brightness(c) 등 함수를 통해서 얻습니다. 이들 함수는 현재의 colorMode 또는 색 객체가 저장한 모드에 따라 반환값의 범위가 달라질 수 있습니다.

• 객체 내부 배열: c.levels → [r,g,b,a]형태로 접근 가능하며 범위는 생성시의 mode와max 값에 따릅니다.

• 투명도 변경: c.setAlpha(value)를 사용하며 값의 범위는 colorMode에 의존합니다.

let c = color(200, 100, 50); // 생성시의 mode에 따라 해석
console.log(c.levels);      // e.g. [200,100,50,255] (생성시 설정에 따라 다름)
c.setAlpha(128);            // 알파 조정
let h = hue(c);             // hue 값 얻기 (HSB 기준)