//animatie met 8 parallellogrammen met hoogten = n en  lengte = 2n
vorm = []; let zeshoek = true; ruitjes = false; let ruitjespap;
function setup() {
 createCanvas(windowWidth, windowHeight);
 buttonR = createButton('reset');
 buttonR.position(20,40);buttonR.style('width','70px');
 buttonR.mouseClicked(buttonRAction);
 button0 = createButton('dp 0');
 button0.position(20,80);button0.style('width','70px');
 button0.mouseClicked(button0Action);
 button1 = createButton('dp 1');
 button1.position(20,120);button1.style('width','70px');
 button1.mouseClicked(button1Action);
 button2 = createButton('dp 2');
 button2.position(20,160);button2.style('width','70px');
 button2.mouseClicked(button2Action);
 button3 = createButton('dp 3');
 button3.position(20,200);button3.style('width','70px');
 button3.mouseClicked(button3Action);
 button4 = createButton('dp 4');
 button4.position(20,240);button4.style('width','70px');
 button4.mouseClicked(button4Action);
 buttonZ = createButton('zeshoek aan/uit');
 buttonZ.position(20,280);buttonZ.style('width','120px');
 buttonZ.mouseClicked(buttonZAction);
 buttonRuitjes = createButton('ruitjes aan/uit');
 buttonRuitjes.position(20,320);buttonRuitjes.style('width','120px');
 buttonRuitjes.mouseClicked(buttonRuitjesAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,360);buttonD.style('width','120px');
 buttonD.mouseClicked(buttonDAction);
 let x = width/2; let y = height/2; let n = height/7;
 let h = n; let l = 2*n;
 let alfa = 100; let sw = n/100; let sc = 0;
 vorm[0] = new Paral(h, l, 0, 5, x-n/2, y-n, 90,color(255,255,0, alfa),sw,sc);
 vorm[1] = new Paral(h, l, 1, 3, x+n/2, y-n,-90,color(255,255,0, alfa),sw,sc);
 vorm[2] = new Paral(h, l, 1, 7, x-1.5*n, y, 0, color(0,255,0,   alfa),sw,sc);
 vorm[3] = new Paral(h, l, 0, 1, x+1.5*n, y, 0, color(0,100,255, alfa),sw,sc);
 vorm[4] = new Paral(h, l, 0, 5, x-1.5*n, y, 0, color(0,255,0,   alfa),sw,sc);
 vorm[5] = new Paral(h, l, 1, 3, x+1.5*n, y, 0, color(0,100,255, alfa),sw,sc);
 vorm[6] = new Paral(h, l, 1, 3, x-n/2, y+n,90, color(245,177,67,alfa),sw,sc);
 vorm[7] = new Paral(h, l, 0, 1, x+n/2, y+n,90, color(245,177,67,alfa),sw,sc);
 vorm[8] = new Vhoek_n2a4(n, 0, x, y, 0, color(100, 200, 0, alfa),sw,sc);
 ruitjespap = new Ruitjes(n, x, y);
}
 
function draw() {
  //background("#E6FBFF");
 clear();
 background('rgba(255,255,255, 0)');
 for (let i = 0; i < 8; i++){vorm[i].display();}
 if (zeshoek) {vorm[8].display();}
 
 if (ruitjes) {ruitjespap.display();
   for(let i = 0; i < 8; i++){vorm[i].dpAan();}}
 
 if (key == 's'|| key == 'S') {  }
    else
  {
  vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
  vorm[2].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
  vorm[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
  vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
  vorm[8].dpRotRe(vorm[8]);
 }
}
 
function buttonRAction(){setup();}
function button0Action()
 {vorm[0].d = 5; vorm[1].d = 3; vorm[2].d = 7; vorm[3].d = 1;
  vorm[4].d = 5; vorm[5].d = 3; vorm[6].d = 3; vorm[7].d = 1;}
function button1Action()
 {vorm[0].d = 7; vorm[1].d = 1; vorm[2].d = 7; vorm[3].d = 1;
  vorm[4].d = 5; vorm[5].d = 3; vorm[6].d = 1; vorm[7].d = 3;}
function button2Action()
  {vorm[0].d = 5;vorm[1].d = 3; vorm[2].d = 5; vorm[3].d = 3;
  vorm[4].d = 7; vorm[5].d = 1; vorm[6].d = 3; vorm[7].d = 1;}
function button3Action()
  {vorm[0].d = 7;vorm[1].d = 1; vorm[2].d = 5; vorm[3].d = 3;
  vorm[4].d = 7; vorm[5].d = 1; vorm[6].d = 1; vorm[7].d = 3;}
function button4Action()
  {vorm[0].d=6; vorm[1].d=2; vorm[6].d=2; vorm[7].d=2 }
function buttonZAction()
  {if(zeshoek){zeshoek=false;} else {zeshoek=true;}}
function buttonRuitjesAction()
  {if(ruitjes){ruitjes=false;} else {ruitjes=true;}}
function buttonDAction(){save('parallellogrammen_rond_zeshoek.png');}