PixiJS でパーティクルを描画して p5.js で扱うための下準備（まずは独立したキャンバスでシンプルな描画から）

## はじめに
この記事では、p5.js で [PixiJS](https://pixijs.com/) の描画を使うことを目的とし、その下準備として PixiJS の描画を p5.js Web Editor上で行うということをやります。

### 過去に行ったこと
以前、以下のような記事を書いたことがありました。

●p5.js Web Editor上で PixiJS の「ノイズ・色彩・ブラーのフィルタ」を組み合わせて使ってみる - Qiita
　https://qiita.com/youtoy/items/1180c80b91064d4e043d

この時は、p5.js側でキャンバスを用意して、それを PixiJS で利用するやり方にしていました。
しかし、その方法が最適なのかが分かっていません。それとは別のやり方も試してみるという意味で、今回は、PixiJS側で描画領域を用意する形（それを p5.js で読み込むという別のやり方）で試してみることにしました。

## PixiJS を使った描画
ここから、PixiJS を使ったプログラムを書いていきます。

### ライブラリを読み込み
まず下準備として、PixiJS を CDN から読み込む方法を確認します。

CDN からの読み込みについては、以下で公開されている最新版を使いました。
●pixi.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
　https://cdnjs.com/libraries/pixi.js

###  PixiJS の描画領域に描画をするだけのプログラム
HTMLファイルでは、上記の　CDN からの PixiJS の読み込みをしつつ、PixiJS用のキャンバスを準備します。具体的には、以下の内容にしました。

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/7.0.5/pixi.min.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css" />
    <meta charset="utf-8" />
  </head>
  <body>
    <main></main>
    <canvas id="myCanvas"></canvas>

    <script src="sketch.js"></script>
  </body>
</html>
```

それでは、JavaScript のプログラムの話にうつります。今回、とりあえずのテスト用として、以下の内容を作ってみました。
内容は、p5.js のキャンバスは用意しつつ、PixiJS のキャンバスも用意し、PixiJS のキャンバスのほうで、スプライトを移動させるというものにしました。

```javascript
let app;
let sprite;

function setup() {
  createCanvas(400, 200);

  app = new PIXI.Application({
    width: width,
    height: height,
    backgroundColor: "#111111",
    view: document.getElementById("myCanvas"),
  });

  const container = new PIXI.Container();
  app.stage.addChild(container);

  sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
  sprite.x = width / 2;
  sprite.y = height / 2;
  sprite.width = 10;
  sprite.height = 10;
  sprite.alpha = 1;

  container.addChild(sprite);
}

function draw() {
  background(220);

  sprite.x += 1;
  sprite.y -= 1;
}
```

上記を実行すると、以下のような内容が描画されます。
上には p5.js のキャンバスが、下には PixiJS の描画領域が表示され、PixiJS の描画領域のほうで白い矩形が動くという内容です。
![とりあえずのテストの描画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ed2df645-0884-d99e-5fec-ec199ef5431e.png)

###  PixiJS の描画を p5.js側に取り込む
次に、PixiJS で行った描画を、p5.js側に取り込んでみます。

先ほどの JavaScript のプログラムに、以下の内容を追加します。

- PixiJS の描画領域は隠す（ `canvasPixi.style.display = "none";` ）
- PixiJS の描画内容を p5.js のキャンバスに描き込む（ `drawingContext.drawImage(canvasPixi, 0, 0);` )

具体的な内容は、以下のとおりです。

```javascript
let canvasPixi, app;
let sprite;

function setup() {
  createCanvas(400, 300);

  canvasPixi = document.getElementById("myCanvas");
  canvasPixi.style.display = "none";

  app = new PIXI.Application({
    width: width,
    height: height,
    backgroundColor: "#111111",
    view: canvasPixi,
  });

  const container = new PIXI.Container();
  app.stage.addChild(container);

  sprite = new PIXI.Sprite(PIXI.Texture.WHITE);
  sprite.x = width / 2;
  sprite.y = height / 2;
  sprite.width = 10;
  sprite.height = 10;
  sprite.alpha = 1;

  container.addChild(sprite);
}

function draw() {
  background(220);

  drawingContext.drawImage(canvasPixi, 0, 0);

  sprite.x += 1;
  sprite.y -= 1;
}
```

上記を実行した結果は、以下となります。描画領域は 1つだけになり、p5.js のキャンバスに該当するものですが、その描画処理は PixiJS で行ったものになります。
![p5.jsのキャンバスで描画](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/dcc6e3ee-7c36-5c7d-42f5-155d33d4495f.png)
ひとまず、今回の目的の 1つは達成できました。

## Sprite関連の公式情報
今回、描画で用いている Sprite は、座標・大きさ・透明度を指定してみました。これから、さらにいろいろな描画を行っていけるよう、以下の公式情報を確認していければと思いました。

●PixiJS: Sprites
　https://pixijs.io/guides/basics/sprites.html

●PixiJS API Documentation
　https://pixijs.download/dev/docs/PIXI.Sprite.html
●PixiJS: Sprite
　https://api.pixijs.io/@pixi/sprite/PIXI/Sprite.html

## 今後試したいこと
今後は、PixiJS の描画でパーティクルを扱うような内容を試せればと思います。

- [Sprite > Basic - PixiJS Examples](https://pixijs.io/examples/#/sprite/basic.js)
- [pixijs/particle-emitter: A particle system for PixiJS](https://github.com/pixijs/particle-emitter)
- [PixiParticlesEditor](https://pixijs.io/pixi-particles-editor/)
- [PixiJS API Documentation](https://pixijs.download/v4.8.0/docs/PIXI.particles.ParticleContainer.html)
- [Pixi.jsでCanvasをカンタンに触ってみよう！ 〜パーティクル編〜 | 株式会社LIG](https://liginc.co.jp/398518)
- [JSでクリエイティブコーディング - テキストを分解しパーティクルにする演出 - ICS MEDIA](https://ics.media/entry/221216/)

### パーティクルの軽いお試し
とりあえず、PixiJS側で 8万個の小さい矩形を描画して動かす、ということをやってみました。

https://twitter.com/youtoy/status/1609338408522121216