# How can I make a Boolean button, where I can click anywhere and an additional overlay will appear on top of my pattern?

**URL:** https://discourse.processing.org/t/how-can-i-make-a-boolean-button-where-i-can-click-anywhere-and-an-additional-overlay-will-appear-on-top-of-my-pattern/32821
**Category:** Coding Questions
**Created:** [October 14, 2021, 3:35am UTC](https://discourse.processing.org/t/how-can-i-make-a-boolean-button-where-i-can-click-anywhere-and-an-additional-overlay-will-appear-on-top-of-my-pattern/32821 "2021-10-14T03:35:56Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Anjiyuuki](https://avatars.discourse-cdn.com/v4/letter/a/9de053/32.png) [@Anjiyuuki](https://discourse.processing.org/u/Anjiyuuki)
#### Post date: [October 14, 2021, 3:35am UTC](https://discourse.processing.org/t/how-can-i-make-a-boolean-button-where-i-can-click-anywhere-and-an-additional-overlay-will-appear-on-top-of-my-pattern/32821/1 "2021-10-14T03:35:56Z")

</div>

> int x= 0;  
> int y= 0;  
> int ov =60;  
> boolean b= true;

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

if (b){  
for (x= 0; x\< width; x= x+ov) {  
for (y=0; y\< height; y=y+ov){

```
fill(random(255), random(0), random(0),50);
ellipse( x,y, ov, ov);
fill( random(100, 255), random (0), random (100, 255), 90);
ellipse( x, y, ov*.5, ov );
ellipse( x, y, ov, ov*.5 );

```

ellipse(x+30, y+30, 10,10);  
rect(x, y, 200, 1);  
rect(x, y, 1, 200);

}  
}  
} else { //false

```
for (x= 0; x< width; x= x+ov) {

```

for (y=0; y\< height; y=y+ov){

```
fill(random(0));
ellipse( x,y, ov, ov);
fill( random(100, 255), random (0), random (100, 255), 90);
ellipse( x, y, ov*.5, ov );
ellipse( x, y, ov, ov*.5 );

```

ellipse(x+30, y+30, 10,10);  
rect(x, y, 200, 1);  
rect(x, y, 1, 200);

}  
}  
}  
}

---

<div class="post-metadata">

### Author: ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [October 15, 2021, 5:58pm UTC](https://discourse.processing.org/t/how-can-i-make-a-boolean-button-where-i-can-click-anywhere-and-an-additional-overlay-will-appear-on-top-of-my-pattern/32821/2 "2021-10-15T17:58:24Z")

</div>

Hi,

Welcome to the forum! 😉

Make sure you correctly format your code with the `</>` button when editing a message on the forum. (tip: Press `Ctrl+T` in the Processing IDE to auto format your code)

Also please don’t put the content of your question in the title, it’s better to explain clearly your problem and add details in the body of your post.

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [October 15, 2021, 6:05pm UTC](https://discourse.processing.org/t/how-can-i-make-a-boolean-button-where-i-can-click-anywhere-and-an-additional-overlay-will-appear-on-top-of-my-pattern/32821/3 "2021-10-15T18:05:40Z")

</div>

There may be other ways of doing this, but one way is to create two images for the background: 1) BasePattern 2) BasePatternWithOverlay and then toggling them by using mousePressed.

```auto
PImage bg;
PImage bgOv;

int x= 0;
int y= 0;
int ov =60;

void setup(){
 size(500,500);
 drawBasePattern(); // creates image bg
 drawBasePatternWithOverlay(); // creates image bgOv
 bg = loadImage("base.jpg");
 bgOv = loadImage("baseWithOverlay.jpg");
}

void drawBasePattern(){
 for (x= 0; x< width; x= x+ov) {
  for (y=0; y< height; y=y+ov){
  fill(random(255), random(0), random(0),50);
  ellipse( x,y, ov, ov);
  fill( random(100, 255), random (0), random (100, 255), 90);
  ellipse( x, y, ov*.5, ov );
  ellipse( x, y, ov, ov*.5 );
  ellipse(x+30, y+30, 10,10);
  rect(x, y, 200, 1);
  rect(x, y, 1, 200);
  }
 }
 save("base.jpg");
}

void drawBasePatternWithOverlay() {
 for (x= 0; x< width; x= x+ov) {
  for (y=0; y< height; y=y+ov){
  fill(random(0));
  ellipse( x,y, ov, ov);
  fill( random(100, 255), random (0), random (100, 255), 90);
  ellipse( x, y, ov*.5, ov );
  ellipse( x, y, ov, ov*.5 );
  ellipse(x+30, y+30, 10,10);
  rect(x, y, 200, 1);
  rect(x, y, 1, 200);
  }
 }  
 for (x= 0; x< width; x= x+ov) {
  for (y=0; y< height; y=y+ov){
  fill(random(0));
  ellipse( x,y, ov, ov);
  fill( random(100, 255), random (0), random (100, 255), 90);
  ellipse( x, y, ov*.5, ov );
  ellipse( x, y, ov, ov*.5 );
  ellipse(x+30, y+30, 10,10);
  rect(x, y, 200, 1);
  rect(x, y, 1, 200);
  }
 }
 save("baseWithOverlay.jpg");
}

void draw() {
 if (mousePressed == true){
  background(bgOv);
 } else {
  background(bg);
 } 
}

```