TurbowarpでP5JSを動かす(複数のBall:自由落下)

『前記事: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ファイルです。

コードGITHUB

sub.js

コードGITHUB

配列を用意して作りたい数分、配列に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

コードGITHUB

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を切り替えることが可能です。

コードGITHUB