p5.jsをvue.jsで動かすのに苦労したのでメモ。

ポイント

・クラスを実行

  var myp5 = new p5(s);

・クラスを定義

  const s = function (p5) {
    // 処理
  }

サンプル

.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>p5.js vue TEST</title>
  </head>
  <body>
    <h1>p5.js vue TEST</h1>

    <!-- このapp内のみVue.jsの管理範囲です -->
    <div id="app">
    </div>

    <!-- CDNの読込み -->
    <script src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <script>
      const app = new Vue({
        el: '#app',
        data: {
          // 関数があればここに',
        },

        async mounted() {
            // インスタンスモード
            const s = function (p5) {
                // 最初に一回実行される
                p5.setup = _ => {
                    p5.createCanvas(600,425);  // キャンバスを作成
                    p5.background(255);        // 背景色
                    p5.noStroke();             // 図形の線無し
                    console.log("load");
                }
                // 1フレーム（1/60秒）ごとに実行される
                p5.draw = _ => {
                    // オブジェクトの色をランダム（透明度70）
                    p5.fill(p5.random(255),p5.random(255),p5.random(255),70);
                    // キャンバスにランダムの丸を描画
                    p5.ellipse(p5.random(600),p5.random(425),p5.random(100));
                }
            }
            // インスタンスモードとしてp5クラスを実行
            var myp5 = new p5(s); 
        },
      });
    </script>
  </body>
</html>

参考URL

Vue.jsでp5.jsを使ってみる -Qiita
jsのimportとrequireの違い -Qiita
モジュール化(importとrequireの違い)
p5.js を instance mode で使う -Qiita

vue.jsの instance mode でp5.jsを動かす（メモ）

ポイント

サンプル

参考URL