P5.js의 사용 사례

P5.js는 웹 브라우저에서 작동하는 JavaScript 기반의 크리에이티브 코딩 라이브러리입니다. P5.js를 사용하면 그래픽, 애니메이션, 사운드, 인터랙션 등 다양한 표현 방식으로 웹 페이지를 개발할 수 있습니다. 아래에서 몇 가지 P5.js의 사용 사례를 살펴보겠습니다.

1. 그래픽 작업

P5.js를 사용하면 다양한 그래픽 작업을 수행할 수 있습니다. 다양한 도형을 그리거나 이미지를 로드하고 변형하는 등의 작업이 가능합니다. 예를 들어, 아래는 원을 그리는 간단한 예제입니다.

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(250, 250, 100, 100);
}

2. 애니메이션 만들기

P5.js를 사용하면 쉽게 애니메이션을 만들 수 있습니다. 프레임마다 그림을 그려 움직이는 효과를 줄 수 있습니다. 아래는 그림판을 만들어 마우스 움직임에 따라 선이 그려지는 예제입니다.

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(220);
  stroke(0);
  strokeWeight(3);
  if (mouseIsPressed) {
    line(pmouseX, pmouseY, mouseX, mouseY);
  }
}

3. 사운드 처리

P5.js는 웹 오디오와 사운드 처리를 지원합니다. 오디오 파일을 재생하거나 실시간으로 마이크 입력을 받는 등의 작업이 가능합니다. 아래는 오디오 파일을 로드하고 재생하는 예제입니다.

let sound;

function preload() {
  sound = loadSound('path/to/sound.mp3');
}

function setup() {
  createCanvas(500, 500);
  sound.play();
}

function draw() {
  // 그래픽 작업 등 추가로 수행할 작업
}

4. 인터랙션 생성

P5.js를 사용하면 사용자와 상호작용하는 웹 페이지를 만들 수 있습니다. 마우스 이벤트, 키보드 입력 등을 처리하여 다양한 상호작용 요소를 추가할 수 있습니다. 아래는 마우스 클릭에 반응하는 예제입니다.

let circleX = 250;
let circleY = 250;

function setup() {
  createCanvas(500, 500);
}

function draw() {
  background(220);
  fill(255, 0, 0);
  ellipse(circleX, circleY, 100, 100);
}

function mouseClicked() {
  if (mouseX > circleX - 50 && mouseX < circleX + 50 && mouseY > circleY - 50 && mouseY < circleY + 50) {
    fill(0, 255, 0);
  }
}

이외에도 P5.js를 사용하여 웹 기반 게임, 데이터 시각화, 디지털 예술 등 다양한 작업을 할 수 있습니다. P5.js의 자세한 사용법은 공식 문서를 참고하시기 바랍니다.