Ch.2 JavaScript 라이브러리 15선

p5.js — 크리에이티브 코딩

article

핵심 내용

코드로 그리는 캔버스, p5.js. 붓 대신 코드 한 줄로 그림을 그리고, 애니메이션을 만들어보세요.

p5.js = 자바스크립트로 그림·애니메이션·인터랙션을 만드는 크리에이티브 코딩 라이브러리. 캔버스 위에 원, 선, 사각형을 그리고 마우스·키보드에 반응하는 작품을 코드만으로 완성합니다.

디자이너, 아티스트, 입문 개발자 모두가 쓰는 도구입니다. 코드를 몰라도 10줄이면 움직이는 그림이 나옵니다.

포트폴리오에 살아 움직이는 배경을 넣고 싶을 때, 코딩 교육에서 시각적 결과물을 바로 보여주고 싶을 때.

포토샵/일러스트: 한 장씩 직접 그려야 한다. 애니메이션은 프레임마다 수작업. 인터랙션? 불가능.

p5.js 코드: 코드 한 줄 바꾸면 색·크기·움직임이 바뀐다. 마우스 따라가기, 클릭 반응도 코드 3줄이면 끝.

CDN 한 줄이면 준비 끝. HTML 파일 하나로 바로 캔버스에 그림을 그릴 수 있습니다.

<script src="https://cdn.jsdelivr.net/npm/p5"></script>

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

function draw() {
  background(220);
  fill(100, 200, 255);
  circle(mouseX, mouseY, 50);
}

setup()은 맨 처음 한 번 실행되고, draw()는 매 프레임 반복 실행됩니다. 마우스를 움직이면 파란 원이 커서를 따라다닙니다.

AI에게 p5.js 작품을 요청할 때, 장면 묘사 + 인터랙션 + 시각 효과를 구체적으로 말하세요.

좋은 프롬프트 예시: "p5.js로 '비 내리는 밤' 애니메이션을 만들어줘. 검은 배경에 하얀 빗줄기가 위에서 아래로 떨어지고, 바닥에 닿으면 작은 물방울 튀김 효과. 마우스 위치에 우산 모양을 그려서 빗줄기를 막아줘."

프롬프트 변형: "비 대신 벚꽃잎이 흩날리게 바꿔줘. 분홍색 꽃잎이 좌우로 흔들리면서 떨어지고, 바닥에 쌓이는 효과 추가. 마우스 클릭하면 바람이 불어서 쌓인 꽃잎이 날아가게 해줘."

let drops = [];

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

function draw() {
  background(20, 20, 40);

  // 빗방울 생성
  if (frameCount % 2 === 0) {
    drops.push({ x: random(width), y: 0, speed: random(4, 10) });
  }

  // 빗방울 그리기 & 이동
  stroke(200, 200, 255, 150);
  for (let i = drops.length - 1; i >= 0; i--) {
    let d = drops[i];
    line(d.x, d.y, d.x, d.y + 10);
    d.y += d.speed;
    if (d.y > height) drops.splice(i, 1);
  }

  // 마우스 위치에 우산
  fill(255, 100, 100);
  noStroke();
  arc(mouseX, mouseY, 120, 80, PI, 0);
  stroke(80);
  line(mouseX, mouseY, mouseX, mouseY + 60);
}

마우스 인터랙티브 파티클 아트를 만들어봅시다. 클릭하면 알록달록한 파티클이 폭발하듯 퍼집니다.

<!DOCTYPE html>
<html><head><title>파티클 아트</title></head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/p5"></script>
  <script>
    let particles = [];

    function setup() {
      createCanvas(windowWidth, windowHeight);
      background(245);
    }

    function draw() {
      background(245, 245, 240, 20); // 반투명 배경으로 잔상

      for (let i = particles.length - 1; i >= 0; i--) {
        let p = particles[i];
        p.x += p.vx;
        p.y += p.vy;
        p.life -= 2;
        p.vy += 0.1; // 중력

        noStroke();
        fill(p.r, p.g, p.b, p.life);
        circle(p.x, p.y, p.size);

        if (p.life <= 0) particles.splice(i, 1);
      }
    }

    function mousePressed() {
      for (let i = 0; i < 30; i++) {
        particles.push({
          x: mouseX, y: mouseY,
          vx: random(-5, 5), vy: random(-8, 2),
          r: random(100, 255), g: random(100, 255),
          b: random(100, 255),
          size: random(5, 15), life: 255
        });
      }
    }
  </script>
</body></html>

이 파일을 particle.html로 저장하고 브라우저에서 열어보세요. 화면 아무 곳이나 클릭하면 30개의 파티클이 폭죽처럼 퍼지면서 중력에 끌려 떨어집니다.

p5.js에서 매 프레임마다 반복 실행되는 함수는?

key

핵심 용어

인터랙티브 아트

마우스·키보드에 반응하는 시각 작품 제작

제너레이티브 아트

랜덤 알고리즘으로 매번 다른 패턴 생성

데이터 시각화

숫자를 원·막대·색상으로 직관적으로 표현

코딩 교육

코드 결과를 즉시 눈으로 확인하며 학습

check_circle

핵심 정리

1p5.js는 CDN 한 줄로 설치하고, setup()과 draw() 두 함수로 시작한다
2draw()는 매 프레임 반복 실행되어 애니메이션과 인터랙션을 자연스럽게 만든다
3mouseX, mouseY, mousePressed() 등으로 사용자 입력에 즉시 반응할 수 있다
4프롬프트에 장면 묘사, 인터랙션 방식, 시각 효과를 구체적으로 적으면 AI가 완성 코드를 준다

퀴즈와 인터랙션으로 더 깊이 학습하세요

play_circle인터랙티브 레슨 시작