p5.js | filter()函数

filter()函数用于将过滤器应用于画布。 p5.js 有几个预设，可以使用不同的强度级别来获得所需的效果。
句法：

filter( filterType, filterParam)

参数：此函数接受上面提到的两个参数，如下所述：

• filterType：它是常量，定义了要用作过滤器的预设。它可以具有以下值：
  • THRESHOLD：此模式用于根据可选级别参数中定义的阈值将图像转换为黑白。级别值 0.0 意味着图像将是完全黑色的，值 1.0 意味着图像将是白色的。如果未指定值，则使用 0.5。
  • 灰色：此模式将图像中的所有颜色转换为等效灰度。此预设不使用可选参数。
  • 不透明：此模式将图像的 Alpha 通道设置为完全不透明。此预设不使用可选参数。
  • 反转：此模式反转图像中的每个像素。此预设不使用可选参数。
  • POSTERIZE：此模式将图像的每个通道限制为值中指定的颜色数。可选参数可以设置在 2 到 255 的范围内，在较低的颜色范围内效果最明显。
  • BLUR：此模式对图像应用高斯模糊。可选参数用于指定模糊的强度。如果未指定参数，则应用半径为 1 米的高斯模糊。
  • ERODE：此模式会减少光照区域。此预设不使用可选参数。
  • DILATE：此模式会增加光照区域。此预设不使用可选参数。
• filterParam：它是每个过滤器唯一的数字，会影响过滤器的功能。它是一个可选参数。

以下示例说明了 p5.js 中的filter()函数：
示例 1：

javascript

function preload() {
  img = loadImage("sample-image.png");
}
 
function setup() {
  filterModes = [
    GRAY,
    OPAQUE,
    INVERT,
    POSTERIZE,
    BLUR,
    ERODE,
    DILATE,
    BLUR,
    THRESHOLD
  ];
 
  index = 0;
  currFilterMode = filterModes[index];
 
  createCanvas(500, 300);
  textSize(20);
 
  btn = createButton("Change filter");
  btn.position(30, 200);
  btn.mousePressed(changeFilter);
}
 
function draw() {
  clear();
 
  text('Click on the button to change the filter mode', 20, 20);
  text("Current filter: " + currFilterMode, 20, 50);
 
  image(img, 20, 80);
 
  // Set the filter
  filter(currFilterMode);
}
 
function changeFilter() {
  if (index < filterModes.length - 1)
    index++;
  else
    index = 0;
  currFilterMode = filterModes[index];
 
  console.log("Current filter: " + currFilterMode);
}

输出：

示例 2：

javascript

let level = 0;
 
function preload() {
  img = loadImage("sample-image.png");
}
 
function setup() {
  createCanvas(500, 300);
  textSize(20);
 
  valueSlider = createSlider(0, 3, 0, 0.1);
  valueSlider.position(30, 200);
  valueSlider.input(changeLevel);
}
 
function draw() {
  clear();
 
  text('Move the slider to change the blur radius', 20, 20);
  text("Current radius: " + level + "m", 20, 50);
 
  image(img, 20, 80);
 
  // Set the filter
  filter(BLUR, level);
}
 
function changeLevel() {
  level = valueSlider.value();
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5/filter