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

Posted 2023-05-08

【中文标题】如何根据 mouseY 位置模糊/取消模糊图片 - 向下 - 模糊，向上 - 取消模糊

【英文标题】：How do I blur/unblur the picture according to the mouseY position - going down - blur, going up - unblur

【发布时间】：2021-12-11 19:11:22

【问题描述】：

这就像模糊是在永无止境的循环。 这是我目前为止写的，目前总是一次又一次地模糊，我无法让它变得模糊。

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

【问题讨论】：

什么？请详细说明。

我们需要更多信息。什么是“图”？您正在使用什么框架（如果有）。 nextY 这样的变量是什么意思？

@iDontKnowThis 希望您对已删除的问题有好运。 FWIW，你可以找到我的答案here

【参考方案1】：

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

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

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

让我们从映射值开始。

如果您知道所需的最小/最大模糊值，您可以使用 Processing 的 map() 函数让您的生活更轻松。它需要一个值（在您的情况下为mouseY）并将其从一个范围（mouseY 的最小/最大范围：0 到高度）映射到另一个范围（模糊的最小/最大值，比如说 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); 

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

目前总是一次又一次地模糊它，

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

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

如果使用处理中渲染的图形，一种选择是简单地清除所有内容（使用background()）并在应用过滤器之前重绘图形。在绘图中应用过滤器并且没有清除/重绘的情况下，效果会不断地重新应用于相同（预模糊）的内容。

让我们以这个基本示例为例：

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()（不带参数）来获取到目前为止绘制的“快照”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);