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

『[前記事:TurbowarpでP5JSを動かす(OneBall自由落下)](https://qiita.com/harhid/private/7810578fd3bbd22d1ead)』の続きです

# 目標：TurbowarpでP5JS、Ballを〇〇個インスタンス化、配列に入れる

クラスBallをインスタンス化、配列に格納します。
配列をfor文で取り出してそれぞれのBallインスタンスを動作させたいと思います。


# ファイルの関係/IMPORTの階層(前記事と同じ)

カスタム拡張機能内で p5JSのSketchをimportします（絶対パスで）
p5JSのSketchからは 詳細処理を書いた sub.js をimportします（相対パスでOK)
sub.js 内でクラス定義を使うので、sub.js から ball.js を importします（相対パスでOK) 

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/294946/4098ecd6-caca-333b-3e5d-e07893a741ac.png)

※ 前提：sub.js ,  ball.js は、sketch.jsと同一フォルダーに格納しておくとします。

# 今回やりたいことを見せるためのサンプル動画

動画の２分２０秒ぐらいからみてください。

<iframe width="1280" height="720" src="https://www.youtube.com/embed/MiYv7AWLbWk" title="TurbowarpでP5JSを動かす(07 02 extension)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

# ソース実装 ( Ball を配列化 )

## ball.js ( 前記事と同じ )

Ballクラスを書いてあるJSファイルです。

[コードGITHUB](https://github.com/amami-harhid/turbowarpExtensions/blob/main/_07_02_extension/ball.js)


## sub.js
[コードGITHUB](https://github.com/amami-harhid/turbowarpExtensions/blob/main/_07_02_extension/sub.js)

配列を用意して作りたい数分、配列にBallインスタンスをPUSHしています。

#### 〇〇個繰り返す方法

次のようにしていますので着目してください。
```javascript
// 20個の要素をもつ配列を作る
new Array(20).fill(0)
```
```javascript
// 20回繰り返す（forEachで繰り返す）
new Array(20).fill(0).forEach(v =>{

}
```

#### 実装全体
```javascript: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](https://github.com/amami-harhid/turbowarpExtensions/blob/main/_07_02_extension/sketch.js)

P5JSのsketchになりますが、p.setup,  p.draw の中身の実際は、sub.js に書かれていますことに留意してください。細かい実装は sub.jsの方へに分離しています。

```javascript: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](https://github.com/amami-harhid/turbowarpExtensions/blob/main/_07_02_extension/Extension.js)