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

**URL:** <https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078>\
**Category:** Beginners\
**Created:** [June 19, 2018, 1:42pm UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078 "2018-06-19T13:42:15Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![redstevo](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@redstevo](https://discourse.processing.org/u/redstevo)\
**Post date:** [June 19, 2018, 1:42pm UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/1 "2018-06-19T13:42:15Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 20, 2018, 7:53am UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/2 "2018-06-20T07:53:24Z")

</div>

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

`filter()` [https://processing.org/reference/PImage\_filter\_.html](https://processing.org/reference/PImage_filter_.html) which has a blur parameter for the eye test.  
Hope this helps:-)

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [June 20, 2018, 8:36am UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/3 "2018-06-20T08:36:07Z")

</div>

```auto
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.

---

<div class="post-metadata">

**Author:** ![dan850](https://avatars.discourse-cdn.com/v4/letter/d/e9c0ed/32.png) [@dan850](https://discourse.processing.org/u/dan850)\
**Post date:** [June 20, 2018, 9:08am UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/4 "2018-06-20T09:08:50Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 21, 2018, 4:07pm UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/5 "2018-06-21T16:07:54Z")

</div>

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.

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/24892/frosted-glass-blurry-glass-on-processing)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

---

<div class="post-metadata">

**Author:** ![redstevo](https://avatars.discourse-cdn.com/v4/letter/r/3ab097/32.png) [@redstevo](https://discourse.processing.org/u/redstevo)\
**Post date:** [June 25, 2018, 8:54am UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/6 "2018-06-25T08:54:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kfrajer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kfrajer/32/196_2.png) [@kfrajer](https://discourse.processing.org/u/kfrajer)\
**Post date:** [June 27, 2018, 6:25am UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/7 "2018-06-27T06:25:17Z")

</div>

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](https://discourse.processing.org/t/how-to-do-this-kind-of-gradient-on-shapes/799)

Kf

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

```

---

<div class="post-metadata">

**Author:** ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)\
**Post date:** [December 1, 2022, 4:09pm UTC](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078/8 "2022-12-01T16:09:21Z")

</div>

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:

```auto
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;
  }
}

```