Dear All,

I am trying to create a menu with four buttons. Each of these should modify the original image e.g. changing the colours of the pixels.
I have tried to write the following code and it does not work.Could you please help me understand what I did wrong?

thanks!! :)

Code:

// ------------------------------------------------------------------

// load image in sketch, add file > foto.jpg

// Naming Buttons + Image
PImage img;
int buttonY, button1x, button2x, button3x, button4x, button5x;

//Establishing Button's Image's technical data

void setup() {
  img = loadImage("foto.jpg");
  size(img.width,img.height+60);
 
  buttonY=(img.height);
  button1x=0;
  button2x=60;
  button3x=120;
  button4x=180;
  button5x=240;
 
}

// Draw rectangles on screen below image.

void draw() {
  //rectangle Y
  stroke(0);
  fill(162);
  rect(0,(img.height), 240,60);
  //rectangle 1x
  stroke(0);
  fill(162);
  rect(0,(img.height),60,60);
  //rectangle 2x
  stroke(0);
  fill(162);
  rect(60,(img.height),60,60);
  //rectangle 3x
  stroke(0);
  fill(162);
  rect(120,(img.height),60,60);
  //rectangle 3x
  stroke(0);
  fill(162);
  rect(180,(img.height),60,60);
  
}
  

//control interaction with mouse button 1:
// image enhancement of red pixels

void mousePressed () {
  if(mouseY>buttonY) {
    if((mouseX>button1x)&(mouseX<button2x)) {
      loadPixels();
      img.loadPixels();
      for (int y = 0; y< height; y++) {
        for (int x = 0; x< width; x++) {
          int loc = x + y*width;
          float r = red (img.pixels[loc]);
          float g = green(img.pixels[loc]);
          float b = blue (img.pixels[loc]);
          pixels[loc] = color(255,g,b);
       }
      }
    updatePixels();
  }
 
 //control interaction with mouse button 2:
// image enhancement of green pixels
    if((mouseX>button2x)&(mouseX<button3x)) {
      loadPixels();
      img.loadPixels();
      for (int y = 0; y< height; y++) {
        for (int x = 0; x< width; x++) {
          int loc = x + y*width;
          float r = red (img.pixels [loc]);
          float g = green(img.pixels[loc]);
          float b = blue (img.pixels[loc]);
          pixels[loc] = color(r,255,b);
       }
      }
    updatePixels();
  }
 //control interaction with mouse button 3:
// image enhancement of blue pixels
    if((mouseX>button3x)&(mouseX<button4x)) {
      loadPixels();
      img.loadPixels();
      for (int y = 0; y< height; y++) {
        for (int x = 0; x< width; x++) {
          int loc = x + y*width;
          float r = red (img.pixels [loc]);
          float g = green(img.pixels[loc]);
          float b = blue (img.pixels[loc]);
          pixels[loc] = color(r,g,255);
       }
      }
    updatePixels();
   }
//control interaction with mouse button 1:
// return to original image

    if((mouseX>button4x)&(mouseX<button5x)) {
       image(img,0,0);
      }
    }
  }
 
// ------------------------------------------------------------------