I'm a beginner to Processing and am creating a simple program that allows the user to overlay simple filters (such as black & white, invert etc.) onto an image.

I have created the code and have made it work for one image, but either:

A. The code allows the user to select any of the filters randomly, and the image only shows that filter but the code only works with that specific image.
or
B. The filters 'pile up' on top of each other so that they cannot be 'reset' but have the code work with any image.

(I apologise if that doesn't make sense, this is all very new to me!).

I have posted the code below, currently set up for B.
How do I allow the user to (like in A) select any filter and view the results but also allow for multiple images to be used?

Thanks,

Niall

NB: The image can be replaced with any example you may have, it shouldn't effect the GUI elements etc.

----

PImage img;
int dimension;

void setup(){
 
  img = loadImage("Prince of Cats.jpg");
  dimension = img.width*img.height;
 
  size(img.width,img.height+80);
  img.loadPixels();
} 

void draw(){
 
  image(img, 0, 40);
 
  colorMode(HSB,360,100,255);
 
  smooth();
 
  // TOP RECTANGLE W/ GRADIENT
 
  rectMode(CENTER);
  noStroke();
  fill(50);
  rect(img.width/2, 20, img.width, 40);
  fill(54);
  rect(img.width/2, 20, img.width, 36);
  fill(58);
  rect(img.width/2, 20, img.width, 32);
  fill(62);
  rect(img.width/2, 20, img.width, 28);
  fill(66);
  rect(img.width/2, 20, img.width, 24);
  fill(70);
  rect(img.width/2, 20, img.width, 20);
  fill(74);
  rect(img.width/2, 20, img.width, 16);
  fill(78);
  rect(img.width/2, 20, img.width, 12);
  fill(82);
  rect(img.width/2, 20, img.width, 8);
 
 
  // BOTTOM RECTANGLE W/ GRADIENT
 
 
  rectMode(CENTER);
  noStroke();
  fill(30);
  rect(img.width, img.height+40, img.width*2, 80);
  fill(34);
  rect(img.width, img.height+40, img.width*2, 76);
  fill(38);
  rect(img.width, img.height+40, img.width*2, 72);
  fill(42);
  rect(img.width, img.height+40, img.width*2, 68);
  fill(46);
  rect(img.width, img.height+40, img.width*2, 64);
  fill(50);
  rect(img.width, img.height+40, img.width*2, 60);
  fill(54);
  rect(img.width, img.height+40, img.width*2, 56);
  fill(58);
  rect(img.width, img.height+40, img.width*2, 52);
  fill(62);
  rect(img.width, img.height+40, img.width*2, 48);
  fill(66);
  rect(img.width, img.height+40, img.width*2, 44);
  fill(70);
  rect(img.width, img.height+40, img.width*2, 40);
  fill(74);
  rect(img.width, img.height+40, img.width*2, 36);
  fill(78);
  rect(img.width, img.height+40, img.width*2, 32);
  fill(82);
  rect(img.width, img.height+40, img.width*2, 28);
  fill(86);
  rect(img.width, img.height+40, img.width*2, 24);
  fill(90);
  rect(img.width, img.height+40, img.width*2, 20);
  fill(88);
  rect(img.width, img.height+40, img.width*2, 20);
 
 
  // SEPARATORS
 
  // TOP
 
  rectMode(CENTER);
  noStroke();
  fill(0,0,200);
  rect(img.width/2-img.width/2+4, img.height+40, 2, 65, 1);
 
  rectMode(CENTER);
  noStroke();
  fill(0,0,200);
  rect(img.width-5, img.height+40, 2, 65, 1);
 
  // BOTTOM
 
  rectMode(CENTER);
  noStroke();
  fill(0,0,200);
  rect(img.width/2-img.width/2+4, img.height-img.height+20, 2, 31, 1);
 
  rectMode(CENTER);
  noStroke();
  fill(0,0,200);
  rect(img.width/2+img.width/2-4, img.height-img.height+20, 2, 31, 1);
  
 
  // BUTTON GRAPHICS
 
 
  ellipseMode(CENTER);
  stroke(0);
  strokeWeight(2);
  fill(200,100,250);
  ellipse(img.width/2-105, img.height+30, 30, 30);
  fill(200,100,200);
  ellipse(img.width/2-40, img.height+30, 30, 30);
  fill(200,100,150);
  ellipse(img.width/2+30, img.height+30, 30, 30);
  fill(200,100,100);
  ellipse(img.width/2+95, img.height+30, 30, 30);
 
 
  // BUTTON LABELS 
 
  textSize(20);
  fill(0,0,255);
  text("Simple Filter Gallery", img.width/2-92, img.height-img.height+28);
 
  textSize(20);
  fill(0,0,255);
  text("1", img.width/2-110, img.height+37);
  text("2", img.width/2-45, img.height+37);
  text("3", img.width/2+25, img.height+37);
  text("4", img.width/2+88, img.height+37);
 
  textSize(14);
  fill(0,0,255);
  text("Original", img.width/2-130, img.height+60);
  text("B&W", img.width/2-55, img.height+60);
  text("Threshold", img.width/2-3, img.height+60);
  text("Invert", img.width/2+77, img.height+60);
 
}

void mousePressed() {
 
int button_onex = img.width/2-118;
int button_one_2x = img.width/2-92;
int button_oney = img.height+17;
int button_one_2y = img.height+43;

int button_twox = img.width/2-53;
int button_two_2x = img.width/2-27;
int button_twoy = img.height+17;
int button_two_2y = img.height+43;

int button_threex = img.width/2+17;
int button_three_2x = img.width/2+43;
int button_threey = img.height+17;
int button_three_2y = img.height+43;

int button_fourx = img.width/2+82;
int button_four_2x = img.width/2+108;
int button_foury = img.height+17;
int button_four_2y = img.height+43;

  if ((mouseX>button_onex)&(mouseX<button_one_2x)&(mouseY>button_oney)&(mouseY<button_one_2y)) {
 
    println("Original");
   
// CURSOR HIGHLIGHT
 
ellipseMode(CENTER);
  noStroke();
  fill(0,0,0);
  ellipse(mouseX,mouseY,20,20);
 
  }
   
    if ((mouseX>button_twox)&(mouseX<button_two_2x)&(mouseY>button_twoy)&(mouseY<button_two_2y)) {
 
    println("Black & White");
    img.filter(GRAY);
   
// CURSOR HIGHLIGHT
 
ellipseMode(CENTER);
  noStroke();
  fill(0,0,0);
  ellipse(mouseX,mouseY,20,20);
     
    }
   
    if ((mouseX>button_threex)&(mouseX<button_three_2x)&(mouseY>button_threey)&(mouseY<button_three_2y)) {
 
    println("Threshold");
    img.filter(THRESHOLD);
   
// CURSOR HIGHLIGHT

ellipseMode(CENTER);
  noStroke();
  fill(0,0,0);
  ellipse(mouseX,mouseY,20,20);
   
    }
   
    if ((mouseX>button_fourx)&(mouseX<button_four_2x)&(mouseY>button_foury)&(mouseY<button_four_2y)) {
     
   
 
    println("Invert");
    img.filter(INVERT);
   
// CURSOR HIGHLIGHT
 
ellipseMode(CENTER);
  noStroke();
  fill(0,0,0);
  ellipse(mouseX,mouseY,20,20);
 
    }

}