int numPieces=5;
int [] currentFigure = new int[3];

float xh=400;
float xb=400;
float xf=400;

float xh1=400;
float xb1=400;
float xf1=400;

float easing1 = 0.05;
float easing2 = 0.1;

PFont fontVerdana10;

PImage[] head = new PImage[numPieces];
PImage[] body = new PImage[numPieces];
PImage[] feet = new PImage[numPieces];

PImage currentImage[] = new PImage[3];
PImage nextImage[] = new PImage[3];

void setup(){
  size(400,650);
  background(0);
  frameRate(30);
  
  fontVerdana10 = loadFont("Verdana-10.vlw"); 
  textFont(fontVerdana10); 
  
  for(int i=0; i<numPieces; i++){
    head[i] = loadImage("h"+i+".jpg"); 
    body[i] = loadImage("b"+i+".jpg"); 
    feet[i] = loadImage("f"+i+".jpg"); 
  }

  currentFigure[0]=3;
  currentFigure[1]=3;
  currentFigure[2]=3;
  
 
}

void draw(){
  background(0);
  float m = millis();
  //image in

  float dx1 = 500 - xh;
  if(xh > 1) {
    xh -= dx1 * easing2;
  }

  float dx2 = 500 - xb;
  if(xb > 1) {
    xb -= dx2 * easing2;
  }

  float dx3 = 500 - xf;
  if(xf > 1) {
    xf -= dx3 * easing2;
  }


  image(head[currentFigure[0]],xh,0);
  image(body[currentFigure[1]],xb,307);
  image(feet[currentFigure[2]],xf,448);

  //image out
  float ex1 = 500 - xh1;
  if(abs(ex1) > 1) {
    xh1 -= ex1 * easing1;
  }


  float ex2 = 500 - xb1;
  if(abs(ex2) > 1) {
    xb1 -= ex2 * easing1;
  }

  float ex3 = 500 - xf1;
  if(abs(ex3) > 1) {
    xf1 -= ex3 * easing1;
  }


  if(currentFigure[0]==0){
    image(head[4],xh1,0);
  } 
  else {  
    image(head[currentFigure[0]-1],xh1,0);
  }

  if(currentFigure[1]==0){
    image(body[4],xb1,307);
  } 
  else {
    image(body[currentFigure[1]-1],xb1,307);
  }
  if(currentFigure[2]==0){
    image(feet[4],xf1,448);
  } 
  else { 
    image(feet[currentFigure[2]-1],xf1,448);
  }


  stroke(255,40);
  line(0,307,width,307);
  line(0,448,width,448);
  if(m*0.1 < 255){
    fill(0,500-m*0.1);
    rect(0,0,width,height);
  }
  
   fill(120);
  text("Head", 5, 150);
  text("Body", 5, 317);
  text("Legs", 5, 457);
  text("Click each section of the picture to change the combination.", 30, height-10);

}

void mousePressed(){
  if(mouseY < 307){
    xh=400;
    xh1=0;
    if(currentFigure[0]==4){
      currentFigure[0]=0;
    } 
    else {
      currentFigure[0]++;
    }
  }
  if(mouseY > 308 && mouseY < 448){ 
    xb=400;
    xb1=0;
    if(currentFigure[1]==4){
      currentFigure[1]=0;
    } 
    else {
      currentFigure[1]++;
    }
  }
  if(mouseY > 449){
    xf=400;
    xf1=0;
    if(currentFigure[2]==4){
      currentFigure[2]=0;
    } 
    else {
      currentFigure[2]++; 
    }
  }
}