🌟 p5.js 전역 모드 vs 인스턴스 모드

✍️ Vanilla JavaScript + Vite 환경에서 p5.js를 안전하고 확장성 있게 사용하기 위한 핵심 개념

p5.js는 창의적인 코딩을 위한 강력한 라이브러리지만, 어떻게 불러오느냐에 따라 코드 구조와 유지보수성이 크게 달라집니다.
가장 큰 분기점은 바로:
🔹 전역 모드(Global Mode)
🔹 인스턴스 모드(Instance Mode)

이 글에서는 두 방식의 동작 원리, 장단점, 적합한 사용 사례, 그리고 실제 코드 비교를 통해 명확히 짚어보겠습니다.

https://www.postype.com/@dizicode/post/15021097
https://www.postype.com/@dizicode/post/14862766
https://github.com/processing/p5.js/wiki/Global-and-instance-mode

🔹 1. 전역 모드 (Global Mode)

✅ 작동 방식

• p5.js 스크립트를 <script> 태그로 HTML에 직접 로드하거나,
  import 'p5';처럼 모듈로 불러오면,
  setup(), draw(), mousePressed() 등의 함수 이름이 전역 스코프에 자동 등록됩니다.
  p5.js 엔진이 자동으로 setup()과 draw()를 찾아 실행합니다.

📄 예시: index.html + sketch.js (전통적 방식)

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
  <script src="sketch.js"></script>
</head>
<body></body>
</html>

// sketch.js
function setup() {
  createCanvas(400, 400);
  background(220);
}

function draw() {
  ellipse(mouseX, mouseY, 20, 20);
}

✅ 장점

• 초보자 친화적: 코드가 짧고 직관적
• 빠른 프로토타이핑에 적합
• p5.js 공식 레퍼런스 대부분이 이 방식 기준

❌ 단점

• 전역 스코프 오염: setup, draw, width, height, mouseX 등 모든 p5 변수/함수가 전역에 노출
• 여러 스케치 동시 사용 불가: 페이지 내 두 개 이상의 p5 스케치를 실행하려면 충돌 발생
• 모듈 시스템과의 호환성 문제: Vite, Webpack 등 번들러 환경에서 전역 변수 충돌 위험 ↑
• 리팩토링·테스트 어려움: 함수 간 의존성이 암묵적 → 유지보수 비용 증가

  💡 요약: "시작은 편하지만, 점점 복잡해질수록 고통받는 방식"

🔹 2. 인스턴스 모드 (Instance Mode)

✅ 작동 방식

• new p5()를 호출해 p5 인스턴스를 명시적으로 생성
• p5의 모든 기능(createCanvas, ellipse, mouseX 등)은 인스턴스의 메서드/속성으로 접근
• 콜백 함수(setup, draw)는 익명 함수 또는 별도 함수로 전달

📄 예시: Vite + 모듈 방식 (main.js)

p. 접두사를 반드시 붙여야 합니다.

// main.js
import p5 from 'p5';

new p5((p) => {
  // `p`는 p5 인스턴스 — 전역 변수 없이 모든 기능에 접근 가능
  p.setup = () => {
    p.createCanvas(400, 400);
    p.background(220);
  };

  p.draw = () => {
    p.ellipse(p.mouseX, p.mouseY, 20, 20);
  };
});

✅ 장점

• 스코프 격리: 전역 오염 제로 → 여러 스케치 독립 실행 가능
• 모듈 시스템과 완벽 호환: Vite, Rollup, Webpack 등 최신 도구 체인에서 권장 방식
• 유지보수성 향상: 인스턴스를 변수로 관리 → 리팩토링(예: 클래스 분리) 용이

❌ 단점

• 약간 더 긴 문법(p. 반복)
• 공식 레퍼런스 예제와 문법 차이

💡 요약: "초기 진입 장벽은 있지만, 장기적으론 훨씬 건강한 선택"

🔁 인스턴스 모드를 클래스로 리팩토링하기

p5 인스턴스 모드는 클래스 기반 구조와 궁합이 매우 좋습니다.
특히 여러 파라미터를 조정하거나, 재사용 가능한 컴포넌트를 만들 때 유리합니다.

main.js 안에서 sketch.js를 불러오는 예시입니다.

main.js

// main.js
import p5 from 'p5';
import CircleSketch from './sketch.js';

const sketch = new p5((p) => {
  const circleSketch = new CircleSketch(p, document.body);
  circleSketch.init();
});

sketch.js

// sketch.js
export default class CircleSketch {
  constructor(p, canvasParent) {
    this.p = p;
    this.parent = canvasParent;
    this.radius = 20;
    this.color = 255;
  }

  init() {
    this.p.setup = () => {
      const canvas = this.p.createCanvas(400, 400);
      canvas.parent(this.parent); // 특정 DOM 요소에 캔버스 삽입
      this.p.background(30);
    };

    this.p.draw = () => {
      this.p.background(30, 20); // 흐릿한 트레일 효과
      this.p.fill(this.color);
      this.p.noStroke();
      this.p.ellipse(this.p.mouseX, this.p.mouseY, this.radius);
    };

    // 외부에서 조정 가능한 API
    this.p.keyPressed = () => {
      if (this.p.key === ' ') this.radius += 5;
    };
  }
}

✅ 이런 구조는

• 파라미터 튜닝 UI (e.g., dat.GUI) 적용 용이
• 여러 스케치를 같은 페이지에 배치 가능
• 테스트 코드 작성도 쉬워집니다.