let vorm = []; let zwartwit = false; let hoek = 0;
function centerCanvas() {
  let x = (windowWidth - width) / 2;
  let y = (windowHeight- height)/ 2;
  cnv.position(x, y);}
 
function setup()  {
  cnv = createCanvas(1000,1000);
   centerCanvas();
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,130);buttonZW.style('width','120px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonR1 = createButton('reset h 0');
  buttonR1.position(20,160);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset h 45');
  buttonR2.position(100,160);buttonR2.style('width','80px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset h 90');
  buttonR3.position(20,190);buttonR3.style('width','80px');
  buttonR3.mouseClicked(buttonR3Action);
  buttondp0 = createButton('dp 0');
  buttondp0.position(20,220);buttondp0.style('width','70px');
  buttondp0.mouseClicked(buttondp0Action);
  buttondp1 = createButton('dp 1');
  buttondp1.position(100,220);buttondp1.style('width','70px');
  buttondp1.mouseClicked(buttondp1Action);
  buttondp2 = createButton('dp 2');
  buttondp2.position(20,250);buttondp2.style('width','70px');
  buttondp2.mouseClicked(buttondp2Action);
  buttondp3 = createButton('dp 3');
  buttondp3.position(100,250);buttondp3.style('width','70px');
  buttondp3.mouseClicked(buttondp3Action);
  buttondp4 = createButton('dp 4');
  buttondp4.position(20,280);buttondp4.style('width','70px');
  buttondp4.mouseClicked(buttondp4Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,310);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
 
  let x = width/2; let y = height/2; let n = height/22; let sc = color(0);
  let a = sqrt(2*n*n); let alfa = 150; const sw = n/50;
  const ch0 = color(10,10,10,0);     const ch1 = color(255,0,0,   alfa);
  const ch2 = color(50,255,10,alfa); const ch3 = color(87,245,57, alfa);
  const ch4 = color(5,252,6,  alfa); const cb1 = color(59,247,22, alfa);
  const cb2 = color(34,129,16,alfa); const cb3 = color(100,227,76,alfa);
  vorm[0] = new Hoek3d_na4n(n, 4, x-5*n, y-5*n, -45+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[1] = new Hoek3d_na2n(n, 4, x-3*n, y-3*n, -45+hoek,ch0,ch0,ch0,ch0,ch0,sw,color(0));
  vorm[2] = new Hoek3d_na4n(n, 4, x+5*n, y-5*n , 45+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[3] = new Hoek3d_na2n(n, 4, x+3*n, y-3*n , 45+hoek,ch0,ch0,ch0,ch0,ch0,sw,color(0));
  vorm[4] = new Hoek3d_na4n(n, 4, x+5*n, y+5*n, 135+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[5] = new Hoek3d_na2n(n, 4, x+3*n, y+3*n, 135+hoek,ch0,ch0,ch0,ch0,ch0,sw,color(0));
  vorm[6] = new Hoek3d_na4n(n, 4, x-5*n, y+5*n,-135+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[7] = new Hoek3d_na2n(n, 4, x-3*n, y+3*n,-135+hoek,ch0,ch0,ch0,ch0,ch0,sw,color(0));
  vorm[8] = new Box_nh(n*2, a, 7, x-2*n, y-n,  45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[9] = new Box_nh(n*2, a, 7, x+2*n, y-n, -45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[10] = new Box_nh(n*2,a, 7, x-2*n, y+n, 135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[11] = new Box_nh(n*2,a, 7, x+2*n, y+n,-135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[12] = new Box_nh(n*2,a, 7, x-n, y-2*n,-135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[13] = new Box_nh(n*2,a, 7, x-n, y+2*n, -45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[14] = new Box_nh(n*2,a, 7, x+n, y-2*n, 135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[15] = new Box_nh(n*2,a, 7, x+n, y+2*n,  45+hoek,cb1,cb2,cb3,sw,sc);
}
 
function draw()  {
  if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
  for (let i = 0; i < 16; i++) {vorm[i].display();}
 
   if (key == 's' || key == 'S') { }
   else {
  vorm[8].yUpDown(); vorm[9].yUpDown();
  vorm[10].yDownUp();vorm[11].yDownUp();
  vorm[12].xReLi();  vorm[13].xReLi();
  vorm[14].xLiRe();  vorm[15].xLiRe();
  }
}
 
function windowResized() {centerCanvas();}
function buttonZWAction()
  {if(zwartwit){zwartwit=false;
    vorm[1].sc = color(0); vorm[3].sc = color(0);
    vorm[5].sc = color(0); vorm[7].sc = color(0);}
   else {zwartwit=true;vorm[1].sc = color(255,0,0);vorm[3].sc = color(255,0,0);
                       vorm[5].sc = color(255,0,0);vorm[7].sc = color(255,0,0);}}
function buttonR1Action(){hoek = 0;setup()
  if(zwartwit){vorm[1].sc = color(255,0,0);vorm[3].sc = color(255,0,0);
               vorm[5].sc = color(255,0,0);vorm[7].sc = color(255,0,0);}}
function buttonR2Action(){hoek =45;setup();
  if(zwartwit){vorm[1].sc = color(255,0,0);vorm[3].sc = color(255,0,0);
               vorm[5].sc = color(255,0,0);vorm[7].sc = color(255,0,0);}}
function buttonR3Action(){hoek =90;setup();
  if(zwartwit){vorm[1].sc = color(255,0,0);vorm[3].sc = color(255,0,0);
               vorm[5].sc = color(255,0,0);vorm[7].sc = color(255,0,0);}}
function buttondp0Action()
 {for (let i = 0; i < 8;  i++){vorm[i].d = 4};
  for (let i = 8; i < 16; i++){vorm[i].d = 7}}
function buttondp1Action()
  {for (let i = 0; i < 8;  i++){vorm[i].d = 2};
   for (let i = 8; i < 16; i++){vorm[i].d = 2}}
function buttondp2Action()
  {for (let i = 0; i < 8;  i++){vorm[i].d = 6};
   for (let i = 8; i < 16; i++){vorm[i].d = 6}}
function buttondp3Action()
  {for (let i = 0; i < 8;  i++){vorm[i].d = 4};
   for (let i = 8; i < 16; i++){vorm[i].d = 2}}
function buttondp4Action()
  {for (let i = 0; i < 8; i++){vorm[i].d = 6};
  for (let i = 8; i < 16; i++){vorm[i].d = 5}}
  function buttonDAction(){save('hoekbalken_boxen.png');}