本示例展示了如何让一张图片仅在鼠标周围显示图像，并且有羽化效果。
let img;
// 预加载背景图片
function preload() {
img = loadImage("https://sh-cdn-tos.aleshu.com/ickerlab_storages/userid_1/2023-08-03/1691067581_image.png");
}
function setup() {
createCanvas(710, 400);
pixelDensity(1);
}
function draw() {
image(img,0,0);
loadPixels();
img.loadPixels();
// 使用嵌套循环遍历图像
for (let x = 0; x < img.width; x++) {
for (let y = 0; y < img.height; y++ ) {
let r,g,b;
// img.pixels中图像的数据存储格式为：r,g,b,a，即红色、绿色、蓝色、透明度，因此想要获得图像红色通道中的数值，可以使用下方这个计算公式获得。
let loc = (x + y*img.width)*4;
r = img.pixels[loc];
// g = img.pixels[loc+1];
// b = img.pixels[loc+2];
// 我们想要实现的效果是：越接近鼠标的像素值，其亮度越高，并设置最大距离，超过最大距离就开始降低亮度，直至没有亮度
let maxdist = 50;
//dist函数可以计算两点之间的距离，x, y为当前循环到第几个像素，mouseX, mouseY为鼠标的坐标
let d = dist(x, y, mouseX, mouseY);
// 亮度计算公式（注意超过最大距离，这个值就是负数）：255为最亮的状态*（最大距离-像素到鼠标的距离）/最大距离
let adjustbrightness = 255*(maxdist-d)/maxdist;
// 将当前图像的颜色叠加上刚才计算出来的亮度值（离鼠标越近，就越亮）
r += adjustbrightness;
// 将像素值限制在0~255内，如果亮度超过最大距离，就会让adjustbrightness变成负值，r没有到0就会有虚化的效果，但是到0后，就代表当前像素点为黑色。
r = constrain(r, 0, 255);
// g = constrain(g, 0, 255);
// b = constrain(b, 0, 255);
// 重新设置对应pixels的值
let pixloc = (y*width + x)*4;
pixels[pixloc] = r;
pixels[pixloc+1] = r;
pixels[pixloc+2] = r;
pixels[pixloc+3] = 255;
}
}
updatePixels();
}
new p5();
