P5.js 图片完整参考

P5.js 是一个流行的处理图形和交互的 JavaScript 库。在这个参考指南中，我们将详细介绍如何在 P5.js 中处理图片和图像。

加载图片

在 P5.js 中加载图片很简单。使用 loadImage() 函数来加载一张图片，并将其存储在一个 P5.Image 对象中。例如，如下代码将加载位于 assets/ 文件夹下的 cat.jpg 图片：

let catImage;

function preload() {
  catImage = loadImage('assets/cat.jpg');
}

function setup() {
  createCanvas(400, 400);
  image(catImage, 0, 0);
}

在这个例子中，我们使用 preload() 函数来预加载图片。如果不使用 preload() 函数，图片可能需要等待加载完成之后才能在画布上显示。

显示图片

要在画布上显示图片，使用 image() 函数。例如，如下代码将位于 (x, y) 坐标处的 catImage 图片显示在画布上：

image(catImage, x, y);

image() 函数除了必须传入图片之外，还可以传入新的宽度和高度，使图片缩放或拉伸。例如，如下代码将 catImage 缩放为宽度 100 像素，高度自动等比例缩放：

image(catImage, x, y, 100, 0);

图片滤镜

P5.js 中提供了一组基本的图片滤镜，可以通过 filter() 函数应用到图片上。例如，如下代码将 catImage 应用灰度滤镜：

filter(GRAY);
image(catImage, 0, 0);

filter() 函数可以接受多个参数，并且可以根据需要叠加滤镜。例如，如下代码将 catImage 应用高斯模糊和灰度滤镜：

filter(BLUR, 3);
filter(GRAY);
image(catImage, 0, 0);

图片处理

除了滤镜之外，P5.js 还提供了一组用于处理图片和图像的函数。例如，如下代码将 catImage 应用边缘检测滤镜，并在画布上显示边缘检测后的图片：

let edgeImage;

function setup() {
  createCanvas(400, 400);
  edgeImage = createImage(catImage.width, catImage.height);
  edgeImage.loadPixels();
  catImage.loadPixels();
  for (let i = 0; i < catImage.width; i++) {
    for (let j = 0; j < catImage.height; j++) {
      let index = (i + j * catImage.width) * 4;
      let r = catImage.pixels[index];
      let g = catImage.pixels[index + 1];
      let b = catImage.pixels[index + 2];
      let gray = (r + g + b) / 3;
      edgeImage.set(i, j, color(gray, gray, gray));
    }
  }
  edgeImage.updatePixels();
  edgeImage.filter(ERODE);
  edgeImage.filter(DILATE);
  image(edgeImage, 0, 0);
}

在这个例子中，我们首先创建一个新的 P5.Image 对象 edgeImage，并使用 createImage() 函数指定其宽度和高度。然后，我们使用 loadPixels() 函数来获取 catImage 的像素数据，并使用 set() 函数将灰度图像写入 edgeImage 对象。这里我们使用灰度图像作为边缘检测器，因为它可以更容易地检测出与周围像素不同的区域。最后，我们使用 ERODE 和 DILATE 滤镜对图像进行一些处理，以产生更突出的效果。