let vorm = []; let hoekB = 0; let hoekR = 0; let h;
 let zwartwit = false; let langkort = true;
function  setup() {
 buttonH0 = createButton('reset');
 buttonH0.position(20,30);buttonH0.style('width','80px');
 buttonH0.mouseClicked(buttonH0Action);
 buttonH1B = createButton('reset hb 45');
 buttonH1B.position(20,60);buttonH1B.style('width','90px');
 buttonH1B.mouseClicked(buttonH1BAction);
 buttonH2B = createButton('reset hb 90');
 buttonH2B.position(20,90);buttonH2B.style('width','90px');
 buttonH2B.mouseClicked(buttonH2BAction);
 buttonH1R = createButton('reset hr 60');
 buttonH1R.position(20,120);buttonH1R.style('width','90px');
 buttonH1R.mouseClicked(buttonH1RAction);
 buttonH2R = createButton('reset hr 90');
 buttonH2R.position(20,150);buttonH2R.style('width','90px');
 buttonH2R.mouseClicked(buttonH2RAction);
 buttonZW = createButton('zwart/wit');
 buttonZW.position(20,180);buttonZW.style('width','90px');
 buttonZW.mouseClicked(buttonZWAction);
 buttonLK = createButton('lang kort');
 buttonLK.position(20,210);buttonLK.style('width','90px');
 buttonLK.mouseClicked(buttonLKAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,240);buttonD.style('width','90px');
 buttonD.mouseClicked(buttonDAction);
 
 createCanvas(windowWidth, windowHeight);
 let x = width/2;   let y = height/2; let n = height/5;
     h = height/5; let hn = sqrt(3*n*n/4);
 let c1 = color(255, 0, 0, 50); let c2 = color(0, 255, 0, 50);
 let c3 = color(0, 0, 255, 100);
 let sc = color(0); let sw = n/100; let alfa = 100;
 
 vorm[0] = new Ruit(n, 7, x-2*hn, y-n, 60+hoekR, color(245, 139,25, alfa), sw, sc);
 vorm[1] = new Ruit(n, 1, x-hn, y-n/2,  0+hoekR, color(255, 255, 0, alfa), sw, sc);
 vorm[2] = new Ruit(n, 7, x,    y-n,   90+hoekR, color(25, 228,245, alfa), sw, sc);
 vorm[3] = new Ruit(n, 1, x+hn, y-n/2,  0,       color(0, 255, 0,   alfa), sw, sc);
 vorm[4] = new Ruit(n, 3, x+2*hn, y-n,-60+hoekR, color(245, 139,25, alfa), sw, sc);
 vorm[5] = new Ruit(n, 7, x-2*hn, y+n,-60+hoekR, color(245, 139,25, alfa), sw, sc);
 vorm[6] = new Ruit(n, 5, x-hn, y+n/2,  0+hoekR, color(0, 255, 0,   alfa), sw, sc);
 vorm[7] = new Ruit(n, 3, x,    y+n,   90+hoekR, color(255, 0, 200, alfa), sw, sc);
 vorm[8] = new Ruit(n, 5, x+hn, y+n/2,  0,       color(255, 255, 0, alfa), sw, sc);
 vorm[9] = new Ruit(n, 3, x+2*hn, y+n, 60+hoekR, color(245, 139, 25,alfa), sw, sc);
 vorm[10] = new Box(n, h, 7, x-2*hn,y,  0+hoekB, c1, c2, c3, sw, sc);
 vorm[11] = new Box(n, h, 7, x,     y,  0+hoekB, c1, c2, c3, sw, sc);
 vorm[12] = new Box(n, h, 7, x+2*hn,y,  0+hoekB, c1, c2, c3, sw, sc);
}
 
function draw() {
   if (zwartwit) {background(0)}
  else{clear(); background('rgba(255,255,255, 0)');}
 
 for (let i = 0; i <= 12; i++)
 {
   vorm[i].display();
 }
 
 if (key == 's' || key == 'S') {  }
 else {
 vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
 vorm[3].dpRotRe(vorm[3]); vorm[4].dpRotLi(vorm[4]);
 vorm[5].dpRotLi(vorm[5]); vorm[6].dpRotRe(vorm[6]);
 vorm[8].dpRotLi(vorm[8]); vorm[9].dpRotRe(vorm[9]);
  }
}
 
 function buttonH0Action(){hoekB = 0; hoekR = 0;setup();}
 function buttonH1BAction(){hoekB = 45;setup();}
 function buttonH2BAction(){hoekB = 90;setup();}
 function buttonH1RAction(){hoekR = 60;setup();}
 function buttonH2RAction(){hoekR = 90;setup();}
 function buttonZWAction()
  {if(zwartwit){zwartwit=false;}else{zwartwit=true;}}
 function buttonLKAction()
 {if(langkort){vorm[10].h = h*2;vorm[11].h = h*2;vorm[12].h = h*2;langkort = false;}
          else{vorm[10].h = h;  vorm[11].h = h;  vorm[12].h = h;  langkort = true;}}
 function buttonDAction(){save('drie_boxen_tien_ruiten.png');}