# 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:** 1
**Showing post:** 7

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

```

---

_[View the full topic](https://discourse.processing.org/t/first-project-moving-a-transparent-circle-over-a-semi-opaque-background-with-an-image-behind/1078)._