P5.js 日本語リファレンス(filter)

このページでは[「P5.js 日本語リファレンス」] (https://qiita.com/bit0101/items/91818244dc26c767a0fe) の filter関数を説明します。

filter()

説明文

フィルターをキャンバスに適用します。

プリセットオプションは次のとおりです。

• THRESHOLD
  levelパラメータで定義されたしきい値を超えるか下回るかに応じて、画像を白黒ピクセルに変換します。パラメータは0.0(黒)から1.0(白)の間でなければなりません。レベルを指定しない場合0.5が使用されます。

• GRAY
  画像内の色を同等のグレースケールに変換します。パラメータは使用されません。

• OPAQUE
  アルファチャネルを完全に不透明に設定します。パラメータは使用されません。

• INVERT
  各ピクセルをその逆の値に設定します。パラメータは使用されません。

• POSTERIZE
  画像の各チャネルをパラメータとして指定された色の数に制限します。パラメータは2〜255の値に設定できますが, 結果は低い範囲で最も顕著になります。

• BLUR
  ぼかしの範囲を指定するlevelパラメータでガウスぼかしを実行します。パラメータを使用しない場合、ぼかしは半径1のガウスぼかしに相当します。値が大きいほどぼかしが大きくなります。

• ERODE
  明るい領域を減らします。パラメータは使用されません。

• DILATE
  明るい領域を増やします。パラメータは使用されません。

filter() はWEBGLモードでは機能しません。カスタムシェーダーを使用してWEBGLモードで同様の効果を達成できます。 Adam Ferriss は, フィルターの例にある多くの効果を含むシェーダーサンプルを作成しました。

構文

filter(filterType, [filterParam])

パラメタ

• filterType
  定数：THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE, DILATE, またはBLURのいずれか。
  利用可能な各フィルターの詳細については Filters.js (p5.js-1.0.0\src\image\filters.js)を参照してください

• filterParam
  Number：各フィルターに固有のオプションのパラメータ。(オプション)

例1

let img;
function preload() {
  img = loadImage('assets/mountain.jpg');
}

function setup() {
  createCanvas(150, 800);

  // 上から1番目の画像: GRAY + BLUR + DILATE
  image(img, 0, 0, 150, 100);
  filter(GRAY);

  // 上から2番目の画像: BLUR + DILATE
  image(img, 0, 100, 150, 100);
  filter(BLUR, 4);

  // 上から3番目の画像: DILATE
  image(img, 0, 200, 150, 100);
  filter(DILATE);
  
  // 上から4番目の画像: フィルターなし
  image(img, 0, 300, 150, 100);

}

実行結果

著作権

p5.js was created by Lauren McCarthy and is developed by a community of collaborators, with support from the Processing Foundation and NYU ITP. Identity and graphic design by Jerel Johnson.

ライセンス

Creative Commons(CC BY-NC-SA 4.0) に従います。