LoginSignup
1
0

More than 1 year has passed since last update.

@youtoy(Yosuke Toyota)inKDDI株式会社

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

Last updated at Posted at 2021-11-22

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

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

参考にしたソースコード

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

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

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

実行結果

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

おわりに

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

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

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

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

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

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

●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 Filters Documentation」にリストになっているもの、という感じのようでした。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0