『前記事:TurbowarpでP5JSを動かす(OneBall自由落下)』の続きです
目標：TurbowarpでP5JS、Ballを〇〇個インスタンス化、配列に入れる
クラスBallをインスタンス化、配列に格納します。
配列をfor文で取り出してそれぞれのBallインスタンスを動作させたいと思います。
ファイルの関係/IMPORTの階層(前記事と同じ)
カスタム拡張機能内で p5JSのSketchをimportします（絶対パスで）
p5JSのSketchからは 詳細処理を書いた sub.js をimportします（相対パスでOK)
sub.js 内でクラス定義を使うので、sub.js から ball.js を importします（相対パスでOK)
※ 前提：sub.js , ball.js は、sketch.jsと同一フォルダーに格納しておくとします。
今回やりたいことを見せるためのサンプル動画
動画の２分２０秒ぐらいからみてください。
ソース実装 ( Ball を配列化 )
ball.js ( 前記事と同じ )
Ballクラスを書いてあるJSファイルです。
sub.js
配列を用意して作りたい数分、配列にBallインスタンスをPUSHしています。
〇〇個繰り返す方法
次のようにしていますので着目してください。
// 20個の要素をもつ配列を作る
new Array(20).fill(0)
// 20回繰り返す（forEachで繰り返す）
new Array(20).fill(0).forEach(v =>{
}
実装全体
sub.js
/**
* sub.js
* 同じ階層にあるファイルなので、(./～)の書き方でOK。
* await を忘れてはだめです。
*/
const {Ball} = await import(`./ball.js?t=${new Date().getTime()}`);
let balls = [];
const mySetup = (p) => {
console.log('test setup');
const W = p.canvas.clientWidth;
new Array(20).fill(0).forEach(v =>{
// 色(RGB)をランダムに決める
let c = p.color(
p.random(0,255),
p.random(0,255),
p.random(0,255),
);
// 直径をランダムに決める
let d = p.random(0,50)+20;
// Ballのインスタンス化
// 第一引数：初期座標(X), 第二引数：初期座標(Y)
// 第三引数：直径の長さ, 第四引数：上方向の初期速度(マイナス値)
// 第五引数：色
const ball = new Ball((p.random(0,W-20)-W/2), 0, d, p.random(0,5)-40, c);
balls.push(ball);
});
}
const myDraw = (p) => {
// draw処理のなかで、配列要素の数分、Ballを描く
for(const ball of balls){
ball.W = p.canvas.clientWidth;
ball.H = p.canvas.clientHeight;
const _c = ball.c;
p.fill(_c);
p.noStroke();
p.ellipse( ball.x, ball.y, ball.r );
ball.move(); // 次の位置へ移動する
}
}
export {mySetup, myDraw};
sketch.js
P5JSのsketchになりますが、p.setup, p.draw の中身の実際は、sub.js に書かれていますことに留意してください。細かい実装は sub.jsの方へに分離しています。
sketch.js
/**
* Ballクラスをインポート
* 同じ階層にあるファイルなので、(./～)の書き方でOK。
* await を忘れてはだめです。
*/
const {mySetup, myDraw} = await import(`./sub.js?_t=${new Date().getTime()}`);
/**
* P5JS Sketch
* @param {*} p
*/
const sketch = (p) => {
let ball;
p.setup = () => {
mySetup(p); // sub.js の mySetup
}
p.draw = () => {
myDraw(p); // sub.js の myDraw
}
}
export {sketch};
Extension.js (前記事と同じ)
カスタム拡張機能の本体です。
sketchの場所を指定するブロックがありますので、sketchを切り替えることが可能です。