p5.js | filter()函数

filter() 函数是 p5.js 库中一个十分有用的函数，它可以对图像进行滤镜处理。

语法

filter(filterType, [filterParam])

• filterType：字符串值，指定要使用的滤镜类型。常见的值包括 "THRESHOLD"（阈值），"GRAY"（灰度），"OPAQUE"（不透明），"INVERT"（反色），"POSTERIZE"（筛选）等。

• filterParam：数字值，指定要使用的滤镜参数。其意义与不同的滤镜类型有关。

示例

let img;

function preload() {
  img = loadImage('path/to/image.jpg');
}

function setup() {
  createCanvas(400, 400);
  imageMode(CENTER);
}

function draw() {
  background(220);
  image(img, width/2, height/2);
  filter('GRAY');
}

在这个示例中，我们先通过 preload() 函数预加载了一张图片，在 setup() 函数中创建了画布并设置图像的绘制模式，然后在 draw() 函数中先画出了图片，然后使用了 filter() 函数对图片进行了灰度处理。

滤镜类型

以下是一些常用的滤镜类型及其参数：

"GRAY"（灰度）

可以将彩色图像转换为灰度图像，这可以使图像在不影响其视觉效果的情况下减少其数据量。

filter('GRAY');

"THRESHOLD"（阈值）

可以将灰度图像转换为只有黑和白的图像，阈值参数应该是介于 0 到 1 之间的数字。

filter('THRESHOLD', 0.5);

"INVERT"（反色）

可以将图像中所有颜色的值都取反。

filter('INVERT');

"OPAQUE"（不透明）

可以使图像变得不透明。

filter('OPAQUE');

"POSTERIZE"（筛选）

可以使图像的色彩值只有几个离散的值，这可以使图像看起来更平面化。

filter('POSTERIZE', 3);

注意事项

• 滤镜效果是永久性的，如果需要多个滤镜效果的组合，可以先将图像渲染到一个图像缓冲区中，然后在对该缓存图像进行滤镜处理。

• 在 preload() 函数中加载图片的时候，应注意确保图片路径的正确性。

• 在 p5.js 中使用 filter() 函数时，应该确保程序的执行环境支持 WebGL，否则滤镜效果将无法生效。