p5.js 예제로 기본 사용법 빠르게 파악하기

p5.js는 예술가, 디자이너, 교육자, 초보자들을 위한 크리에이티브 코딩 라이브러리로, 웹에서 시각적 요소를 쉽게 만들 수 있게 해주는 자바스크립트 기반의 라이브러리입니다. 예전부터 널리 쓰여왔던 processing(Java, Python)이라는 라이브러리가 p5.js로 발전해 온 것이죠.

p5.js 학습을 위해서는 다양한 자료도 있고 공식 사이트의 레퍼런스 및 문서도 잘 되어있습니다. 하지만 이번 글에서는 좀더 빠르게 학습하기 위해서 몇 가지 예제를 통해 p5.js의 주요 기능을 압축적으로 소개하겠습니다. 이 예제들은 p5.js 에디터에서 바로 실행할 수 있습니다. (에디터를 열어서 꼭 직접 실행해보는 것을 추천합니다.)

예제4를 p5js 에디터에서 실행한 모습

예제 1: 기본 도형 그리기

예제1의 실행 결과

아래 예제는 기본 도형을 그립니다. p5.js 에디터를 열어서 코드를 실행해보고 값을 바꿔보면서 테스트해보세요.

function setup() {
  // 캔버스 생성
  createCanvas(400, 400);
  background(255); // 배경색 지정
}

function draw() {
  // 도형과 선 그리기
  stroke(0); // 선 색상 지정
  strokeWeight(1); // 선 굵기를 1으로 지정
  fill(100, 200, 150); // 도형 내부 색상 지정
  rect(50, 50, 100, 100); // 좌표(50,50)에 크기 100인 정사각형 그리기

  noStroke(); // 테두리 없이 그리기
  fill(200, 100, 150);
  ellipse(300, 100, 80, 80); // 좌표(300,100)에 크기 80인 원 그리기

  stroke(255,0,0); // 선 색상을 빨간색으로 지정
  line(0, 0, width, height); // 선 그리기

  stroke(0,0,255); // 선 색상을 파란색으로 지정
  strokeWeight(10); // 선 굵기를 10으로 지정
  line(300, 20, 10, 300); // 선 그리기
}

line은 선, ellipse는 원(타원), rect는 사각형을 그립니다.
함수의 괄호 안에 있는 숫자는 입력하는 위치(x,y)와 크기(너비, 높이)를 의미합니다.
fill()는 그려질 도형의 색상을 결정하고, stroke()를 활용하여 테두리의 색상을 결정합니다.

예제 2: 마우스와 키보드 입력 처리

mouseIsPressed라는 변수를 통해 마우스 입력을 감지할 수 있습니다. mouseX,mouseY는현재 마우스의 x와 y 좌표를 나타냅니다. 그리고 keyPressed()라는 함수를 활용하여 키보드 입력을 활용합니다. p5.js 에디터에서 직접 실행해보세요.

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

function draw() {
  // 마우스 위치에 따라 원 그리기
  fill(0);
  if (mouseIsPressed) {
    ellipse(mouseX, mouseY, 50, 50);
  }
}

function keyPressed() {
  // 키보드 'c'를 누르면 화면 지우기
  if (key === 'c') {
    clear();
    background(255);
  }
}

예제 3: 이미지 저장

이 예제에서는 외부 이미지를 로드하고, 'S' 키를 눌러 캔버스를 이미지로 저장하는 방법을 보여줍니다. 먼저 p5.js 에디터에서 사용할 이미지를 준비해야 합니다. p5.js 에디터에서 직접 실행해보세요.

let img;

function preload() {
  // 이미지 불러오기
  img = loadImage('path/to/your/image.jpg');
}

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

function draw() {
  background(255);
  image(img, 20, 20, 200, 200); // 이미지 그리기
}

function keyPressed() {
  // 's'를 누르면 이미지로 저장
  if (key === 's') {
    saveCanvas('myCanvas', 'jpg');
  }
}

예제4: 텍스트 인풋 활용하기(종합 예제)

예제4를 실행한 결과물

예제4에서는 키보드와 마우스 뿐만 아니라 텍스트 인풋이라는 웹 구성요소를 사용합니다. p5.js 에디터에서 직접 실행해보세요.

let input; // 텍스트 입력을 위한 변수

function setup() {
  createCanvas(400, 400);
  background(255);

  // 텍스트 입력 필드 생성
  input = createInput();
  input.position(20, 20);
}

function draw() {
  // 마우스 클릭시 입력된 텍스트를 랜덤 위치에 출력
  if (mouseIsPressed) {
    textSize(20);
    fill(random(255), random(255), random(255));
    // 입력된 텍스트를 위치에 출력
    text(input.value(), mouseX, mouseY); 
  }
}

function keyPressed() {
  // '1' 키를 누르면 사각형 그리기
  if (key === '1') {
    fill(random(255), random(255), random(255));
    rect(random(width), random(height), 50, 50);
  }

  // '2' 키를 누르면 랜덤 위치에 선 그리기
  if (key === '2') {
    stroke(random(255), random(255), random(255));
    line(random(width), random(height), random(width), random(height));
  }

  // 'r' 키를 누르면 화면 지우기
  if (key === 'r') {
    clear();
    background(255);
  }
}

주요 메소드

아래는 p5.js에서 자주 사용되는 10가지 기본 요소들(함수 및 메소드)입니다.
p5.js 공식 웹사이트를 통해 더 많은 정보를 찾아볼 수 있습니다.

1. setup()과 draw():
   •  p5.js의 기본 구조입니다.
   • setup()은 스케치 시작 시 한 번 실행되며, 캔버스 생성을 여기에서 주로 합니다.
   • draw()는 계속해서 반복 실행되어 애니메이션 효과를 만듭니다.
2. createCanvas(w, h):
   • 새로운 드로잉 캔버스를 생성합니다.
   • w와 h는 캔버스의 너비와 높이를 나타냅니다.
3. background(r, g, b):
   • 캔버스의 배경색을 설정합니다.
   • r, g, b는 빨강, 초록, 파랑 색상의 강도를 나타냅니다.
4. fill(r, g, b):
   • 도형의 내부 색을 설정합니다.
   • 색상은 RGB 값으로 지정됩니다.
5. stroke(r, g, b):
   • 도형의 테두리 색을 설정합니다.
   • 색상은 RGB 값으로 지정됩니다.
6. rect(x, y, w, h):
   • 사각형을 그립니다.
   • (x, y)는 사각형의 시작 위치이며, w와 h는 너비와 높이를 나타냅니다.
7. ellipse(x, y, w, h):
   • 타원을 그립니다.
   • (x, y)는 중심의 위치이며, w와 h는 너비와 높이를 나타냅니다.
8. line(x1, y1, x2, y2):
   • 두 점을 연결하는 선을 그립니다.
   • (x1, y1)과 (x2, y2)는 선의 시작점과 끝점입니다.
9. mouseX, mouseY:
   • 현재 마우스의 x와 y 좌표를 나타냅니다.
10. keyPressed():
    • 키보드의 키가 눌렸을 때 실행될 함수를 정의합니다.
    • 이 함수 내에서 key나 keyCode 변수를 사용하여 어떤 키가 눌렸는지 확인할 수 있습니다.
11. loadImage(path):
    • 이미지 파일을 불러오는 함수입니다.
    • path는 불러올 이미지의 경로입니다.

 

마무리

이상으로 p5.js의 기본적인 도형 그리기, 사용자 입력 처리, 이미지 작업 및 저장 등의 기능을 예제를 통해 알아보았습니다. 추가적으로 p5.js의 다른 기능들을 탐색하고 싶다면 p5.js 공식 웹사이트의 레퍼런스와 예제들을 확인해보세요.

예제나 글 구성에 대해 질문이나 개선할 점이 있다면 언제든지 댓글을 통해 알려주세요. 감사합니다.