//Grösse der Bearbeitungsmaske (Quadrat)
int groesse = 50;

PImage img;
PImage bearbeitet;

public void setup() {
  img = loadImage("goldengate.jpg");
  bearbeitet = loadImage("goldengate.jpg");
  surface.setResizable(true);
  surface.setSize(2*img.width, img.height);
}


//Funktion, um die Farbe eines Pixels auszulesen
int getColor(PImage image, int x, int y) {
  return image.pixels[y * image.width + x];
}

//Funktion, um die Farbe einem Pixel zuordnen zu können
void setColor(PImage image, int x, int y, int farbe) {
  image.pixels[y * image.width + x] = farbe;
}


public void draw() {
  //Zeichnet beide Bilder
  image(img, 0, 0, img.width, img.height);
  image(bearbeitet, img.width, 0, img.width, img.height);

  if (mousePressed && mouseButton == LEFT) {
    int neuMouseX=mouseX-(groesse/2);
    int neuMouseY=mouseY-(groesse/2);
    //Ein Rechteck zeigt an, wo das Bild in Graustufen geändert wird
    noFill();
    rect(neuMouseX,neuMouseY,groesse,groesse);
    //Verschachtelte Schleife, damit alle Pixel in einem Quadrat groesse bearbeitet werden
    for (int i=neuMouseY;i<neuMouseY+groesse;i++) {
      for (int k=neuMouseX;k<neuMouseX+groesse;k++) {
         int X = constrain(k, 0, img.width - 1);
         int Y = constrain(i, 0, img.height - 1);
         //Die Rot-, Grün- und Blauwerte werden den einzelnen Pixel des Originalbilds entnommen
         float R=red(getColor(img,X,Y));
         float G=green(getColor(img,X,Y));
         float B=blue(getColor(img,X,Y));
         //Der Grauwert wird mit der Formel brechnet
         float grauwert=0.299*R+0.587*G+0.114*B;
         //Den Grauwert auf die einzelnen Pixel des neuen Bildes anwenden
         setColor(bearbeitet,X,Y,color(grauwert,grauwert,grauwert));
         bearbeitet.updatePixels();
      }
    }
  } //endIf


}