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