# 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:** 3

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

---

_[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)._