p5.js で高速・手軽に画像処理を行える p5.FIP で歪みを加える画像フィルタ 2種（Deform・Ripple）の使い方と余談

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

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

具体的には、「[Deform](https://prontopablo.github.io/p5.FIP/deform.html)」「[Ripple](https://prontopablo.github.io/p5.FIP/ripple.html)」の 2つのフィルタの使い方に関する話です。

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

https://x.com/youtoy/status/1809474849091490228

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

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

●p5.js Web Editor | All Filters
　https://editor.p5js.org/prontopablo/sketches/2-UYUk2qP

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

●Deform - p5.FIP
　https://prontopablo.github.io/p5.FIP/deform.html

●Ripple - p5.FIP
　https://prontopablo.github.io/p5.FIP/ripple.html

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/b47bede9-9b12-5356-bd01-5a5eb87cee46.png)

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/c631fc2a-2029-1de0-64ff-24dd84c0911a.png)

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

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

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

●p5.js Web Editor | Glitch
　https://editor.p5js.org/prontopablo/sketches/YZDodModH

上記のサンプルは、処理に必要なライブラリ・画像がセットされているため、それを流用するのが楽です。
また、処理対象となっている画像ファイルが「[Deform](https://prontopablo.github.io/p5.FIP/deform.html)」「[Ripple](https://prontopablo.github.io/p5.FIP/ripple.html)」の 2つとも、上記と同じ「bird.jpg」になっているので、コードを置きかえるだけで動かすことができます。

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

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/a6e38bd7-9adf-694a-44df-b951f20539c1.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/fb93f7b3-d4e1-431b-1d8e-5ea9d22a93cd.png)

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

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

●List of Resources - p5.FIP
　https://prontopablo.github.io/p5.FIP/resources.html

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

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

### シェーダーのサンプル
●Processing-Shader-Examples/ColorShaders/data at master · genekogan/Processing-Shader-Examples
　https://github.com/genekogan/Processing-Shader-Examples/tree/master/ColorShaders/data

●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用のサンプル](https://editor.p5js.org/patriciogonzalezvivo/sketches)もあるようでした。