p5.js Web Editor上で PixiJS の「ノイズ・色彩・ブラーのフィルタ」を組み合わせて使ってみる

以下の記事に登場していた PixiJS のフィルタのみを、p5.js の中で使ってみたいと思ってやった内容です。

●PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
　https://ics.media/entry/211118/
![フィルタのデモ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/ccfa945e-58e7-26b8-6d7f-7a6d76f69591.jpeg)

## 参考にしたソースコード
上記のソースコードが、以下の URL で公開されていました。

https://github.com/ics-creative/211021_camera_filters/blob/main/pages/04_filterDemo01.html

その中では以下のように、ビデオタグとキャンバスタグが使われていたのですが、ここを ｐ5．ｊｓ の中のキャンバスやビデオに置きかえれば PixiJS のフィルタを流用できるのではないかと思って、今回の内容を試しました。
![元のビデオ・キャンバスタグ.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/9bef9d77-1363-8841-bcf6-9c9b5e4b8add.jpeg)

## p5.js Web Editor上でフィルタを使う
### ライブラリの読み込み
ライブラリは、上記の参照元で読み込んでいた CDN から取得します。
p5.js Web Editor の index.html に以下を追記します。

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>
```

### JavaScript のプログラム
あとは、sketch.js を作っていきます。

```javascript
let app;

function setup() {
  let canvas, capture;

  canvas = createCanvas(640, 480, WEBGL);

  capture = createCapture(VIDEO, function () {
    app = new PIXI.Application({
      view: canvas.elt,
    });
    const videoSprite = PIXI.Sprite.from(capture.elt);
    videoSprite.width = width;
    videoSprite.height = height;
    app.stage.addChild(videoSprite);
    applyFilter();
  });
  capture.hide();
}

function draw() {}

const applyFilter = () => {
  const noiseFilter = new PIXI.filters.NoiseFilter(0.5, Math.random());
  const colorMatrixFilter = new PIXI.filters.ColorMatrixFilter();
  colorMatrixFilter.greyscale(0.5);
  const blurFilter = new PIXI.filters.BlurFilter(4);
  app.stage.filters = [colorMatrixFilter, blurFilter, noiseFilter];
};

```

キャンバスは WEBGLモードにする必要がありました。

### 実行結果
上記の内容を実行して、以下の結果を得られました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> Web Editor上で PixiJS の「ノイズ・色彩・ブラーののフィルタ」を合わせて使ってみるテスト、うまくいった！<br><br>以下で公開されていたソースを書きかえて、p5.js と一緒に使えるようにしました。<br><br>●PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA<br>　<a href="https://t.co/v3duu3ysxh">https://t.co/v3duu3ysxh</a> <a href="https://t.co/6B8Cv5NgvZ">pic.twitter.com/6B8Cv5NgvZ</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1462790119186829321?ref_src=twsrc%5Etfw">November 22, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに
今後、以下に掲載されている別のフィルタも試していきたいです。

●PixiJS Filters Documentation
　https://filters.pixijs.download/main/docs/index.html

## 【追記】 グローフィルタを使う
PixiJS の公式ドキュメント等をあらためて見直して、p5.js Web Editor上で書いた p5.jsベースのプログラムの中で、PixiJS のフィルタを使うお試しがうまくいきそうになってきました。

こちらは、グローフィルタを試した時のものです。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【p5.js と PixiJS を混ぜるお試しの続き】<br>ついに p5.js Web Editor上の <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> をベースにしたプログラムで、 <a href="https://twitter.com/hashtag/PixiJS?src=hash&amp;ref_src=twsrc%5Etfw">#PixiJS</a> のグローフィルタ（PIXI.filters.GlowFilter）を適用する、というのができた！<br><br>キー操作でフィルタの ON/OFF もできるようにしていて、動画ではその切り替えも行っています。 <a href="https://t.co/FhxTUfnKPO">pic.twitter.com/FhxTUfnKPO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1505462139691343873?ref_src=twsrc%5Etfw">March 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">【カーソルの座標に合わせてグローフィルタのパラメータを変化させる】<br>p5.js Web Editor上の <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> ベースのプログラムで、 <a href="https://twitter.com/hashtag/PixiJS?src=hash&amp;ref_src=twsrc%5Etfw">#PixiJS</a> のグローフィルタ（PIXI.filters.GlowFilter）を使う話の続き。<br><br>p5.js の mouseX・mouseY の値によって、グローフィルタの色・光り方の強度が変わるようにしてみた。 <a href="https://t.co/7yARnZXi3d">pic.twitter.com/7yARnZXi3d</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1505699305088503812?ref_src=twsrc%5Etfw">March 21, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

それと、公式ドキュメントを見ていろいろ試行錯誤した時の内容の一部は、以下の記事に書いています。

●PixiJS を p5.js のキャンバスの上で統合させる形で使う（環境は p5.js Web Editor を利用）【試行錯誤の途中】 - Qiita
　https://qiita.com/youtoy/items/bbf9a0790ed9ea353080
●PixiJS を p5.js の上で使いつつ p5.js の描画も組み合わせる（環境は p5.js Web Editor を利用） - Qiita
　https://qiita.com/youtoy/items/3e73ad0c11d95f60e79c

### この記事で使ったフィルタと上記のグローフィルタに関する補足
この記事で使ったフィルタは、PixiJS の以下に書いてるもののようでした。そして、この中に含まれていると `pixi.min.js` を読み込むだけで利用でき、一方でここにないものはライブラリを別に読み込んで使う必要がありそうでした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">ドキュメント的には、ここにあるもの、という感じかな。<br><br>●PixiJS API Documentation<br>　<a href="https://t.co/XdYshXaUml">https://t.co/XdYshXaUml</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1505495835051986947?ref_src=twsrc%5Etfw">March 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

別でライブラリを読み込む必要があるフィルタが、公式ドキュメントの「PixiJS Filters Documentation」にリストになっているもの、という感じのようでした。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">別途、読み込みが必要なもののドキュメントがこちらになる感じかな。<br><br>●PixiJS Filters Documentation<br>　<a href="https://t.co/FPo1JF1rNl">https://t.co/FPo1JF1rNl</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1505496204133953542?ref_src=twsrc%5Etfw">March 20, 2022</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>