let vorm = [];  let cnv;
function centerCanvas() {
  let x = (windowWidth - width) / 2;
  let y = (windowHeight - height) / 2;
  cnv.position(x, y);
}
function setup() {
  cnv = createCanvas(1000,1000);
  centerCanvas();
  buttonR = createButton('reset');
  buttonR.position(20,30);buttonR.style('width','50px');
  buttonR.mouseClicked(buttonRAction);
  button0 = createButton('dp 0');
  button0.position(20,60);button0.style('width','50px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(20,90);button1.style('width','50px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 2');
  button2.position(20,120);button2.style('width','50px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(20,150);button3.style('width','50px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,180);button4.style('width','50px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(20,210);button5.style('width','50px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(20,240);button6.style('width','50px');
  button6.mouseClicked(button6Action);
  button7 = createButton('dp 7');
  button7.position(20,270);button7.style('width','50px');
  button7.mouseClicked(button7Action);
  button8 = createButton('dp 8');
  button8.position(20,300);button8.style('width','50px');
  button8.mouseClicked(button8Action);
  button9 = createButton('dp 9');
  button9.position(20,330);button9.style('width','50px');
  button9.mouseClicked(button9Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,360);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  let x = width/2; let y = height/2; let n = height/15;
  let alfa1 = 75; let alfa2 = 125; let sw = n/50; let sc = color(0);
  vorm[0] = new T(n,6 ,x-2*n,y-2*n, 0,  color(224,106,130,alfa1),sw,sc);
  vorm[1] = new T(n,3, x+2*n,y-2*n, 0,  color(34,237,35,  alfa1),sw,sc);
  vorm[2] = new T(n,6, x+2*n,y+2*n, 180,color(224,106,130,alfa1),sw,sc);
  vorm[3] = new T(n,3, x-2*n,y+2*n, 180,color(34,237,35,  alfa1),sw,sc);
 
  vorm[4] = new X(n,9, x-2*n, y-2*n,0, color(0,100,0,    alfa1),sw,sc);
  vorm[5] = new X(n,4, x+2*n, y-2*n,0, color(106,133,224,alfa1),sw,sc);
  vorm[6] = new X(n,3, x+2*n, y+2*n,0, color(0, 100, 0,  alfa1),sw,sc);
  vorm[7] = new X(n,10,x-2*n, y+2*n,0, color(106,133,224,alfa1),sw,sc);
 
  vorm[8] = new Drieh_nh(4*n, 2*n,0,x,    y-4*n, 0,color(90,232,196,alfa2),sw,sc);
  vorm[9] = new Drieh_nh(4*n, 2*n,0,x+4*n,y,    90,color(232,184,26,alfa2),sw,sc);
  vorm[10] = new Drieh_nh(4*n,2*n,0,x,   y+4*n,180,color(90,232,196,alfa2),sw,sc);
  vorm[11] = new Drieh_nh(4*n,2*n,0,x-4*n,y,   -90,color(232,184,26,alfa2),sw,sc);
}
 
function draw() {
   clear();
   background('rgba(255,255,255, 0)');
 
   for (let i =0; i < 4; i++){vorm[i].display();}
   for (let i =4; i < 8; i++){vorm[i].display();}
   for (let i =8; i < 12; i++){vorm[i].display();}
   if (key == 's' || key == 'S') { }
   else
 {
  vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
  vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
  vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
  vorm[11].xLiRe();  vorm[9].xReLi();
  vorm[8].yUpDown(); vorm[10].yDownUp();
  }
}
 
function windowResized() {
  centerCanvas();
}
 
 function buttonRAction(){setup()}
 function button0Action()
 {vorm[0].d=6;vorm[1].d=3; vorm[2].d=6;vorm[3].d=3;vorm[4].d=9;vorm[5].d= 4;
  vorm[6].d=3;vorm[7].d=10;vorm[8].d=0;vorm[9].d=0;vorm[10].d=0;vorm[11].d=0;}
 function button1Action()
 {vorm[0].d=3;vorm[1].d=6;vorm[2].d=3;vorm[3].d=6;vorm[4].d=8;vorm[5].d= 3;
  vorm[6].d=4;vorm[7].d=9;vorm[8].d=2;vorm[9].d=2;vorm[10].d=2;vorm[11].d=2;}
 function button2Action()
 {vorm[0].d=7;vorm[1].d=2;vorm[2].d=7;vorm[3].d=2;vorm[4].d=6;vorm[5].d= 1;
  vorm[6].d=6;vorm[7].d=7;vorm[8].d=2;vorm[9].d=2;vorm[10].d=2;vorm[11].d=2;}
 function button3Action()
 {vorm[0].d =5;vorm[1].d=3;vorm[2].d=1;vorm[3].d=7;vorm[4].d=7;vorm[5].d= 5;
  vorm[6].d =6;vorm[7].d=3;vorm[8].d=4;vorm[9].d=4;vorm[10].d=4;vorm[11].d=4;}
 function button4Action()
 {vorm[0].d =6;vorm[1].d=3;vorm[2].d=6;vorm[3].d=3;vorm[4].d=41;vorm[5].d= 1;
  vorm[6].d =7;vorm[7].d=5;vorm[8].d=3;vorm[9].d=3;vorm[10].d=3;vorm[11].d=3;}
 function button5Action()
 {vorm[0].d =2;vorm[1].d=7; vorm[2].d=2;vorm[3].d=7;vorm[4].d=10;vorm[5].d= 5;
  vorm[6].d =2;vorm[7].d=11;vorm[8].d=4;vorm[9].d=4;vorm[10].d=4;vorm[11].d=4;}
 function button6Action()
 {vorm[0].d =4;vorm[1].d=1; vorm[2].d=4;vorm[3].d=1;vorm[4].d=11;vorm[5].d= 6;
  vorm[6].d =1;vorm[7].d=12;vorm[8].d=4;vorm[9].d=4;vorm[10].d=4;vorm[11].d=4;}
 function button7Action()
 {vorm[0].d =4;vorm[1].d=5;vorm[2].d=5;vorm[3].d=4;vorm[4].d=12;vorm[5].d= 1;
  vorm[6].d =6;vorm[7].d=7;vorm[8].d=0;vorm[9].d=0;vorm[10].d=0;vorm[11].d=0;}
 function button8Action()
 {vorm[0].d =7;vorm[1].d=2;vorm[2].d=7;vorm[3].d=2;vorm[4].d=10;vorm[5].d= 3;
  vorm[6].d =4;vorm[7].d=9;vorm[8].d=0;vorm[9].d=0;vorm[10].d=0;vorm[11].d=0;}
 function button9Action()
 {vorm[0].d=5;vorm[1].d=4;vorm[2].d=5;vorm[3].d=4;vorm[4].d=12;vorm[5].dc=1;
  vorm[6].d=6;vorm[7].d=7;vorm[8].d=1;vorm[9].d=1;vorm[10].d=1 ;vorm[11].dc = 1;}
 function buttonDAction(){save('acht_parallellogrammen_rond_zeshoek.png');}