topic★★★★★난이도

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

setup/draw 루프 기반의 크리에이티브 코딩 라이브러리. 2D 그래픽, 인터랙션, 사운드를 쉽게 구현.

#p5.js#크리에이티브코딩#Canvas#아트

왜 배우는가

예술을 코드로 만든다. 제너러티브 아트, 인터랙티브 시각화, 교육용 시뮬레이션 — 코딩의 즐거움을 가장 직관적으로 느낄 수 있는 라이브러리다.

p5.js는 예술을 코드로 만드는 도구다. Processing(자바 기반)의 JavaScript 버전으로, `setup()`에서 캔버스를 만들고 `draw()`에서 매 프레임 그림을 그리는 단순한 구조다. 마우스·키보드 인터랙션, 사운드, 웹캠까지 쉽게 연결할 수 있다.

d3 force graph — 노드와 링크가 물리 시뮬레이션으로 자연스럽게 배치되는 인터랙티브 그래프

용도	설명
제너러티브 아트	알고리즘으로 매번 다른 작품 생성
데이터 시각화	데이터를 예술적으로 표현
교육용 시뮬레이션	물리 법칙, 수학 개념 시각화
인터랙티브 설치	마우스·웹캠 반응 미디어 아트

javascript

// CDN: <script src="https://cdn.jsdelivr.net/npm/p5"></script>
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  // 마우스 위치에 원 그리기
  fill(random(255), random(255), random(255), 100);
  noStroke();
  circle(mouseX, mouseY, random(20, 50));
}

`setup()`은 한 번 실행, `draw()`는 매 프레임(기본 60fps) 반복 실행된다. `mouseX`, `mouseY`로 마우스 위치를 실시간으로 가져온다. CDN으로 로드하면 별도 설치 없이 바로 사용 가능.

Claude Code 팁: "p5.js로 파티클 시스템 만들어줘" 또는 "p5.js로 만델브로 집합 시각화해줘"라고 하면 수학·물리 로직과 렌더링 코드를 한 번에 생성한다.