Vue.js에서 p5.js를 사용해보십시오.

p5.js를 Vue 프레임 워크를 사용하여 그리기 위해 리서치했을 때의 메모입니다. p5.js는 Processing에서 파생된 라이브러리로, 비주얼 표현이나 Generative Design을 할 때 유용합니다. OpenProcessing 라는 웹상에서 개발할 수 있는 환경이 있어 프로그램을 쓰자마자 비주얼을 확인할 수 있습니다. 이번에는 여기에 작성한 코드를 Vue를 사용하여 표시하는 방법을 조사했습니다.

라이브러리 가져오기

Vue 프로젝트를 만든 후 p5.js 라이브러리를 설치합니다.
(나는 Nuxt로 만들었지만 일반 vue-cli에서도 동일하다고 생각합니다.)

npm install --save p5

이제 곧 p5.js를 사용할 수 있지만 p5.js에서 미리 준비된 함수와 속성은 전역적으로 확장되어 버리므로 잘 처리 할 수 ​​없습니다. 따라서 p5.js에 instance mode라는 모드에서 p5.js를 단일 객체로 생성하여 전역과의 충돌을 방지 할 수 있습니다 (참고).

mounted했을 때에 묘화 하는 것 같은 기술은 이하와 같습니다. p5.js의 실제 구현 코드를 함수에 쓰고 그 함수를 P5 클래스에 전달합니다.

mounted 내부

mounted() {

  const script = function (p5) {
    var speed = 2;
    var posX = 0;
    p5.setup = _ => {
      p5.createCanvas(500, 500);
      p5.ellipse(p5.width / 2, p5.height / 2, 500, 500);
    }

    p5.draw = _ => {
      p5.background(0);
      const degree = p5.frameCount * 3;
      const y = p5.sin(p5.radians(degree)) * 50;
      p5.push();
      p5.translate(0, p5.height / 2);
      p5.ellipse(posX, y, 50, 50);
      p5.pop();

      posX += speed;
      if (posX > p5.width || posX < 0) {
        speed *= -1;
      }
    }
  }

  const P5 = require('p5')
  new P5(script)
}

모든 Canvas에 표시

이 상태에서는 p5.js의 표시는 왼쪽 상단에 표시되어 버리므로, html내의 임의의 Canvas의 위치에 표시시킵니다 (참고) .

template

<template>
  <div class="container border">
    <div class="d-flex justify-content-center" id="p5Canvas"></div>
  </div>
</template>

mounted 내의 수정 부분

// p5.createCanvas(500, 500);
var canvas = p5.createCanvas(500, 500)
canvas.parent("p5Canvas");

임의의 Canvas에 id를 붙여 p5.js내에서 작성한 Canvas의 부모 컨테이너에 할당하는 것으로 임의의 Canvas내에 표시할 수 있습니다.

외부 자원으로 만들기

본말 전도일지도 모르지만, 기본적으로 p5.js 부분의 기술은 JavaScript이므로, Vue내에 쓰지 않아도 좋다고 생각했습니다. 그래서 p5.js의 기술 부분만 추출하여 다른 파일(Radar.js)로 하고, 그것을 Vue측에서 호출하여 사용하도록 변경했습니다.

mounted 내의 구현

var radar = require('@/js/Radar.js')
const P5 = require('p5')
new P5(radar.main)

Radar.js

let p5;

export function main(_p5) {
  p5 = _p5

... 以下同じ
}

export 문에서 p5.js 부분 (main 함수)에 액세스 할 수 있도록하고 new P5(radar.main)에서 객체를 생성 할 때 함수를 전달합니다.

콜백 받기

좀 더 Vue의 특징을 살릴 수 있도록 p5.js에서 콜백을 받아 그 내용을 표시시켜 보겠습니다.

methods 추가

methods: {
  callbackOnP5: function(timeStr) {
    this.message = timeStr;
  }
}

template에 추가

<div class="message d-flex justify-content-center">
  {{message}}
</div>

데이터 추가

data() {
  return {
    message: ""
  }
},

mounted

// NOTE: p5.jsからのコールバックを受け取る
radar.setDelegate(this.callbackOnP5);

Radar.js

let delegate;
let p5;
export function main(_p5) {
 p5 = _p5
 p5.draw = _ => {
   notifyCurrentTime();
 }
}

export function setDelegate(_delegate) {
  delegate = _delegate;
}

function notifyCurrentTime() {
  if (delegate !== undefined) {
    const message = p5.hour() + ":" + p5.minute() + ":" + p5.second();

    delegate(message);
  }
}

callback 함수를 미리 p5.js측의 소스 코드에 건네주어, 임의의 타이밍에 콜백 함수를 호출해, 데이터 바인딩 하고 있는 message 프로퍼티을 갱신시키고 있습니다.

서두 데모는 github에 있습니다.
원본 OpenProcessing의 소스 코드는 여기입니다.