[javascript] P5.js에서 뷰와의 통합을 어떻게 진행하나요?

04 Dec 2023

javascript

P5.js는 강력한 그래픽 라이브러리로서 사용자에게 다양한 그래픽 요소를 만들고 제어하는 기능을 제공합니다. 그러나 때로는 웹 페이지에서 p5.js 캔버스 요소와 다른 HTML 요소를 통합해야 할 때가 있습니다. 이 포스트에서는 p5.js와 뷰(View)의 통합을 어떻게 진행할 수 있는지에 대해 알아보겠습니다.

1. P5.js 캔버스 생성하기

먼저 p5.js 캔버스 요소를 생성해야 합니다. 이를 위해 HTML 파일에서 index.html 같은 파일을 생성하고, 아래와 같은 코드를 추가합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>P5.js와 뷰 통합하기</title>
    <!-- p5.js 라이브러리 로드 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
</head>
<body>
    <!-- p5.js 캔버스를 나타낼 요소 -->
   <div id="p5Canvas"></div>
   <!-- 뷰(View)와 함께 사용할 다른 HTML 요소들 -->
   <div id="otherElements">
      <!-- 여기에 다른 HTML 요소들을 추가하세요 -->
   </div>
   <!-- p5.js 스케치 파일 로드 -->
   <script src="sketch.js"></script>
</body>
</html>

위 코드에서 p5Canvas라는 ID를 가진 div 요소가 p5.js 캔버스를 나타내고 있습니다. 그리고 otherElements라는 ID를 가진 다른 div 요소들이 뷰와 함께 사용할 다른 HTML 요소들을 포함하고 있습니다. sketch.js는 p5.js 스케치 파일로서 만들고자 하는 그래픽 기능을 구현하고, 이 파일도 로드됩니다.

2. p5.js 스케치 파일 작성하기

이제 p5.js 스케치 파일을 작성해 보겠습니다. sketch.js 파일을 생성하고, 아래와 같은 예시 코드를 추가합니다.

// p5.js 스케치 초기화 함수
function setup() {
   // p5.js 캔버스 생성
   const canvas = createCanvas(400, 400);
   // p5.js 캔버스를 p5Canvas ID를 가진 div 요소에 삽입
   canvas.parent('p5Canvas');
   // 여기에 p5.js 초기 설정을 추가하세요
}

// p5.js 스케치 주기적으로 업데이트하는 함수
function draw() {
   // 여기에 그래픽 기능을 추가하세요
}

위 코드에서 setup() 함수는 p5.js 스케치 초기화를 위한 함수이며, draw() 함수는 p5.js 스케치를 주기적으로 업데이트하는 함수입니다. createCanvas(400, 400)은 p5.js 캔버스의 크기를 설정하는 코드입니다. 그리고 canvas.parent('p5Canvas')은 p5.js 캔버스를 p5Canvas ID를 가진 div 요소에 삽입하는 코드입니다.

3. 뷰와 함께 사용하기

이제 p5.js 캔버스와 뷰를 함께 사용할 수 있습니다. 예를 들어, 뷰 컴포넌트를 생성하고 p5.js 캔버스를 포함하도록 코드를 작성해 보겠습니다.

Vue.component('p5-canvas', {
   template: `<div id="p5Canvas"></div>`,
   mounted() {
      // p5.js 스케치 파일 로드
      const script = document.createElement('script');
      script.src = 'sketch.js';
      document.body.appendChild(script);
   }
});

new Vue({
   el: '#app'
});

위 코드에서 p5-canvas라는 컴포넌트를 생성하고, template에서는 p5.js 캔버스를 위한 div 요소를 정의하고 있습니다. mounted() 함수에서는 p5.js 스케치 파일을 로드하기 위한 코드를 작성하고 있습니다. 그리고 Vue 인스턴스에서는 #app ID를 가진 요소에 컴포넌트를 추가하고 있습니다.

이제 index.html 파일을 브라우저에서 열어서 p5.js와 뷰가 통합된 웹 페이지를 확인할 수 있습니다. p5.js 스케치 파일을 통해 그래픽 기능을 만들고, 뷰 컴포넌트를 통해 다른 HTML 요소들과 함께 사용할 수 있습니다.