1
2
この記事誰得? 私しか得しないニッチな技術で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

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

Posted at

はじめに

今回は、以下の記事で初めて扱った「高速・手軽に画像処理を行える 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」を試してみたものを、最初に掲載しておきます。

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

とりあえず試してみる

とりあえず「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

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

Ripple のパラメータ

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

image.png

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

手っ取り早くリファレンスのサンプルを試す

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

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

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

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

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

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

image.png

image.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用のサンプルもあるようでした。

1
2
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
1
2