[javascript] P5.js에서 이미지 프로세싱을 어떻게 진행하나요?

04 Dec 2023

P5.js는 JavaScript를 기반으로 한 강력한 그래픽 라이브러리입니다. P5.js를 사용하여 이미지 프로세싱을 수행하는 방법은 다음과 같습니다.

이미지 불러오기: P5.js에서 이미지를 불러오려면 loadImage() 함수를 사용합니다. 예를 들어, 다음 코드는 assets 폴더에 있는 image.jpg 이미지를 불러옵니다.

let img;

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

이미지 표시: 불러온 이미지를 화면에 표시하려면 image() 함수를 사용합니다. 예를 들어, 다음 코드는 img 변수에 저장된 이미지를 (0, 0) 위치에 표시합니다.

function setup() {
  createCanvas(400, 400);
  image(img, 0, 0);
}

이미지 필터링: P5.js의 그래픽 함수를 사용하여 이미지를 필터링할 수 있습니다. 예를 들어, filter() 함수를 사용하여 이미지에 흑백 필터를 적용할 수 있습니다.

function draw() {
  image(img, 0, 0);
  filter(GRAY);
}

픽셀 단위 조작: P5.js에서 이미지의 픽셀에 접근하고 조작할 수도 있습니다. 예를 들어, get() 함수를 사용하여 이미지의 한 픽셀의 색상을 가져올 수 있고, set() 함수를 사용하여 픽셀의 색상을 변경할 수 있습니다.

function mousePressed() {
  let pixelColor = img.get(mouseX, mouseY);
  console.log(pixelColor);
  
  img.set(mouseX, mouseY, color(255, 0, 0));
}

P5.js를 사용하여 다양한 이미지 프로세싱 작업을 수행할 수 있습니다. P5.js의 공식 문서에는 더 많은 예제와 자세한 설명이 있으니 참고하시기 바랍니다.