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