Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

vue.jsの instance mode でp5.jsを動かす(メモ)

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

protoout-studio
プロトアウトスタジオは日本初のプロトタイピング専門スクールです。プログラミングだけではなく、企画力と発信力を身に付けて”自分で課題を見つけて実装し、発信し続ける人”を育成しています。 圧倒的なアウトプット力を身に付けましょう。 学生募集中です。
https://protoout.studio
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away