如何根据鼠标Y轴位置控制图片模糊度：下移模糊上移取消模糊并修复循环问题

• filter(BLUR)属于叠加效果，每调用一次都会在当前画布基础上新增一层模糊，不会重置之前添加的模糊效果，因此模糊程度只会不断叠加，无法反向降低。
• 现有blurRate计算逻辑存在数学错误：将nextY = mouseY - blurRate代入blurRate = nextY - mouseY可推导得出blurRate = -blurRate，数值只会在正负值之间反复跳动，无法和鼠标Y轴位置形成正确的关联关系。

核心逻辑是每帧先重置画布内容，再根据当前鼠标Y轴位置计算对应模糊度并单次应用，避免模糊叠加：

PImage targetImg;
// setup阶段加载原始资源
void setup() {
  size(800, 600);
  // 替换为你的图片路径
  targetImg = loadImage("test.jpg");
}

void draw() {
  // 每帧先重绘原始图片，清空之前的模糊效果
  image(targetImg, 0, 0, width, height);
  // 将鼠标Y轴坐标映射为模糊值：鼠标在窗口顶部时模糊为0，底部时模糊为10，可自行调整最大模糊值
  float blurRate = map(mouseY, 0, height, 0, 10);
  // 限制模糊值最小为0，避免负参数报错
  blurRate = max(blurRate, 0);
  // 单次应用对应程度的模糊
  filter(BLUR, blurRate);
}

如果你的绘制内容是矢量图形而非图片，把image()替换为每帧先调用background()清屏再重绘所有矢量内容即可。

内容的提问来源于stack exchange，提问作者iDontKnowThis