P5.js는 자바스크립트를 기반으로 한 HTML5 그래픽 라이브러리로, 그래픽을 다루는 다양한 기능을 제공합니다. P5.js를 사용하여 픽셀 조작을 처리하는 방법은 간단하지만 다소 복잡할 수 있습니다.

먼저, 픽셀 조작을 위해 P5.js에서 제공하는 loadImage() 함수를 사용하여 이미지를 불러옵니다. 예를 들어, 다음과 같이 이미지를 불러올 수 있습니다.

let img;

function preload() {
  img = loadImage('image.jpg');
}

이제 이미지를 화면에 보여주기 위해 setup() 함수를 사용합니다.

function setup() {
  createCanvas(img.width, img.height);
  image(img, 0, 0);
}

이제 픽셀 조작을 하기 위해 loadPixels() 함수를 사용하여 픽셀 데이터를 로드하고, updatePixels() 함수를 사용하여 변경 내용을 업데이트합니다. 이렇게 픽셀 데이터를 배열로 로드하고 조작할 수 있습니다.

function draw() {
  loadPixels();

  // 픽셀 조작 코드 작성

  updatePixels();
}

픽셀 데이터는 배열로 제공되며, 각 픽셀은 네 개의 숫자로 이루어진 배열로 표현됩니다. 예를 들어, RGB 이미지의 경우 픽셀은 [R, G, B, A] 형태로 표현됩니다. 따라서 특정 픽셀의 색상을 변경하려면 해당 픽셀의 인덱스에 접근하여 값을 변경하면 됩니다.

function draw() {
  loadPixels();

  for (let x = 0; x < width; x++) {
    for (let y = 0; y < height; y++) {
      let index = (x + y * width) * 4;
      // 픽셀 조작 코드 작성
      pixels[index] = redValue;
      pixels[index + 1] = greenValue;
      pixels[index + 2] = blueValue;
      pixels[index + 3] = alphaValue;
    }
  }

  updatePixels();
}

위의 코드에서 redValue, greenValue, blueValue, alphaValue에 각각 적당한 값을 할당하여 픽셀의 색상을 변경할 수 있습니다.

픽셀 조작 외에도 P5.js에서는 다양한 그래픽 효과와 필터링 기능을 제공하여 픽셀을 조작하고 이미지를 편집할 수 있습니다. P5.js의 공식 문서를 참조하여 더 자세한 기능과 사용법을 확인할 수 있습니다.

참고 문서:

• P5.js 공식 문서