PImage billed;
int aktueltFilter = -1;

void setup() {
  billed = loadImage("langbold2.jpg");
  size(billed.width, billed.height+50);
}

void draw() {  
    knap(0,"Stoej");
    knap(1,"Pixelering"); 
    knap(2,"Lys"); 
    knap(3,"Motionblur"); 
   
    if(aktueltFilter == 0){
      stoej();
    }else if(aktueltFilter == 1){
      pixelering();
    }else if(aktueltFilter == 2){
      lys();
    }else if(aktueltFilter == 3){
      motionBlur();
    }else{
      image(billed, 0, 0);
    }
}

/*
Optimering af funktioners start
1) Opret de to indbyggede funktioner void mouseClicked() og void mouseMoved()
2) Klip forgreningen der starter filtere i draw, og sæt den ind i de to funktioner.
3) Noter hvordan filteret støj ændrer sig - hvornår kører det nu?
4) Skriv en forklaring på hvorfor det sker og hvorfor der er bedre end bare at lade dem kører i draw().
5) Slet funktionerne i mouseMoved, hvor der ikke sker en ny beregning (nyt billede) når muse flyttes
*/

void knap(int nr, String tekst){
  int knapBredde=70;
  int knapHoejde=20;
  int knapY=billed.height+10;

   fill(50);
   rect(nr * knapBredde+5, knapY, knapBredde, knapHoejde); 
   
   fill(255);
   text(tekst, nr * knapBredde+10, knapY+15);

   if(mousePressed == true
      && nr * knapBredde < mouseX 
      && mouseX < (nr+1) * knapBredde 
      && knapY < mouseY           
      && mouseY < knapY+knapHoejde)
   { 
     aktueltFilter = nr; 
   }
}
/*
Ekstra: Tilpasning af knap
Tilpas knappernes farve, størrelse og udseende

For mange knapper i forhold til billedets bredde
1) Lav en betingelse så kun de første 5 knapper laves som før
2) De næste knapper lægges eks. 20 ekstra til knapY 
3) Afprøv og du vil se at knapperne tegnes nedenfor 
4) - Knapperne tegnes for langt inde sørg for at trække fra aktueltFilter 
5) - Knapperne tegnes udenfor skærmbilledets højde - juster denne i Setup() 
6) Afprøv knapperne - Virker de ikke?
7) - Har du husket også at gange nr på betingelsen i mousePressed()?
*/ 

//Ændring af plads
void stoej(){
  for(int y = 0; y < billed.height; y = y + 1){
    for(int x = 0; x < billed.width; x = x + 1){
      int nyX = x + int(random(10));
      color hentFarve = billed.get(nyX, y);
      set(x, y, hentFarve);
    }
  }
}
/*
Idéer til ændring af stoej():
a) Ændre mængden af støj 
b) Udvid så der også er støj iforhold til y-akse
c) Lav støjniveau følge mus' position
d) Håndter kanter - hvad skal der ske, hvis random() giver en positon uden for billedet?

Idéer til filtre ud fra stoej():

Spejl:
- Indsæt pixels i modsatte rækkefølge i forhold til bredden
1) Kopier koden for stoej. 
2) Giv den et nyt navn og tilføj knap i draw
3) Ændr koden, så nyX sættes til billedets bredde - x
Ekstra
a) Sørg for at spejlingen kun sker når musen er over billedets midte
b) Lav flip, hvor det er y-aksen der byttes om på.
c) Kombiner spejl og flip, så der spejlvendes og/eller flippes efter musens position

Symmetrisk spejl
Som spejl men lad, den ene halvdel tegnes almindelig, mens den anden spejles...
*/


//Ændring af form
void pixelering(){
  int stoerrelse = 10;
  for(int y = 0; y < billed.height; y = y + stoerrelse){
    for(int x = 0; x < billed.width; x = x + stoerrelse){
      fill(billed.get(x, y));
      stroke(billed.get(x, y));
      rect(x, y, stoerrelse, stoerrelse);      
    }
  }
}
/*
Idéer til ændring af pixelering():
a) Ændre størrelsen op/ned 
b) Lav størrelse følge mus' position - divider ned, hvis det er for følsomt
c) Håndter kanter - hvad skal der ske, hvis de sidste pixels går ned over knapper?
d) Lad bredde/højde afhænge af mouseX/mouseY
e) Surprise - der tegnes kun, hvor musen har været over...
f) Der vises et gennemsnit af farveværdierne istedet for kun det første

Idéer til filtre ud fra pixelering():

Linier:
1) Kopier pixelering(), giv den et nyt navn og tilføj knap i draw()
2) Slet x-forløkken
3) Hent farve fra 0, y
4) Tegn en linie i billedets bredde

Andre former:
Kopier pixelering() og ændr den så der tegnes cirkler eller trekanter i stedet 
*/

//Ændring af farve
void lys(){
  float lys = 0.5;

  for(int y = 0;y < billed.height; y = y + 1){
    for(int x = 0;x < billed.width; x = x + 1){
      color hentFarve = billed.get(x, y);
      
      float nyRoed = red(hentFarve)*lys;
      float nyGroen = green(hentFarve)*lys;
      float nyBlaa = blue(hentFarve)*lys;
      
      color nyFarve = color(nyRoed, nyGroen, nyBlaa);

      set(x, y, nyFarve);
    }
  }
}
/*
Idéer til ændring af lys:
a) Lav lysniveau følge mus' position
b) Animer dagens gang

Idéer til filtre ud fra lys:

Farverfilter:
- Vis kun udvalgte farver fra et billede
1) Kopier koden for lys. 
2) Giv den et nyt navn og tilføj knap i draw
3) Ændr koden, så der kun vises én af farvetonerne - sæt de andre til nul
4) Lav andre farvefiltre som sepia, tudsmørke, solopgang... ved at gange de tre farvetoner med tal mellem 0 og 1
Ekstra:
a) Graatonefilter
b) Lav filter der op-/nedtoner forskelligefarvetoner (eks. sepia)
c) Lav et filter der farvetoner efter mus position

Mixbilleder/Gennensigtighed
- Læg to billeder sammen og divider med 2!
1) Kopier koden for lys(), giv nyt navn og tilføj knap i draw
3) Sørg for at der oprettes og loades et ekstra billede i setup
4) Ændr koden, for lys, så der hentes farve fra begge billeder 
5) Ændr koden farverne i de to billeder lægges sammen og divideres med 2
Ekstra:
a) Lav en WARP - glidende overgang mellem de to billeder - enten animeret eller efter mus' position
b) Lav en funktion der kombinere en eller to af billedernes - hvad med rød fra et billede, grønt fra et andet og blåtfra et tredje?
*/

void motionBlur(){
  for(int y = 0;y < billed.height; y = y + 1){
    for(int x = 0;x < billed.width; x = x + 1){
      color hentFarve = billed.get(x, y);
      color hentFarveV1 = billed.get(x-1, y);
      color hentFarveH1 = billed.get(x+1, y);
      
      float nyRoed   = (red(hentFarve)   + red(hentFarveV1)   + red(hentFarveH1))/3;
      float nyGroen  = (green(hentFarve) + green(hentFarveV1) + green(hentFarveH1))/3;
      float nyBlaa   = (blue(hentFarve)  + blue(hentFarveV1)  + blue(hentFarveH1))/3;
      
      color nyFarve = color(nyRoed, nyGroen, nyBlaa);

      set(x, y, nyFarve);
    }
  }
}


/*
Idéer til ændring af motionBlur():
a) Øg antallet af pixels der bruges til 5
b) Overvej hvad der skal hentes når filteret når til kanten af billedet
c) Lad en for-løkke gå gennem de 5 eller flere pixels:
c 1) Lav en variable antalPixels
c 2) Opret de tre variabler til farver som før men sæt dem til 0 fra start. 
c 3) Lav en forløkke, der kører antalPixels gange
c 4) I forløkken hentes farveværdien for x + antalPixels, og de tre farver tælles op med den aktuelle værdi
c 5) Efter forløkken sættes nyFarve til de optalte farveværdier / antalPixels
c 6) Den aktuelle pixel sættes til den ny farveværdi
c ekstra ) La antalPixel afhænge af mouseX

Idéer til filtre ud fra motionBlur():

Lodret motionblur()
1) Kopier koden for motionBlur(), giv nyt navn og tilføj knap i draw().
2) Ændr' koden til at arbejde på y istedet for x

Andre filtre beskrevet i foldningsmatrix
Som motionBlur, kan de andre foldningsmatrix og implementeres:
http://iftek.dk/billedmanipulation-filtre-via-foldningsmatrix

*/

/*
Optimering 2
Brug den indbyggede pixel-tabel - pixels[blurPixel] - til at optimere hastigheden med:
*/