P5.js는 효과적인 빛과 광원 효과를 구현하기 위한 강력한 기능을 제공합니다. 이를 위해 두 가지 주요 요소를 이해해야 합니다: 조명 모델과 광원 객체.

1. 조명 모델 이해하기: P5.js에서는 기본적으로 Phong 조명 모델을 사용합니다. 이 모델은 물체의 표면에 도달하는 빛의 세기를 계산하여 물체를 더 생동감 있게 만듭니다. 조명 모델은 세 가지 요소로 구성됩니다: 주광원(ambient light), 방향성 광원(directional light) 및 점광원(point light).
   • 주광원: 주변에 퍼져 있는 일반적인 밝기, 빛의 색상이 없으며 모든 방향에서 동일하게 적용됩니다.
   • 방향성 광원: 특정 방향에서 비추는 광원으로, 위치가 없고 방향, 색상, 강도를 가지고 있습니다.
   • 점광원: 특정 위치에서 모든 방향으로 동일하게 비추는 광원으로, 위치, 색상, 강도를 가지고 있습니다.
2. 광원 객체 생성하기: 광원 객체를 생성하여 빛을 추가할 수 있습니다. 예를 들어, 방향성 광원을 추가하는 방법은 다음과 같습니다.

let light;

function setup() {
  createCanvas(400, 400, WEBGL);

  light = createVector(0, 0, 1); // 광원의 방향을 정의합니다.
  light.normalize(); // 벡터의 크기를 1로 정규화합니다.
  light.mult(-1); // 광원의 방향을 역으로 설정합니다.

  ambientLight(50); // 주광원의 밝기를 설정합니다. (0-255 범위)

  directionalLight(255, 255, 255, light); // 방향성 광원의 색상 및 방향을 설정합니다.
}

function draw() {
  background(220);

  rotateX(frameCount * 0.01);
  rotateY(frameCount * 0.01);
  box(100);
}

위의 코드에서는 createVector로 방향성 광원의 방향을 생성하고, normalize로 벡터를 정규화하여 크기를 조정하고, mult로 방향을 역으로 설정합니다. ambientLight로 주광원을 설정하고, directionalLight로 방향성 광원을 설정합니다.

이제 실행하면 회전하는 상자 위에 조명 효과가 적용된 것을 볼 수 있습니다.

P5.js는 더 많은 조명 관련 기능을 제공하므로, 필요에 따라 문서를 확인하시기 바랍니다.