/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Establishing universal variables
PImage[] images = new PImage [13];
Triangle[] triangles = new Triangle [5];
Quad q1,q2;
int a,c; 
color e;

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// Setting up the environment
void setup(){
  size (1000,800);
  smooth();
  background(255);
   
  triangles[0]= new Triangle(583,341.5,-59,-118,-59,118,59,0);
  triangles[1]= new Triangle(642,400.5,-118,59,118,59,0,-59);
  triangles[2]= new Triangle(730.5,253,-88.5,-29.5,29.5,-29.5,29.5,88.5);
  triangles[3]= new Triangle(583,253,-59,-29.5,59,-29.5,0,29.5);
  triangles[4]= new Triangle(671.5,341.5,-29.5,0,29.5,-59,29.5,59);
  q1= new Quad(642,282.5,-59,0,0,-59,59,0,0,59);
  q2= new Quad(730.5,371,-29.5,-88.5,29.5,-29.5,29.5,88.5,-29.5,29.5);
  
  for (int i = 0; i < 13; i++) {
    String imageName = "image" + i+ ".jpg";
    images[i] = loadImage(imageName);
  }
  
  a=0;
  c=0;
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////The draw routine
void draw(){
  imageMode(CORNER);
  image(images[0],0,0,1000,800);
  image(images[1],36,120,236,236);
  select();
  displaySelect();
  
  
  if((mouseX >36) && (mouseX <272)&&(mouseY > 120) && (mouseY < 356)){
    if (mousePressed==true){
      if (mouseButton==LEFT){
      a=1;
      }
    }
  }
  if(a==1){
    noFill();
    stroke(255);
    strokeWeight(12);
    strokeJoin(ROUND);
    rect(29,113,250,250);//////////////////////////////////////////////////////////////////////////////////////////////select the tangram
  
    strokeWeight(2);
    stroke(0);
    fill(55,176,223);
    triangles[0].display();
  
    fill(155,195,91);
    triangles[1].display();
  
    fill(251,196,0);
    triangles[2].display();
  
    fill(243,176,205);
    triangles[3].display();
  
    fill(255,241,0);
    triangles[4].display();
  
    fill(201,129,180);
    q1.display();
  
    fill(233,88,134);
    q2.display();//////////////////////////////////////////////////////////////////////////////////////////////////display the tangram in the drawing area
  
  
    if (mouseX>320&&mouseX<964&&mouseY>39&&mouseY<644) {
      color e =get(mouseX,mouseY);
      if(e==color(55,176,223)) {
        triangles[0].move();
      }
      if(e== color(155,195,91)) {
        triangles[1].move();
      }
      if(e== color(251,196,0)) {
        triangles[2].move();
      }
      if(e== color(243,176,205)) {
        triangles[3].move();
      }
      if(e== color(255,241,0)) {
        triangles[4].move();
      }
      if(e== color(201,129,180)) {
        q1.move();
      }
      if(e== color(233,88,134)) {
        q2.move();//////////////////////////////////////////////////////////////////////////////////move and rotate the elemental forms
      }
    }
  }
}
  
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////select examples of shapes  
void select() {
  if((mouseY >690) &&(mouseY < 766)){
    if (mousePressed==true){
      if (mouseButton==LEFT){
        if((mouseX >59) && (mouseX <115)){
          c=1;
        }
        if((mouseX >143) && (mouseX <198)){
          c=2;
        }  
        if((mouseX >228) && (mouseX <282)){
          c=3;
        }  
        if((mouseX >312) && (mouseX <367)){
          c=4;
        }  
        if((mouseX >396) && (mouseX <451)){
          c=5;
        }  
        if((mouseX >480) && (mouseX <535)){
          c=6;
        }  
        if((mouseX >564) && (mouseX <619)){
          c=7;
        }  
        if((mouseX >648) && (mouseX <703)){
          c=8;
        }  
        if((mouseX >732) && (mouseX <788)){
          c=9;
        }  
        if((mouseX >817) && (mouseX <872)){
          c=10;
        }  
        if((mouseX >901) && (mouseX <956)){
          c=11;
        }    
      }
    }
  }
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////display examples of shapes which is selected by orange rect 
void displaySelect() {
  if(c==1){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(50,690,67,77);
   imageMode(CORNER);
   image(images[2],67,419);
 }
 
   if(c==2){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(136,690,67,77);
   imageMode(CORNER);
   image(images[3],61,411);
 }

  if(c==3){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(220,690,67,77);
   imageMode(CORNER);
   image(images[4],58,419);
 }

  if(c==4){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(305,690,67,77);
   imageMode(CORNER);
   image(images[5],85,412);
 }

  if(c==5){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(389,690,67,77);
   imageMode(CORNER);
   image(images[6],67,419);
 }

  if(c==6){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(473,690,67,77);
   imageMode(CORNER);
   image(images[7],67,419);
 }

  if(c==7){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(558,690,67,77);
   imageMode(CORNER);
   image(images[8],56,419);
 }

  if(c==8){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(642,690,67,77);
   imageMode(CORNER);
   image(images[9],59,419);
 } 
 
  if(c==9){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(726,690,67,77);
   imageMode(CORNER);
   image(images[10],50,449);
 }
 
  if(c==10){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(811,690,65,77);
   imageMode(CORNER);
   image(images[11],50,449);
 }

  if(c==11){
   noFill();
   stroke(250,153,33);
   strokeWeight(1);
   strokeJoin(ROUND);
   rect(895,690,67,77);
   imageMode(CORNER);
   image(images[12],67,419);
 }
}

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// class Triangle 
class Triangle {
  float x,y,x1,x2,x3,y1,y2,y3;
  float angle=0;
  Triangle(float mx,float my,float xpos1,float ypos1,float xpos2,float ypos2,float xpos3,float ypos3) {
    x=mx;
    y=my;
    x1=xpos1;
    y1=ypos1;
    x2=xpos2;
    y2=ypos2;
    x3=xpos3;
    y3=ypos3;
  }
  void move( ) {
    if(mousePressed==true) {
      if (mouseButton==LEFT){
        x=mouseX;
        y=mouseY;
      }
      if(mouseButton==RIGHT) {
         angle +=PI/180;
      }
      if(mouseButton==CENTER) {
         angle -=PI/180;
      }
    } 
  }
  void display() { 
    pushMatrix();
    translate(x,y);
    rotate(angle); 
    triangle(x1,y1,x2,y2,x3,y3);  
    popMatrix();
  }
}  
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////class quad
class Quad {
  float x,y,x1,x2,x3,y1,y2,y3,x4,y4;
  float angle=0;
  Quad(float mx,float my,float xpos1,float ypos1,float xpos2,float ypos2,float xpos3,float ypos3,float xpos4,float ypos4) {
    x=mx;
    y=my;
    x1=xpos1;
    y1=ypos1;
    x2=xpos2;
    y2=ypos2;
    x3=xpos3;
    y3=ypos3;
    x4=xpos4;
    y4=ypos4;
  }
   void move( ) {
    if(mousePressed==true) {
      if (mouseButton==LEFT){
        x=mouseX;
        y=mouseY;
      }
      if(mouseButton==RIGHT) {
         angle +=PI/180;
      }
      if(mouseButton==CENTER) {
         angle -=PI/180;
      }
    } 
  }  
  void display() {
    pushMatrix();
    translate(x,y);
    rotate(angle); 
    quad(x1,y1,x2,y2,x3,y3,x4,y4); 
    popMatrix(); 
  }
}