PixiJSで歪みやノイズなどのフィルターを使って表現の幅を広げる。

今回は題目通り、「フィルター表現の幅を広げる」ということで、

PixiJSを用いて、フィルター表現を試していきたいと思います。

シェーダーをいじらないとできない表現が簡単にできるので、知っておくと便利です。

フィルターの記述

PixiJSでフィルターをかけるのは簡単で、記述は下記の通りです。

フィルターのパラメーターはそれぞれのフィルターによって様々なので、リファレンスを参照してください。

const noiseFilter = new PIXI.filters.NoiseFilter(); //ノイズフィルター
noiseFilter.noise = 0.8; //ノイズの大きさ
noiseFilter.seed = 0.5; //ノイズのランダム度合い
img.filters = [noiseFilter]; //imgにフィルタを追加

フィルターを使ってみる

ではでは、早速フィルターをかけ、かつ動かしていきたいと思います。

パラメーターを設定するだけだと単純にフィルターがかかるだけですが、

下記のようにapp.tickerの中で値を動かすとアニメーションさせることができます。

app.ticker.add(animate);
function animate() {
  noiseFilter.seed += 0.002; 
}

画像に少し、ノイズがかかってちょっと古いテレビのようになっているのではないでしょうか。

なぜなら、それはもちろんノイズのフィルターをかけたからです。おばあちゃんの家のテレビにこんなノイズがかかっていた気がします。

上のフィルター部分の記述を消してもらったら、ノイズが消えてフィルターなしの画像だけが表示されるはずです。

ノイズだけじゃない様々なフィルター

もちろんPixiJSのフィルターには「ノイズ」だけでなく、

「歪み」や「モザイク」、「グリッチ」などなど多数のフィルターが備わっています。

GLSL(シェーダーの記述言語)を記述することができれば、自前のカスタムフィルターも作れます。

下記のGitHubのデモの中でいろんなフィルターを試すことができますので、試してみてください。

https://github.com/pixijs/pixi-filters

https://pixijs.io/pixi-filters/tools/demo/

これだけ種類があって、一つ一つにインパクトがあると、

スライドショーと組み合わせたりマウスイベントに反応させると、面白そうですし、もっとできることが増えそうです。

GSAP(TweenMax)でアニメーションをつけてみる

ということで、思いついたらやってみようの精神なので、

GSAPでマウスイベントに反応させてアニメーションをつけていきたいと思います。

下記のようにGSAPを使って値をいじることにより、画像をホバーしたら歪ませてみます。

img.on('mouseover', function() {
  TweenMax.to(
    displacementFilter.scale,
    2,
    {x:0, y:100, ease: Expo.easeOut});
});

img.on('mouseout', function() {
  TweenMax.to(
    displacementFilter.scale,
    2,
    {x:0, y:0, ease: Expo.easeOut});
});

画像をホバーするとぐにゃっと歪んでいるかと思います。溶けかけのチョコレートのようですね。

チョコレートの画像でやってみると美味しそうかもしれません。