我如何blur/unblur图片根据mouseY位置-向下-模糊，向上-取消模糊

Question

就好像模糊在永无止境的循环中。到现在就写到这里了，目前一直在反复模糊，没办法解模糊。

void draw() {   
  filter(BLUR, blurRate/60);
  nextY = mouseY-blurRate;
  blurRate= nextY-mouseY;
}

Answer 1

这将有助于将问题拆分成更小的子问题。（Kevin Workman's article 是一个很好的开始）

您共享的代码看起来像是您试图同时做两件事：

将鼠标 Y 位置映射到模糊值
将模糊值应用于模糊滤镜

让我们从映射值开始。

如果您知道您需要的最小/最大模糊值，您可以使用 Processing 的 map() 功能让您的生活更轻松。它需要一个值（mouseY 在你的情况下）并将其从一个范围（mouseY 的 min/max 范围：0 到高度）映射到另一个范围（模糊的 min/max 值, 假设 0 到 6)

上面的映射范围（从 0, height 到 0, 6）很简单，因为可以简单地除以 height / 6 并得到映射值，但是 map() 非常有用，值得掌握。

这是一个最小的映射示例：

void setup(){

}

void draw(){
  float blurValue = map(mouseY, 0, height, 0, 6);
  background(0);
  text("blurValue: " + blurValue, 5, height / 2); 
}

第二部分是应用模糊滤镜。这里的问题是避免这种情况：

currently always blurring it up again and again,

发生这种情况是因为您每秒 draw() 多次对内容应用模糊滤镜，因此每次通过都会进一步模糊。

听起来您想要的是将模糊滤镜应用于图像或图形的初始状态。您发布的代码没有显示您试图模糊的内容。

如果使用在处理中呈现的图形，一种选择是简单地清除所有内容（使用 background()）并在应用过滤器之前重新绘制图形。在 draw 中应用滤镜并且什么都不应用 cleared/redrawn 效果会连续重新应用到相同的（预先模糊的）内容。

让我们来看这个基本的例子：

void setup(){

}

void draw(){
  line(mouseX, mouseY, pmouseX, pmouseY);
}

请注意，即使绘制我们也会渲染一条细线，因为图形没有被清除（使用 background()），每条细线累积形成一条更大的路径。

直观上，添加模糊会累积效果：

void setup(){

}

void draw(){
  line(mouseX, mouseY, pmouseX, pmouseY);
  filter(BLUR, 0.6);
}

另一种选择，如果您希望更高效并在 draw() 中重新渲染相同的图形，您可以获得到目前为止已渲染内容的图像副本，您可以连续渲染。

假设您正在 setup() 中画一些东西。您可以轻松调用 get()(with no arguments) to get a "snapshot" of what's been drawn so far a PImage.

一旦你有了它，你就可以简单地在 draw() 中一次又一次地渲染它，就像它在 setup() 中使用 image() 绘制的那样。一旦 image() 被调用，您就可以调用 filter() 并应用于全局处理图形，这意味着仅渲染的内容（而快照 PImage 将保持不变）。

下面是一个说明上述内容的示例：

PImage snapshot;

void setup(){
  // draw something
  background(0);
  noFill();
  strokeWeight(3);
  for(int i = 0 ; i < 100; i++){
    stroke(random(32, 128));
    float size = random(3, 27);
    ellipse(random(width), random(height), size, size);
  }
  // take a snapshot of the current graphics
  snapshot = get();
}

void draw(){
  float blurValue = map(mouseY, 0, height, 0, 6);
  // render the image snapshot
  image(snapshot, 0, 0);
  // blur it
  filter(BLUR, blurValue);
  // display blur value (should be unblurred)
  text("blurValue: " + blurValue, 5, height / 2); 
}

您的问题没有具体说明，但如果您使用的是 PImage，那么您需要对图像的副本应用模糊，以避免对已经模糊的图像重新应用模糊。这是上面的 PImage 调整版本：

PImage snapshot;

void setup(){
  // draw something
  background(0);
  noFill();
  strokeWeight(3);
  for(int i = 0 ; i < 100; i++){
    stroke(random(32, 128));
    float size = random(3, 27);
    ellipse(random(width), random(height), size, size);
  }
  // take a snapshot of the current graphics
  snapshot = get();
}

void draw(){
  float blurValue = map(mouseY, 0, height, 0, 6);
  // clone the original image via get()
  PImage blurredImage = snapshot.get();
  // blur the cloned image
  blurredImage.filter(BLUR, blurValue);
  // display the blurred image
  image(blurredImage, 0, 0);
  // display blur value (should be unblurred)
  text("blurValue: " + blurValue, 5, height / 2); 
}

我如何blur/unblur图片根据mouseY位置-向下-模糊，向上-取消模糊

How do I blur/unblur the picture according to the mouseY position - going down - blur, going up - unblur

processing

blur

mousemove