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

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

●PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
　https://ics.media/entry/211118/

参考にしたソースコード

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

その中では以下のように、ビデオタグとキャンバスタグが使われていたのですが、ここを ｐ5．ｊｓ の中のキャンバスやビデオに置きかえれば PixiJS のフィルタを流用できるのではないかと思って、今回の内容を試しました。

p5.js Web Editor上でフィルタを使う

ライブラリの読み込み

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

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

JavaScript のプログラム

あとは、sketch.js を作っていきます。

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モードにする必要がありました。

実行結果

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

#p5js Web Editor上で PixiJS の「ノイズ・色彩・ブラーののフィルタ」を合わせて使ってみるテスト、うまくいった！

以下で公開されていたソースを書きかえて、p5.js と一緒に使えるようにしました。

●PixiJSで加工する！リアルタイム・クリエイティブカメラ - ICS MEDIA
　https://t.co/v3duu3ysxh pic.twitter.com/6B8Cv5NgvZ

— you (@youtoy) November 22, 2021

おわりに

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

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

【追記】 グローフィルタを使う

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

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

【p5.js と PixiJS を混ぜるお試しの続き】
ついに p5.js Web Editor上の #p5js をベースにしたプログラムで、 #PixiJS のグローフィルタ（PIXI.filters.GlowFilter）を適用する、というのができた！

キー操作でフィルタの ON/OFF もできるようにしていて、動画ではその切り替えも行っています。 pic.twitter.com/FhxTUfnKPO

— you (@youtoy) March 20, 2022

【カーソルの座標に合わせてグローフィルタのパラメータを変化させる】
p5.js Web Editor上の #p5js ベースのプログラムで、 #PixiJS のグローフィルタ（PIXI.filters.GlowFilter）を使う話の続き。

p5.js の mouseX・mouseY の値によって、グローフィルタの色・光り方の強度が変わるようにしてみた。 pic.twitter.com/7yARnZXi3d

— you (@youtoy) March 21, 2022

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

●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 を読み込むだけで利用でき、一方でここにないものはライブラリを別に読み込んで使う必要がありそうでした。

ドキュメント的には、ここにあるもの、という感じかな。

●PixiJS API Documentation
　https://t.co/XdYshXaUml

— you (@youtoy) March 20, 2022

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

別途、読み込みが必要なもののドキュメントがこちらになる感じかな。

●PixiJS Filters Documentation
　https://t.co/FPo1JF1rNl

— you (@youtoy) March 20, 2022