P5.js에서 맞춤 색상 팔레트 구현하기

P5.js는 JavaScript 기반의 창작용 그래픽 라이브러리로, 다양한 그림과 애니메이션을 만들 수 있습니다. 이번에는 P5.js를 사용하여 맞춤 색상 팔레트를 구현하는 방법을 알아보겠습니다.

1. setup() 함수 내에서 color 설정

P5.js에서는 setup() 함수를 사용하여 초기 설정을 할 수 있습니다. createCanvas() 함수로 그림판 크기를 설정한 후, background() 함수로 배경 색상을 지정할 수 있습니다. 이때 첫 번째 인자로 색상 값을 RGB 형식으로 입력합니다.

function setup() {
  createCanvas(400, 400);
  background(220);
}

2. draw() 함수 내에서 custom color palette 생성

draw() 함수는 프로그램이 실행되면 계속해서 반복 호출되는 함수입니다. 이 함수 내에서 맞춤 색상 팔레트를 생성할 수 있습니다. fill() 함수를 사용하여 도형 내부의 색상을 설정하고, 첫 번째 인자에 R, G, B 값을 지정합니다. 이때 각 값은 0부터 255까지의 범위 내에서 설정할 수 있습니다.

function draw() {
  // 맞춤 색상 팔레트 생성
  let customColor = color(255, 0, 0); // 빨간색
  fill(customColor);
  rect(100, 100, 200, 200);
}

3. RGBA 값을 사용하여 투명도 설정하기

P5.js에서는 RGBA 값을 사용하여 색상의 투명도를 설정할 수 있습니다. color() 함수에서 4번째 인자로 알파 값을 설정하면 됩니다. 알파 값은 0부터 255까지의 범위 내에서 설정할 수 있으며, 값이 클수록 불투명해집니다.

function draw() {
  // 맞춤 색상 팔레트 생성
  let customColor = color(255, 0, 0, 127); // 반투명한 빨간색
  fill(customColor);
  rect(100, 100, 200, 200);
}

이와 같이 P5.js를 사용하여 맞춤 색상 팔레트를 구현할 수 있습니다. 자세한 내용은 P5.js 공식 문서를 참고하시기 바랍니다.

참고 자료:

• P5.js 공식 웹사이트
• P5.js 레퍼런스 문서