🌟 VanillaJS + p5.js + Vite 설정 (2.0.5 버전)

BamgasiJM·2025년 11월 1일

p5.js Art

목록 보기

2/67

Node.js와 npm이 설치된 상태에서 진행합니다.

node -v
npm -v

터미널에서 위 명령으로 버전을 확인하고 필요하면 최신 버전으로 업데이트합니다.
개발 폴더를 정합니다.

1단계: Vite Vanilla JS 프로젝트 생성

React나 Vue가 아닌, 순수 Vanilla JavaScript 템플릿을 사용해 프로젝트를 생성합니다.

1. 프로젝트 생성

터미널에서 다음 명령어를 실행하세요.

npm create vite@latest my-p5-art -- --template vanilla

npm create: npm을 사용해 새 프로젝트를 생성하는 명령
vite@latest: vite의 최신 버전을 사용
my-p5-art: 생성할 프로젝트 폴더 이름 (필요에 맞게 변경)
--: 이후의 옵션들은 vite 명령어에 전달한다는 의미. npm과 vite 명령어의 옵션을 구분하는 구분자
--teamplate vanilla: vite의 템플릿 옵션. react, react-ts, vue 등 사용

2. 프로젝트 폴더로 이동 후 의존성 설치

생성된 폴더로 이동한 후, 필요한 패키지를 설치합니다.

cd my-p5-art
npm install

2단계: p5.js 설치

p5.js를 npm으로 설치합니다. 모듈 방식으로 사용할 수 있도록 합니다.

npm install p5

1. 일관성 있는 버전 관리

package.json에 버전이 명시되므로 프로젝트를 공유하거나 배포할 때 항상 동일한 버전의 p5.js가 보장됩니다 CDN 링크를 사용할 때 발생하는 인터넷 연결 문제나 예기치 않은 라이브러리 업데이트로 인한 오류를 방지합니다.

2. 모듈식 개발 지원 (ES Modules)

또한 CDN 방식은 모든 함수를 전역(global) 범위로 오염시키는 반면에, npm 패키지로 설치하면 import 키워드를 사용하여 필요한 모듈만 가져와 깔끔하게 작성할 수 있습니다. 설치 후, main.js나 별도의 sketch 파일에서 p5를 import해 사용할 수 있습니다.
(임포트 예시: import p5 from 'p5'; 또는 import 'p5';)

3. 최신 프레임워크와 번들러에 통합 용이

React, Vue, Svelte 같은 modern frontend framework나 Vite, Webpack 같은 Bundler를 사용할 때 p5를 일반 자바스크립트 모듈처럼 불러올 수 있습니다. 번들러를 통해 코드를 압축하고 최적화하여 웹 로딩 속도를 향상시킵니다.

4. npm 생태계와 연동

다른 외부 자바스크립트 패키지를 함께 설치하고 결합하여 사용할 수 있습니다.

3단계: package.json 확인

여기까지 설치가 끝나면 package.json 파일의 내용을 확인합니다.
아래의 항목은 필수이며 이 항목 이외의 것들은 지워도 무방합니다. (keywords, author, license 등)

{
  "name": "p5js-vite-01",
  "version": "1.0.0",
  "type": "commonjs",
  "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "p5": "^2.3.0"
  },
  "devDependencies": {
    "vite": "^8.1.0"
  }
}

"name", "version": package.json 자체의 기본 규격입니다.
"type": "commonjs": Node.js 환경에서 모듈 시스템을 해석하는 기준이 되므로 남겨두는 것이 좋습니다.
"scripts": npm run dev 등의 명령어를 실행하기 위한 필수 설정입니다.
"dependencies"의 p5: p5.js를 사용하기 위한 핵심 라이브러리입니다.
"devDependencies"의 vite: 개발 서버 실행 및 프로젝트 빌드를 담당하는 필수 번들러입니다.

3단계: 보일러플레이트 코드

이제 꼭 필요한 파일들을 생성하고 각각 코드를 넣습니다.

1. `index.html`

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p5.js + Vite</title>
  </head>
  <body>
    <div id="p5-container"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

2. `src/main.js`

인스턴스 모드로 작성

import p5 from "p5";
import "./style.css";

const sketch = (p) => {
  let t = 0; // 시간 변수

  p.setup = () => {
    p.createCanvas(400, 400).parent("p5-container");
    p.noStroke();
  };

  p.draw = () => {
    p.background(0);
    p.fill(255);

    // 사인함수를 이용해 반지름 계산
    const baseRadius = 80; // 기본 크기
    const amplitude = 40;  // 크기 변화 폭
    const speed = 0.05;    // 속도 (값이 클수록 빠름)

    const radius = baseRadius + amplitude * p.sin(t);

    // 화면 중앙에 원 그리기
    p.circle(p.width / 2, p.height / 2, radius * 2);

    // 시간 증가
    t += speed;
  };
};

new p5(sketch);

또 다른 인스턴스 모드의 예시 코드

import p5 from 'p5';
import "./style.css";

const sketch = (p) => {
  let angle = 0;

  p.setup = () => {
    p.createCanvas(800, 600);        // 캔버스 크기
    p.background(0);                 // 초기 배경
    p.smooth();                      // 부드러운 렌더링
  };

  p.draw = () => {
    // 반투명 배경으로 트레일 효과
    p.fill(0, 20);
    p.rect(0, 0, p.width, p.height);

    // 중심 이동
    p.translate(p.width/2, p.height/2);
    
    // 회전하는 여러 도형 예시
    for (let i = 0; i < 8; i++) {
      p.push();
      p.rotate(angle + i * p.PI / 4);
      
      // 색상 변화
      let hue = (p.frameCount + i * 30) % 360;
      p.fill(hue, 80, 100);
      p.noStroke();
      
      // 사각형 + 원 조합
      p.rect(-40, -40, 80, 80);
      p.circle(60, 0, 30);
      
      p.pop();
    }
    
    angle += 0.02;  // 회전 속도
  };

  // 마우스 클릭 시 색상/패턴 리셋 예시
  p.mousePressed = () => {
    p.background(0);
  };
};

new p5(sketch);

3. `style.css`

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000000;
}

#p5-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

canvas {
  display: block;
}

4단계: 개발 서버 실행

지금까지 진행한 가장 기본적인 형태의 프로젝트 구조는 다음과 같습니다.

my-vanilla-p5-app/
├── index.html	 	 <-- 프로젝트 대문 역할
├── package.json	 <-- 개발을 위한 세팅
├── package-lock.json
├── node_modules/	 <-- npm install로 설치한 모듈		
└── src/
    ├── main.js      <-- p5.js 코드가 들어간 메인 javascript파일
    └── style.css    <-- css 파일

터미널에서 아래의 명령으로 개발 서버를 실행하여 결과를 확인합니다.

npm run dev

터미널에 Local: http://localhost:5173/ 과 같은 주소가 나타납니다. 이걸 Cmd+클릭 해서 웹 브라우저로 엽니다. 브라우저에 보이는 것을 확인하면서 코드를 작성해나가면 됩니다.

p5.js 2.0 개발 방식 변경

https://github.com/processing/p5.js/wiki/Global-and-instance-mode

1. ES Modules의 등장

// v1.x: UMD 방식 (전역에 자동 등록)
<script src="p5.js"></script>
// setup(), draw() 함수가 자동으로 전역에서 인식됨

// v2.x: ES Modules 방식
import p5 from 'p5';
// setup(), draw()이 전역에 자동 등록되지 않음

2. 번들러의 모듈 격리

Vite/Webpack 등의 모듈 시스템에서는 각 파일이 독립된 스코프를 가짐 → 전역 함수가 자동으로 등록되지 않음

3. p5.js의 디자인 철학 변화

v1.x: 쉬운 시작을 위한 글로벌 폴리시
v2.x: 모던 자바스크립트와 모듈 시스템 준수

왜 `p.` 접두사가 필요한가?

// 모듈 환경에서는 이게 안되는 이유:
function setup() {   	  // ⛔ 이 함수는 p5 인스턴스와 연결되지 않음
  createCanvas(400, 400); // ⛔ createCanvas가 어떤 p5 인스턴스인지 모름
}

// 대신 이렇게 해야함:
new p5((p) => {      		  // ✅ p5 인스턴스 생성
  p.setup = () => {  		  // ✅ 이 setup은 p 인스턴스와 연결됨
    p.createCanvas(400, 400); // ✅ p 인스턴스의 createCanvas 사용
  };
});

BamgasiJM

Coding Art with Blender / oF / Processing / p5.js / nannou

이전 포스트

🌟 p5.js를 처음 배운다면

다음 포스트

🌟 VanillaJS + p5.js + Vite 설정 (2.0.5 버전)

p5.js Art

1단계: Vite Vanilla JS 프로젝트 생성

1. 프로젝트 생성

2. 프로젝트 폴더로 이동 후 의존성 설치

2단계: p5.js 설치

1. 일관성 있는 버전 관리

2. 모듈식 개발 지원 (ES Modules)

3. 최신 프레임워크와 번들러에 통합 용이

4. npm 생태계와 연동

3단계: package.json 확인

3단계: 보일러플레이트 코드

1. `index.html`

2. `src/main.js`

3. `style.css`

4단계: 개발 서버 실행

p5.js 2.0 개발 방식 변경

1. ES Modules의 등장

2. 번들러의 모듈 격리

3. p5.js의 디자인 철학 변화

왜 `p.` 접두사가 필요한가?

🌟 p5.js를 처음 배운다면

🌟 p5.js와 npm 생태계의 연동

0개의 댓글

🌟 VanillaJS + p5.js + Vite 설정 (2.0.5 버전)

p5.js Art

1단계: Vite Vanilla JS 프로젝트 생성

1. 프로젝트 생성

2. 프로젝트 폴더로 이동 후 의존성 설치

2단계: p5.js 설치

1. 일관성 있는 버전 관리

2. 모듈식 개발 지원 (ES Modules)

3. 최신 프레임워크와 번들러에 통합 용이

4. npm 생태계와 연동

3단계: package.json 확인

3단계: 보일러플레이트 코드

1. index.html

2. src/main.js

3. style.css

4단계: 개발 서버 실행

p5.js 2.0 개발 방식 변경

1. ES Modules의 등장

2. 번들러의 모듈 격리

3. p5.js의 디자인 철학 변화

왜 p. 접두사가 필요한가?

🌟 p5.js를 처음 배운다면

🌟 p5.js와 npm 생태계의 연동

0개의 댓글

1. `index.html`

2. `src/main.js`

3. `style.css`

왜 `p.` 접두사가 필요한가?