전통적인 p5.js 학습 자료는 <script> 태그를 이용한 CDN 방식으로 시작하는 경우가 많습니다. 이러한 방법은 빠르게 실습을 시작할 수 있다는 장점이 있지만, 프로젝트 규모가 커질수록 라이브러리 관리와 코드 구조 측면에서 한계를 드러냅니다.

npm install p5를 이용하여 p5.js를 설치하면 현대적인 웹 개발 환경 안에서 p5.js를 사용할 수 있습니다. 이를 통해 Vite, Webpack, Parcel과 같은 번들러를 활용할 수 있으며, 수많은 JavaScript 라이브러리와 손쉽게 통합할 수 있습니다.

npm install p5

import p5 from "p5";

new p5((p) => {
  p.setup = () => {
    p.createCanvas(400, 400);
  };

  p.draw = () => {
    p.background(30);
    p.circle(200, 200, 100);
  };
});

---

npm 기반 p5.js 개발의 장점

모듈 시스템 활용

ES Module 기반의 import 문법을 사용할 수 있습니다.

import p5 from "p5";
import Matter from "matter-js";
import { Pane } from "tweakpane";

전역 객체에 의존하지 않으므로 코드 구조가 명확해집니다.

---

의존성 관리

프로젝트에서 사용하는 라이브러리 버전을 package.json에서 관리할 수 있습니다.

{
  "dependencies": {
    "p5": "^2.0.0",
    "matter-js": "^0.20.0",
    "gsap": "^3.13.0"
  }
}

동일한 프로젝트를 다른 컴퓨터에서 실행하더라도 동일한 환경을 재현할 수 있습니다.

---

번들링 및 최적화

현대적인 빌드 도구는 다음과 같은 기능을 제공합니다.

• Tree Shaking
• 코드 압축
• 자동 리로드
• 개발 서버
• 타입 검사
• 소스맵 생성

특히 Vite와 p5.js의 조합은 매우 빠른 개발 경험을 제공합니다.

---

1. 인공지능 및 머신러닝

p5.js는 데이터를 시각적으로 표현하는 데 뛰어나며, AI 라이브러리는 데이터를 생성하거나 해석하는 역할을 담당합니다. 두 기술을 결합하면 인터랙티브 아트, 제스처 기반 인터페이스, 생성형 시스템 등을 제작할 수 있습니다.

---

ml5

ml5는 예술가와 디자이너를 위해 설계된 머신러닝 라이브러리입니다.

주요 기능은 다음과 같습니다.

• 포즈 추정
• 손 추적
• 이미지 분류
• 객체 인식
• 얼굴 인식
• 텍스트 생성

예를 들어 웹캠으로 사용자의 손 움직임을 추적하고, 손 위치에 따라 p5.js 파티클이 반응하도록 만들 수 있습니다.

활용 사례:

• 인터랙티브 미디어 아트
• 제스처 기반 게임
• 전시 인터페이스
• 움직임 기반 사운드 생성

---

TensorFlow.js

TensorFlow.js는 브라우저에서 딥러닝 모델을 실행할 수 있는 프레임워크입니다.

npm install @tensorflow/tfjs

활용 예시는 다음과 같습니다.

• 손글씨 인식
• 이미지 분류
• 시계열 데이터 예측
• 생성 모델 시각화
• 실시간 데이터 분석

예를 들어 사용자가 그린 그림을 인식하여 결과를 p5.js 캔버스에 시각적으로 표현할 수 있습니다.

---

2. 물리 시뮬레이션 및 애니메이션

p5.js는 기본적인 벡터 연산과 애니메이션 기능을 제공하지만, 복잡한 물리 현상을 구현하기에는 제한적입니다.

---

Matter.js

Matter.js는 대표적인 2차원 물리 엔진입니다.

npm install matter-js

지원 기능:

• 중력
• 충돌 판정
• 관성
• 마찰력
• 관절(Joint)
• 강체(Rigid Body)

일반적인 구조는 다음과 같습니다.

1. Matter.js가 물리 계산 수행
2. 객체 위치와 회전값 획득
3. p5.js가 화면 렌더링 담당

rect(body.position.x, body.position.y, w, h);

활용 분야:

• 물리 기반 게임
• 입자 시뮬레이션
• 인터랙티브 설치 작품
• 제너러티브 구조물

---

GSAP

GSAP는 웹 애니메이션 분야에서 사실상 표준으로 사용되는 애니메이션 라이브러리입니다.

npm install gsap

p5.js 변수 자체를 애니메이션할 수 있습니다.

gsap.to(circle, {
  radius: 200,
  duration: 2
});

장점:

• 이징(Easing)
• 타임라인
• 반복 애니메이션
• 스크롤 연동
• 높은 성능

특히 데이터 시각화나 인터랙티브 아트에서 매우 유용합니다.

---

3. 오디오와 사운드 시각화

사운드는 제너러티브 아트와 가장 많이 결합되는 데이터 중 하나입니다.

---

Tone.js

Tone.js는 Web Audio API를 고수준으로 추상화한 오디오 프레임워크입니다.

npm install tone

제공 기능:

• 신디사이저
• 시퀀서
• 샘플러
• 이펙트
• MIDI 처리
• FFT 분석

오디오 분석 데이터를 p5.js로 전달하면 다음과 같은 작품을 만들 수 있습니다.

• 음악 비주얼라이저
• 리듬 기반 게임
• 오디오 반응형 파티클
• 실시간 공연 비주얼

---

p5.sound와의 차이

항목	p5.sound	Tone.js
난이도	낮음	중간
신디사이저	제한적	매우 강력
시퀀서	단순	전문적
오디오 이펙트	기본	다양
음악 제작	제한적	우수

간단한 사운드 처리에는 p5.sound가 충분하지만, 음악 생성과 오디오 시스템 구축에는 Tone.js가 훨씬 강력합니다.

---

4. 크리에이티브 코딩 유틸리티

---

Tweakpane

Tweakpane은 크리에이티브 코딩 프로젝트에서 가장 널리 사용되는 파라미터 제어 도구 중 하나입니다.

npm install tweakpane

예시:

const params = {
  speed: 2,
  count: 100
};

pane.addBinding(params, "speed");
pane.addBinding(params, "count");

활용 분야:

• 실시간 파라미터 조절
• 알고리즘 실험
• 전시 인터페이스
• 제너러티브 아트 튜닝

---

dat.GUI

오랫동안 크리에이티브 코딩 분야에서 사용된 GUI 라이브러리입니다.

현재는 Tweakpane이 더 현대적인 인터페이스와 기능을 제공하지만, 여전히 많은 예제에서 사용됩니다.

---

canvas-sketch

제너러티브 아트 작가들이 널리 사용하는 제작 환경입니다.

주요 기능:

• 고해상도 렌더링
• 프레임 제어
• 애니메이션 출력
• PNG 시퀀스 생성
• GIF 및 비디오 출력

대형 인쇄 작업이나 NFT 아트 제작 시 특히 유용합니다.

---

5. 데이터 시각화 라이브러리

p5.js는 표현에 강하지만 데이터 처리 기능은 제한적입니다.

---

D3.js

npm install d3

D3는 데이터 분석과 스케일 계산에 매우 강력합니다.

예:

• CSV 분석
• 통계 처리
• 축 생성
• 데이터 변환

D3가 데이터를 처리하고 p5.js가 시각화를 담당하는 방식이 자주 사용됩니다.

---

Papa Parse

대용량 CSV 데이터를 읽는 라이브러리입니다.

npm install papaparse

활용 사례:

• 센서 데이터 시각화
• 기상 데이터 분석
• 사회 데이터 아트
• 실시간 로그 분석

---

6. 3D 그래픽 라이브러리

---

Three.js

p5.js의 WEBGL 모드는 비교적 간단한 3차원 표현에 적합하지만, 복잡한 3D 장면 구성에는 한계가 있습니다.

Three.js와 p5.js를 함께 사용하면 다음과 같은 구조를 만들 수 있습니다.

• Three.js: 3D 렌더링
• p5.js: UI 및 2D 그래픽
• p5.js: 생성 알고리즘
• Three.js: 최종 시각화

활용 사례:

• 데이터 기반 3D 구조
• 인터랙티브 설치 작품
• 생성형 공간
• 웹 기반 전시

---

7. GPU 계산 및 셰이더

---

glslify

GLSL 코드를 모듈처럼 관리할 수 있는 도구입니다.

npm install glslify

복잡한 셰이더 프로젝트에서 코드 재사용이 가능해집니다.

---

regl

WebGL 추상화 라이브러리입니다.

GPU 계산을 수행한 결과를 p5.js로 전달하는 하이브리드 구조를 만들 수 있습니다.

---

추천 개발 환경

현재 p5.js 프로젝트를 구축할 때 가장 추천되는 조합은 다음과 같습니다.

목적	추천 구성
일반적인 스케치	p5 + Vite
인터랙티브 아트	p5 + ml5 + Tweakpane
물리 시뮬레이션	p5 + Matter.js
오디오 비주얼	p5 + Tone.js
데이터 아트	p5 + D3
생성 예술	p5 + canvas-sketch
복잡한 3D	p5 + Three.js
GPU 기반 작업	p5 + GLSL

---

결론

npm 기반의 p5.js는 단순한 드로잉 라이브러리를 넘어 현대적인 웹 개발 생태계와 연결되는 크리에이티브 코딩 플랫폼으로 확장됩니다.

AI, 물리 엔진, 오디오 프레임워크, 데이터 분석 도구, 3D 엔진, GPU 셰이더 라이브러리까지 모두 동일한 프로젝트 안에서 통합할 수 있으며, 이러한 조합은 인터랙티브 아트, 데이터 시각화, 생성 예술, 미디어 아트, 웹 기반 설치 작품 등 다양한 분야에서 강력한 제작 환경을 제공합니다.

오늘날 p5.js를 학습한다는 것은 단순히 캔버스에 그림을 그리는 기술을 배우는 것이 아니라, JavaScript 생태계 전체를 창작 도구로 활용하는 방법을 익히는 과정이라고 할 수 있습니다.