はじめに

今回は、以下の記事で初めて扱った「高速・手軽に画像処理を行える p5.FIP（Fast Image Processing）というライブラリ」の話です。

●p5.js で様々な画像処理を高速・手軽に行える p5.FIP（Fast Image Processing）を紹介したい！ - Qiita
　https://qiita.com/youtoy/items/2b670ea176d9b126ae0d

具体的には、「Deform」「Ripple」の 2つのフィルタの使い方に関する話です。

今回扱う「Deform」と「Ripple」を試してみたものを、最初に掲載しておきます。

この例では、カメラ映像に対してフィルタを適用したのですが、それぞれ、映像を歪めるような処理を行うことができました。

とりあえず試してみる

とりあえず「Deform」と「Ripple」を試してみるには、前回の記事でも紹介していた、以下の全フィルタの処理を含んでいる「All Filters」というサンプルを使うのが簡単かもしれません。

今回扱う、2つのフィルタの使い方を確認するには、公式のリファレンスの以下を見るのが良さそうです。

これらのページに、コードのサンプルも掲載されています。
基本的な使い方はわりと共通していますが、パラメータとして設定できる内容には違いがあります。

Deform のパラメータは、自分が変えられるものという点では、実質「deformationAmount」のみとなりそうです。

このパラメータで変えられる内容は、サイン波を使った処理での変形度合いという感じになるかと思います。

Ripple のパラメータで自分が変えられるものは「rippleFrequency」「rippleAmplitude」となりそうです。

これらのパラメータは、それぞれサイン関数を使って行う処理の振幅と周波数の大小を変化させるもののようでした。

手っ取り早く、リファレンスのサンプルを試す方法を紹介します。

具体的には、以下の「Glitch」のサンプルを開き、ソースコードを置きかえて実行するだけです。

コードを置きかえた後は、パラメータの数値を変えてみると、フィルタを適用した時の効果がよく分かって良いです。

以下、2つのフィルタのパラメータを少し変更して、実行してみた結果を掲載します。

このようなフィルタを比較的簡単に扱えるのは、 p5.FIP（Fast Image Processing）の大きなメリットだと思います。

余談になりますが、p5.FIP の公式ページを見ていて、「List of Resources」というページに書かれた内容が面白そうでした。

直接いろいろ書いてあるのではなく、他のリソースへのリンクなのですが、シェーダーや画像処理関連の面白そうな情報にたどり着けそうなものでした。

以下に、自分が気になったものを紹介してみます（単に列挙しただけ、になりますが）。

●Processing-Shader-Examples/TextureShaders/data at master · genekogan/Processing-Shader-Examples
　https://github.com/genekogan/Processing-Shader-Examples/tree/master/TextureShaders/data

●SableRaf/Filters4Processing: Useful GLSL filters adapted for Processing
　https://github.com/SableRaf/Filters4Processing

●Milchreis/processing-imageprocessing: Collection of basic image processing algorithms for processing
　https://github.com/Milchreis/processing-imageprocessing?tab=readme-ov-file

●LYGIA Shader Library
　https://lygia.xyz/
●patriciogonzalezvivo/lygia: LYGIA, it's a granular and multi-language (GLSL, HLSL, WGSL, MSL and CUDA) shader library designed for performance and flexibility
　https://github.com/patriciogonzalezvivo/lygia

こちら、p5.js Web Editor上で試せる p5.js用のサンプルもあるようでした。