color[] newpix;
PImage img;
boolean rec=false;

int controls=0;
boolean playing=false;

int picNum=0;
int numPics=5;

PImage[] pics;

boolean drawn=true;
boolean fdrawn=false;

PImage play;
PImage pause;

PImage save;


boolean fsc=true;



 /* @pjs preload="sortpics/1.png"; */
 /* @pjs preload="sortpics/2.png"; */
 /* @pjs preload="sortpics/3.png"; */
 /* @pjs preload="sortpics/4.png"; */
 /* @pjs preload="sortpics/5.png"; */

void setup(){
  size(600,600);
  newpix=new color[360000];
  for(int i=0;i<360000;i++){
  newpix[i]=#f0f0f0;
  }
  
  pics=new PImage[numPics];
  for(int i=1;i<=numPics;i++){
    pics[i-1]=loadImage("sortpics/"+i+".png");
  }
  img=pics[0];
  image(img,0,0); 
  loadPixels();
  arrayCopy(pixels,newpix);
  play=loadImage("play.png");
  pause=loadImage("pause.png");
  save=loadImage("save.png");
  
}

void draw(){

  if(drawn==false){
    drawn=true;
    image(img,0,0);
  }  
  if(playing){
    arrayCopy(newpix,pixels);
    bump(#ff0000,(mouseX-300)/20);
    bothsort((mouseY-50)/3);
    arrayCopy(pixels,newpix);
    updatePixels();
  }
  else{
    if(frameCount==30){
      console.log("drawing");
      fdrawn=true;
      image(pics[0],0,0);
      loadPixels;
    arrayCopy(pixels,newpix);
    }
    else{
      arrayCopy(pixels,newpix);
      updatePixels();   
    }
  }
  
  if(controls>0||fsc){
    //document.getElementById("canvas").getContext("2d").globalCompositeOperation = "source-over";
    noStroke();
    controls-=4;
        
    fill(0,controls);
    rect(0,0,600,50);
    
    if(mouseY<50){
      controls=100;
      fsc=false;
      
      if(mouseX<200){
        fill(0,0,0,controls);
        rect(0,0,200,50);
      }
      else if(mouseX<400){
        fill(0,0,0,controls);
        rect(200,0,200,50);
      }
      else{
        fill(0,0,0,controls);
        rect(400,0,200,50);
      }
    }
 
    tint(255,min(255,controls*5));
    if(playing)image(pause,-50,0);
    else image(play,-50,0);
    
    fill(255);
    textSize(25);
    textAlign(CENTER,CENTER);
    text("Next",300,22);
    
    image(save,350,0);
    tint(255,255);
  }
}

void bump(int m, int d){
  
  arrayCopy(pixels,newpix);
  for(int i=0;i<307200;i++){
    pixels[i]=merge(newpix[(i+ira(d)+360000)%360000],newpix[i],m);
  }
}

int ira(int a){
  int val=floor(random(0,abs(a)));
  if(a<0)return -val;
  else return val;
}

color merge(color c1, color c2, int m){
  return (c1&m)|(c2&~m);
}

void sort(int diff){
  loadPixels();
  int numpix=width*height;
  for(int i=0;i<numpix-1;i++){
    if(comp(pixels[i],pixels[i+1])<diff)pixels[i+1]=pixels[i];
  }
  if(comp(pixels[0],pixels[numpix-1])<diff)pixels[0]=pixels[numpix-1];
   updatePixels();
}

double comp(color col1, color col2){
  return abs(red(col1)-red(col2))+abs(green(col1)-green(col2))+abs(blue(col1)-blue(col2));
}

void mouseMoved(){
  controls=100;
}

void mousePressed(){
  if(mouseY>50){
    image(img,0,0);
    loadPixels();
    arrayCopy(pixels,newpix);
  }
    
  if(mouseY<50){
    if(mouseX<200){
      playing=!playing;
    }
    else if(mouseX<400){
      picNum++;
      if(picNum==numPics)picNum=0;
      img=pics[picNum];
      image(img,0,0);
    loadPixels();
    arrayCopy(pixels,newpix);
    }
    else{
      arrayCopy(newpix,pixels);
      updatePixels();
      window.open(canvas.toDataURL("image/png"), '_blank');
    }
  }
}

void bothsort(int diff){
  int numpix=width*height;
  for(int i=0;i<numpix-1-width;i++){
    if(comp(pixels[i],pixels[i+1])<diff)pixels[i+1]=pixels[i];
    if(comp(pixels[i],pixels[i+width])<diff)pixels[i+width]=pixels[i];
  }
  for(int i=0;i<width;i++){
    if(comp(pixels[i],pixels[i+numpix-width])<diff)pixels[i]=pixels[i+numpix-width];
  }
  if(comp(pixels[0],pixels[numpix-1])<diff)pixels[0]=pixels[numpix-1];
}