First project - moving a transparent circle over a semi opaque background with an image behind

Processing Beginners
#1

Hi all, First post - I’ve been tasked with making a model to recreate a tunnel vision experience for someone - the model I’ve been given is using an old eye test list of letters and mimicking the inability to scan the lines of letters by making them blurred except for a small circle of clear vision which is the experience being demonstrated. So I need a background image of the eye test, a semi opaque layer or similar to simulate the blurriness, and a circle that cuts through that layer to show a small area of clear text. The circle must move around to mimic someone changing focus. Is this something Processing can do and is there a working example that could help in constructing this?
Steve

1 Like
#2

Hi, You might want to use the PImage method, blend()https://processing.org/reference/PImage.html
or

filter() https://processing.org/reference/PImage_filter_.html which has a blur parameter for the eye test.
Hope this helps:-)

1 Like
#3 
PImage img, img2;
PGraphics msk;

void setup() {
  size(600, 600);
  msk = createGraphics(width, height);
  background(100, 0, 0);
  noStroke();
  for ( int t = 0; t < 100; t++) {
    fill(random(200), random(200), random(200));
    rect( random(width-20), random(height-20), 20, 20);
  }
  img = get();
}

void draw() {
  msk.beginDraw();
  msk.background(0);
  msk.fill(255);
  msk.ellipse(mouseX, mouseY, 80, 80);
  msk.endDraw();
  background(img);
  img2 = get();
  filter(BLUR, 7);
  img2.mask(msk);
  image( img2, 0, 0);
  noFill();
  stroke(0);
  ellipse(mouseX, mouseY, 80, 80);
}

There’s probably a bunch of ways to optimize this.

1 Like
#4

nice work! i’m sure there are several ways to make this run smoother.

#5

Possibly relevant: a past related discussion about a “frosted glass” approach – which could be drawn once with a PImage or done with a PShader. That example was a rectangle, but you could punch a hole out of it.

1 Like
#6

Thank you so much - lots to get into. Very much appreciated!
Steve

#7

Using Thomas approach with koogs’ suggestion. Calling filter() in draw() is expensive.

@dan850 How would you use blend() to get this effect?

This post is relevant: How to do this kind of gradient on shapes

Kf

final int RAD=80;

PImage img, img2, imgBlur;
PGraphics msk;

void setup() {
  size(600, 600);
  msk = createGraphics(width, height);
  background(100, 0, 0);
  noStroke();
  for ( int t = 0; t < 100; t++) {
    fill(random(200), random(200), random(200));
    rect( random(width-20), random(height-20), 20, 20);
  }
  img = get();
  
  imgBlur = img.get();
  imgBlur.filter(BLUR, 7);
}

void draw() {
  msk.beginDraw();
  msk.background(255);
  msk.fill(0);
  msk.ellipse(mouseX, mouseY, RAD,RAD);
  msk.endDraw();
  background(img);
  
  img2 = imgBlur.get();;
  img2.mask(msk);
  
  image( img2, 0, 0);
  noFill();
  stroke(0);
  ellipse(mouseX, mouseY, RAD,RAD);
}