void setup() {

  size(400,400);
  background(240);
  ellipseMode(CENTER);
}

void draw() {
noStroke();
colorMode(RGB, 400);

//shadow
  fill(311,317,319,75);
  ellipse(200,250,200,40);
  
//top of the diamond
  fill((340+mouseX*0.10),(370+mouseX*0.10),(390+mouseX*0.10));
  quad(125,100,275,100,300,150,100,150);
  
//bottom of the diamond
  fill((350+mouseX*0.10),(375+mouseX*0.10),(400+mouseX*0.10));
  triangle(300,150,100,150,200,250);
  
//line
stroke(227,248,255,50);
line(300,150,100,150);

//left bottom Med triangle (triangle A)
noStroke();
fill(width-(20+mouseX*0.10),width-(-20+mouseX*0.10),width-(-30+mouseX*0.10)); 
//trying to figure how to do this properly was the worst thing that ever happened to me lmfao 
triangle(135,151,110,151,150,200);

//left upper Sm triangle (triangle B)
fill(width-(20+mouseX*0.10),width-(-20+mouseX*0.10),width-(-30+mouseX*0.10)); 
triangle(120,109,125,100,140,100);

//le t upper Sm triangle (triangle C)
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 )); 
  triangle(115,120,125,100,145,100);

//left upper Med triangle (triangle D)
   fill((350+mouseX*0.10 ),(375+mouseX*0.10 ),(400+mouseX*0.10 ));
  triangle(135,149,110,149,115,120);

//left bottom sm triangle (triangle E)
 fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 )); 
triangle(135,151,110,151,150,200);

//triangle H
fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(145,100,200,100,170,120);

//triangle  
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(135,149,160,149,170,120);

//triangle G
   fill((340+mouseX*0.10 ),(370+mouseX*0.10 ),(380+mouseX*0.10 ));
  triangle(135,150,160,150,180,200);

//triangle I
   fill((350+mouseX*0.10 ),(375+mouseX*0.10 ),(400+mouseX*0.10 ));
  triangle(170,120,200,149,160,149);

//triangle J
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(200,150,160,150,180,200);
  
//centre quad
   fill((340+mouseX*0.10 ),(370+mouseX*0.10 ),(380+mouseX*0.10 ));
  quad(200,150,220,200,200,250,180,200);
  
//triangle K
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(200,100,255,100,230,120);
  
//triangle L
   fill((350+mouseX*0.10 ),(375+mouseX*0.10 ),(400+mouseX*0.10 ));
  triangle(200,150,230,120,240,150);
  
//triangle M
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(200,150,220,200,240,150);
  
//triangle N
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(240,150,230,120,260,150);
  
//triangle O
   fill((340+mouseX*0.10 ),(370+mouseX*0.10 ),(380+mouseX*0.10 ));
  triangle(240,150,220,200,260,150);
  
//triangle P 
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(260,100,275,100,285,120);
  
//triangle Q
   fill((350+mouseX*0.10 ),(375+mouseX*0.10 ),(400+mouseX*0.10 ));
  triangle(260,150,285,120,290,150);
  
//triangle R
   fill(width-(20+mouseX*0.10 ),width-(-10+mouseX*0.10 ),width-(-20+mouseX*0.10 ));
  triangle(260,150,250,200,290,150);
  
}

//click event
  
  
  void mousePressed(){
  
 frameRate(.5);
  fill(400,400,400,250);
  quad(100,150,125,100,160,100,135,150);
  
  triangle(100,151,135,151,200,250);
  
  }
 void mouseReleased(){
 frameRate(30);
 }