图像的处理方式有很多种，我们将在后续的案例中分别学习到：模糊、边缘检测、调整亮度、对比度等。
我们先来看一下模糊处理得案例：
// 我们考虑使用一个3*3的矩阵来对图像进行归一化处理，这里注意：9个v加在一起为1
let v = 1.0 / 9.0;
let kernel = [[ v, v, v ], [ v, v, v ], [ v, v, v ]];
// preload()函数已经出现过几次了，它的作用就是将一些操作先于setup()函数执行之前完成，如果你将loadImage放在setup()函数中执行，那很有可能在执行draw()函数的时候，图片依旧没有加载好，因此会导致无法对图像进行操作。
function preload() {
img = loadImage("https://sh-cdn-tos.aleshu.com/ickerlab_storages/userid_1/2023-08-02/1690964972_image.png");
}
function setup() {
// 画布：710*400
createCanvas(710, 400);
noLoop();
}
function draw() {
// 画布左侧固定一张图片
image(img, 0, 0);
// 若要对图像进行处理，我们会创建图像，并使用loadPixels函数操作。
edgeImg = createImage(img.width, img.height);
edgeImg.loadPixels();
// 对整个图像进行遍历（嵌套循环可以遍历图像）
for (let x = 1; x < img.width; x++) {
for (let y = 1; y < img.height; y++) {
let sum = 0;
// 对当前像素点再次进行循环遍历，从而获取其周围3*3大小的一个矩阵
for (kx = -1; kx <= 1; kx++) {
for (ky = -1; ky <= 1; ky++) {
let xpos = x + kx;
let ypos = y + ky;
// 如果我们的图片是灰度图，那么RGB三通道的颜色值都是一样的
let val = red(img.get(xpos, ypos));
// 注意：全局变量kernel的9个元素加在一起为1，我们利用这个思路，将图像当前点周围的像素值也都取1/9，再叠加在一起。
sum += kernel[kx+1][ky+1] * val;
}
}
// 将计算所得的颜色值赋予创建图像对应的点位上
edgeImg.set(x, y, color(sum));
}
}
// 注意：使用了set函数后，一定要更新pixels
edgeImg.updatePixels();
// 将新图片定位在画布右侧。
image(edgeImg, img.width, 0);
}
new p5();
