# Add a "mask"/ "image" on top of these to work with a kind of cut out moving circle

**URL:** <https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928>\
**Category:** Libraries\
**Tags:** homework\
**Created:** [November 29, 2022, 7:47am UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928 "2022-11-29T07:47:44Z")\
**Posts on this page:** 7\
**Page:** 1

<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:** [November 29, 2022, 7:47am UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/1 "2022-11-29T07:47:44Z")

</div>

hi there, people…!  
I have been mixing lots of codes and learned a lot. Need to get more into the real codes, but its for another topic/time.  
I made this, and somethings is happenig, wich i have no ideia wy and how to fix it.

1- the big rect flash/blink got slower. Do not respond to the code as it does on others sketchs;  
2 - the Blur. I try to add it only on the text “Techno” and the image “ET”;  
3 - in the ET head has a dot when you pass the mouse in it, it appears. It has a link to some webpage. I dont no why the link do not go together when i tranfer to p5.js.  
Here is my link [https://vrtxart.github.io/p5-tutorial/](https://vrtxart.github.io/p5-tutorial/) ;

4 - i want to add a image that cover all of it with a circle “cutout” to show whats under the image. will send a exemple;

And here is the processing source code;

```auto
PImage et;

boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;

void setup() {
  size(600, 600);

  et = loadImage("et.png"); // Load the image into the program
  filter(BLUR, 6);
}

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, 0, 0 );
  textSize(128);
  fill(0, 408, 612, 816);

  //text

  text("Techno", 100, 150, -120);
  filter(BLUR, 6);

  //button link to web page

  if (overButton == true) {
    noStroke();
    fill(74, 245, 243, 70);
  } else {
    noStroke();
    noFill();
  }

  circle(267, 290, 30);
}
void mousePressed() {
  if (overButton) {
    link("https://web.facebook.com/groups/378940129825776");
  }
}
void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX < 500 && mouseY > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

and here is my github;

[https://github.com/VrtXArt/p5-tutorial.git](https://github.com/VrtXArt/p5-tutorial.git)

I saw an example in another topic and then I applied what I’ve been learning. Here is the link;  
[the circle that show what’s underneath](https://discourse.processing.org/t/using-mask-to-reveal-background-image/25528)

The image that i will add on top of everything any, but here ir goes one;

 ![Captura de tela 2022-01-04 220056](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/2/a/2ad7eddcc052a8c269d2aeade443ae0cbd957958.jpeg)  
 ![Captura de tela 2022-11-25 200013](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/9/0/90369e254fe7441bcdc0dd3302f878cd686f2e42.jpeg)  
 ![et recortado](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/0/6/06ef5503389b09008f69728790e2e36a50ba23eb.png)

thank you

---

<div class="post-metadata">

**Author:** ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)\
**Post date:** [November 29, 2022, 6:32pm UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/2 "2022-11-29T18:32:33Z")

</div>

> **[Alpha Mask / Examples](https://processing.org/examples/alphamask.html)**
>
> Loads a "mask" for an image to specify the transparency in different parts of the image. The two images are blended together using the mask() method of PImage.

Hello @vrtx  
Above is an example on how to add a mask to your sketch!  
🤓

---

<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:** [November 29, 2022, 11:03pm UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/3 "2022-11-29T23:03:05Z")

</div>

the square in the image should be the other way around. Also, I don’t understand where it says this is a square when I’m trying to make a circle.  
There would be an image on top of everything, and the transparent circle showing the image behind it…

```auto
PImage et;

PImage img; //here

boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

PShader blur;

void setup() {
  size(600, 600);

  img = createImage(100, 100, ARGB); // 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
  }

  et = loadImage("et.png"); // Load the image into the program
  filter(BLUR, 6);
}

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, 0, 0 );
  textSize(128);
  fill(0, 408, 612, 816);

  //text

  text("Techno", 100, 150, -120);
  filter(BLUR, 6);

  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(267, 290, 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;
  }
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [November 30, 2022, 12:57am UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/4 "2022-11-30T00:57:37Z")

</div>

Hello @vrtx,

Here is a _ **static** _ sketch that shows masking:

```auto
// Masking
// v1.0.0
// GLV 2022-11-29

PImage img1, img2;
PGraphics pg;

size(300, 300);

img1 = loadImage("http://learningprocessing.com/code/assets/sunflower.jpg"); // Load the image into the program 
img1.resize(300, 300);

img2 = loadImage("https://processing.org/img/processing-web.png");
img2.resize(300, 300);

pg = createGraphics(300, 300);

pg.beginDraw();
pg.background(0);
pg.noStroke();
pg.fill(0, 0, 255); // Look this up in the references!
pg.circle(width/3, height/3, 100); // Try this with mouseX and mouseY!
pg.endDraw();

// The "pg image" is masking the "img1 image"
img1.mask(pg); //Look this up in the references!

background(128, 255, 0);
image(img2, 0, 0); 
image(img1, 0, 0);    

```

Try integrating this into an _ **active** _ sketch with `setup()` and `draw()`.

Have fun!

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/d/6dd06b2286c2c7bc8877afa5cc118eb0d5931599.png)

`:)`

---

<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, 2:44pm UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/5 "2022-12-01T14:44:24Z")

</div>

@glv … lots of fun… goshh… hours … non stoping…But,i did learned a lot… tks.  
Here it goes my last sketch, till now. in Java Prodessing;  
The cover is there on top of everything, music, buttom embebbed with a link.  
New images that was taking time to run the project. So i worked them outside and put together again.  
Its light, appears… when i do translate to p5js…  
By now, i must make the circle be a cutout, to see whats behind…  
I mashed up lots of exemples in so many ways.  
here i am for now…  
If you take the “esfera1600.jpg” out, you will see behind … looks preatty cool lol

```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);
  
  
    pg.beginDraw();
  pg.background(0);
   pg.fill(255,255,255, 100);
   pg.noStroke();
  pg.ellipse(mouseX-120, mouseY-160, 160, 160);
   pg.endDraw();
  
  
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(capa,0, 0);
  noFill();
  stroke(255);
  ellipse(mouseX, mouseY, 160, 160);

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

```

---

<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:01pm UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/6 "2022-12-01T16:01:41Z")

</div>

ok guys, i found what i am looking for. Here in this forum…  
Strugling to add this, on my project…

Here is what i found;

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

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

```

Now the focus is how to join them, like, what i have to take off from one and other leaving the basics, the fundamental things/ideias of my on project/sketch there.  
I am almos there!!!  
Take a look on my last skecth above… Seems it is easy, like, only make the circle transparent to show whats is behind.  
But i seeing the last example i got totally confused… …  
Keeping on!!!

---

<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:** [January 4, 2023, 3:42am UTC](https://discourse.processing.org/t/add-a-mask-image-on-top-of-these-to-work-with-a-kind-of-cut-out-moving-circle/39928/7 "2023-01-04T03:42:30Z")

</div>

@glv Hi there.  
I got the code, but i have being trying to put the image “capa” in front of everything and the circle not to get the blur effect.  
This is what i got…

```auto
import processing.sound.*;

import processing.sound.*;

SoundFile soundfile0,
  soundfile1,
  soundfile2,
  soundfile3;
PImage capa;
PGraphics pg;

PImage et;
float opacity = 0;
PImage img;
PImage txt;
PImage trc;
boolean overButton = false;

boolean backwards=false;
int timeLapse=400;
int timeTrack;

//botoes
int value1 = 0;
int value2 = 0;
int value3 = 0;
int value4 = 0;

void setup() {
  size(600, 600);

  soundfile0 = new SoundFile(this, "fabFX.mp3");
  soundfile1 = new SoundFile(this, "Data2.mp3");
  soundfile2 = new SoundFile(this, "Data.mp3");
  soundfile3 = new SoundFile(this, "pulse.wav");

  //images

  capa = loadImage("capapng.png");
  capa.resize(600, 600);
  trc = loadImage("Trance3png.png");
  txt = loadImage("TextoTecFXpng.png");
  et = loadImage("etFXpng.png"); // Load the image into the program
  et.resize(258, 458);
}

void draw() {

  background(0); // total canva black

  pg = createGraphics(600, 600);

  pg.beginDraw();
  pg.background(0);
  pg.stroke(255);
  pg.fill(0, 0, 255); // Look this up in the references!
  pg.circle(mouseX-1, mouseY-55, 195); // Try this with mouseX and mouseY!
  pg.endDraw();
  capa.mask(pg); //Look this up in the references!

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

 
  //rgb
  tint(20, 17, 247, 100); // Alpha to 102 without changing the tin
  image(et, 140, 125 );
  tint(255, 0, 0, 80); // Tint to yellow, alpha to 153
  image(et, 120, 125 );

  //opacity
  if (opacity < 255) { // When less than the maximum,
    opacity += 0.5; // increase opacity
  }

  tint(255, opacity);
  image(et, 130, 125 );
  image(txt, 50, 40);
  image(trc, 85, 130);

  //buttons draws

  fill(value1);
  rect(500, 200, 50, 50, 30);
  fill(value2);
  rect(500, 300, 50, 50, 30);
  fill(value3);
  rect(500, 400, 50, 50, 30);
  fill(value4);
  rect(500, 500, 50, 50, 30);

  /*
  //ciercle flow with mouse
   noFill();
   stroke(255);
   ellipse(mouseX, mouseY-55, 200, 200);
   */

  //button link to web page
  if (overButton == true) {
    int m4 = millis();
    fill(m4 % 150);
    ellipse(260, 230, 30, 0);
    cursor(CROSS);
  } else {
    noStroke();
    noFill();
    cursor(HAND);
  }

 image(capa, 0, 0);

}

void mouseReleased() {

  loop();

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 200)&(mouseY <= 230)) {

    //song.play();

    if (soundfile0.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile0.stop();
    } else {
      soundfile0.play();
    }

    if (value1 == 255) {
      value1 = 0;
    } else {
      value1 = 255;
    }

    println("btn1 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 300)&(mouseY <= 330)) {

    //song.play();

    if (soundfile1.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile1.stop();
    } else {
      soundfile1.play();
    }

    if (value2 == 255) {
      value2 = 0;
    } else {
      value2 = 255;
    }
    println("btn2 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 400)&(mouseY <= 430)) {
    //soundfile2.play();
    //song.play();

    if (soundfile2.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile2.stop();
    } else {
      soundfile2.play();
    }

    if (value3 == 255) {
      value3 = 0;
    } else {
      value3 = 255;
    }
    println("btn3 hit.");
  }

  if ((mouseX >= 500)&&(mouseX <= 550)&&(mouseY >= 500)&(mouseY <= 530)) {
    // soundfile3.play();

    //song.play();

    if (soundfile3.isPlaying()) {
      // .isPlaying() returns a boolean
      soundfile3.stop();
    } else {
      soundfile3.play();
    }

    if (value4 == 255) {
      value4 = 0;
    } else {
      value4 = 255;
    }
    println("btn4 hit.");
  }
}
void mousePressed() {
  if (overButton) {
    link("https://www.youtube.com/playlist?list=PL087855B0290C2154");
    link("https://www.youtube.com/playlist?list=PLLfjXK0h5ZJK3aWfOtz0-wEpL6fkvZiBB");
  }
}

void mouseMoved() {
  checkButtons();
}

void mouseDragged() {
  checkButtons();
}

void checkButtons() {
  if (mouseX > 200 && mouseX-40 < 300 && mouseY+35 > 200 && mouseY <300) {
    overButton = true;
  } else {
    overButton = false;
  }
}

```

It is the other wayround…