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

Question

It's like the blur is in never ending loop. This is what I've wrote so far, it's currently always blurring it up again and again, and I can't make it un-blur.

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

Answer 1

It will help to split the problem into smaller subproblems. (Kevin Workman's article is a great start)

The code you shared looks like you're trying to do two things at once:

1. map the mouse Y position to a blur value
2. apply the blur value to the blur filter

Let's start with mapping the value.

If you know what the minimum / maximum blur value you need you can make your life easier using Processing's map() function. It takes a value(mouseY in your case) and maps it from one range (mouseY's min/max range: 0 to height) to another range (blur's min/max value, let's say 0 to 6)

The mapping range above (from 0, height to 0, 6) is trivial because can simply divide height / 6 and get the mapped value, but map() is pretty useful and worth getting the hang of.

Here's a minimal mapping example:

void setup(){

}

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

The second part is applying the blur filter. The catch here is avoiding this situation:

currently always blurring it up again and again,

This happens because you apply the blur filter in draw() multiple times per second to the content, so each pass blurs further.

It sounds like what you want is to apply the blur filter to the initial state of your image or graphics. The code you posted doesn't show what is it that you're trying to blur.

If using graphics rendered in processing, one option is to simply clear everything (using background()) and redrawing the graphics before applying the filter. With the filter applied in draw and nothing cleared/redrawn the effect is reapplied to the same (pre blurred) content continously.

Let's take this basic example:

void setup(){

}

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

Notice that even draw we render a single tiny line, because the graphics aren't cleared (using background()) each tiny line accumulates to form a larger path.

Intuitively, adding blur will accumulate the effect:

void setup(){

}

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

Another option, if you'd rather be more efficient and re-render the same graphics in draw(), you can get an image copy of what's been rendered so far which you could render continuously.

Let's say you're drawing something in setup(). You can easily call get()(with no arguments) to get a "snapshot" of what's been drawn so far a PImage.

Once you have that you can simply render it again and again in draw() as it was drawn in setup() using image(). Once image() is called you can then call filter() with be applied to the global Processing graphics, meaning only what's rendered (while the snapshot PImage will remain intact).

Here's an example illustrating the above:

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); 
}

Your question doesn't specify, but if you are using PImage, then you need to apply blur to a copy of the image to avoid re-applying blur to an already blurred image. Here's a PImage tweaked version of the above:

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); 
}