vorm = []; let x; let n; let hoek = 0;
let ruitjespap; let ruitjes = false; let hl = true;
 
function setup() {
  buttonR1 = createButton('reset h 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset h 45');
  buttonR2.position(100,40);buttonR2.style('width','80px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset h 90');
  buttonR3.position(100,80);buttonR3.style('width','80px');
  buttonR3.mouseClicked(buttonR3Action);
  buttondp0 = createButton('dp 0');
  buttondp0.position(20,80);buttondp0.style('width','70px');
  buttondp0.mouseClicked(buttondp0Action);
  buttondp1 = createButton('dp 1');
  buttondp1.position(20,120);buttondp1.style('width','70px');
  buttondp1.mouseClicked(buttondp1Action);
  buttondp2 = createButton('dp 2');
  buttondp2.position(20,160);buttondp2.style('width','70px');
  buttondp2.mouseClicked(buttondp2Action);
  buttondp3 = createButton('dp 3');
  buttondp3.position(20,200);buttondp3.style('width','70px');
  buttondp3.mouseClicked(buttondp3Action);
  buttondp4 = createButton('dp 4');
  buttondp4.position(20,240);buttondp4.style('width','70px');
  buttondp4.mouseClicked(buttondp4Action);
  buttondp5 = createButton('dp 5');
  buttondp5.position(20,280);buttondp5.style('width','70px');
  buttondp5.mouseClicked(buttondp5Action);
  buttonRAU = createButton('ruitjes aan uit');
  buttonRAU.position(20,320);buttonRAU.style('width','120px');
  buttonRAU.mouseClicked(buttonRAUAction);
  buttonHL = createButton('hoger/langer aan uit');
  buttonHL.position(20,360);buttonHL.style('width','140px');
  buttonHL.mouseClicked(buttonHLAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,400);buttonD.style('width','120px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
  x = width/2; let y = height/2;
  n = height/10; let h = n; let alfa = 100;
  let l = 2*n; let sw = height/550; let sc = color(0);
 
  vorm[1] = new Paral(h, l,0,4,x-2*n,y-n, 0+hoek, color(255, 255, 0, alfa),sw,sc);
  vorm[2] = new Paral(h, l,1,4,x+2*n,y-n, 0+hoek, color(255, 255, 0, alfa),sw,sc);
  vorm[3] = new Paral(h, l,1,8,x-2*n,y+n, 0+hoek, color(255, 0, 0,   alfa),sw,sc);
  vorm[4] = new Paral(h, l,0,8,x+2*n,y+n, 0+hoek, color(255, 0, 0,   alfa),sw,sc);
  vorm[5] = new Paral(h, l,1,1,x-2*n,y-n,-90+hoek,color(0, 255, 0,   alfa),sw,sc);
  vorm[6] = new Paral(h, l,0,7,x+2*n,y-n, 90+hoek,color(0, 255, 0,   alfa),sw,sc);
  vorm[7] = new Paral(h, l,0,3,x-2*n,y+n, 90+hoek,color(255, 0, 200, alfa),sw,sc);
  vorm[8] = new Paral(h, l,1,1,x+2*n,y+n, 90+hoek,color(255, 0, 200, alfa),sw,sc);
  ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
//background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  if (ruitjes) {ruitjespap.display();
    for (let i = 1; i < 9; i++) {vorm[i].dpAan();}};
 
    for (let i = 1; i < 9; i++) {vorm[i].display();}
 
   if (key == 's' || key == 'S') {  }
   else
 {
  vorm[1].dpRotRe(vorm[1]); vorm[2].dpRotLi(vorm[2]);
  vorm[3].dpRotLi(vorm[3]); vorm[4].dpRotRe(vorm[4]);
  vorm[5].dpRotLi(vorm[5]); vorm[6].dpRotRe(vorm[6]);
  vorm[7].dpRotRe(vorm[7]); vorm[8].dpRotLi(vorm[8]);
 }
}
 
function buttonR1Action(){hoek = 0; hl=true; setup();}
function buttonR2Action(){hoek =45; hl=true; setup();}
function buttonR3Action(){hoek =90; hl=true; setup();}
 
function buttondp0Action()
{vorm[1].d = 4;  vorm[2].d = 4;  vorm[3].d = 8; vorm[4].d = 8;
 vorm[5].d = 1;  vorm[6].d = 7;  vorm[7].d = 3; vorm[8].d = 1;
 for(let i=1; i<5; i++){vorm[i+i-1].x = x-2*n;vorm[i+i].x = x+2*n;}}
function buttondp1Action()
{vorm[1].d = 4;  vorm[2].d = 4;  vorm[3].d = 8; vorm[4].d = 8;
 vorm[5].d = 1;  vorm[6].d = 7;  vorm[7].d = 3; vorm[8].d = 1;
 for(let i=1; i<5; i++){vorm[i+i-1].x = x-n;vorm[i+i].x = x+n;}}
function buttondp2Action()
{vorm[1].d = 5;  vorm[2].d = 3;  vorm[3].d = 1; vorm[4].d = 7;
 vorm[5].d = 2;  vorm[6].d = 6;  vorm[7].d = 4; vorm[8].d = 8;
 for(let i=1; i<5; i++){vorm[i+i-1].x = x-2*n;vorm[i+i].x = x+2*n;}}
function buttondp3Action()
 {vorm[1].d = 6;  vorm[2].d = 2;  vorm[3].d = 2; vorm[4].d = 6;
  vorm[5].d = 3;  vorm[6].d = 5;  vorm[7].d = 5; vorm[8].d = 7;
 for(let i=1; i<5; i++){vorm[i+i-1].x = x-3*n;vorm[i+i].x = x+3*n;}}
function buttondp4Action()
 {vorm[1].d = 3;  vorm[2].d = 5;  vorm[3].d = 7; vorm[4].d = 1;
  vorm[5].d = 8;  vorm[6].d = 8;  vorm[7].d = 7; vorm[8].d = 5;
 for(let i=1; i<5; i++){vorm[i+i-1].x = x-2*n;vorm[i+i].x = x+2*n;}}
function buttondp5Action()
 {vorm[1].d = 0;  vorm[2].d = 0;  vorm[3].d = 4; vorm[4].d = 4;
  vorm[5].d = 5;  vorm[6].d = 3;  vorm[7].d = 7; vorm[8].d = 5;
  for(let i=1; i<5; i++){vorm[i+i-1].x = x+3*n;vorm[i+i].x = x-3*n;}}
function buttonRAUAction()
  {if (ruitjes){ruitjes = false;} else {ruitjes = true;}}
  function buttonHLAction()
  {if (hl) {for(let i=1; i<9; i++){vorm[i].n = 2*n; vorm[i].l=3*n; hl=false;}}
  else{for(let i=1; i<9; i++){vorm[i].n = n; vorm[i].l = 2*n; hl=true;}}}
function buttonDAction(){save('acht_parallellogrammen.png');}