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
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
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
nice work! i’m sure there are several ways to make this run smoother.
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
Thank you so much - lots to get into. Very much appreciated!
Steve
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);
}
This is what i am looking for and strugling to mashup with my skecth…
If you take the “esfera1600.jpg” off you will see behind . And is that what i need. Make the circle transparent to show behind the cover.
take a look in my sketch, please:
import processing.sound.*;
SoundFile soundfile;
PImage et;
PImage capa;
PImage img; //here
PImage txt;
PGraphics pg;
boolean overButton = false;
boolean backwards=false;
int timeLapse=400;
int timeTrack;
void setup() {
size(600, 600);
soundfile = new SoundFile(this, "fabX.mp3");
// Play the file in a loop
soundfile.loop();
/*
img = createImage(100, 100,0); // here
for (int i = 0; i < img.pixels.length; i++) { // here
float a = map(i, 0, img.pixels.length, 255, 0); //here
img.pixels[i] = color(0, 153, 204); //here
}
*/
pg = createGraphics(400, 400);
txt = loadImage("TextoTecFXpng.png");
et = loadImage("etFXpng.png"); // Load the image into the program
et.resize(258, 458);
capa = loadImage("esfera1600.jpg");
}
void draw() {
background(0); // total canva black
// rect flahing/blinking
int m = millis();
fill(m % 200); // velocity of flashs ** not working good ** maybe my computer..
rect(25, 25, 555, 555, 30);
image(et, 130, 125 );
image(txt, 50, 40);
image(capa,0, 0);
noFill();
stroke(255);
ellipse(mouseX, mouseY, 160, 160);
//pg.beginDraw();
//pg.background(0);
// pg.fill(255,255,255, 100);
// pg.noStroke();
pg.ellipse(mouseX-120, mouseY-160, 160, 160);
// pg.endDraw();
// Draw the offscreen buffer to the screen with image()
//image(pg, 220, 160);
// image(img, mouseX-img.width/2, mouseY-img.height/2); // here
//button link to web page
if (overButton == true) {
noStroke();
fill(74, 245, 243, 70);
} else {
noStroke();
noFill();
}
circle(260, 230, 30);
}
void mousePressed() {
if (overButton) {
link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK01y34_ouFkU5wpFW5HyE7");
}
}
void mouseMoved() {
checkButtons();
}
void mouseDragged() {
checkButtons();
}
void checkButtons() {
if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
overButton = true;
} else {
overButton = false;
}
}