let vorm = []; let zwartwit = false;
let cl1 = 'hsla(132, 98%, 50%, 0.5)'; let cl2 = 'hsla(187, 98%, 50%, 0.5)';
let cl3 = 'hsla(132, 98%, 50%, 0.5)'; let cl4 = 'hsla(187, 98%, 50%, 0.5)';
let cl5 = 'hsla(60, 100%, 55%, 0.5)'; let cl6 = 'hsla(0, 100%, 60%, 0.5)';
function setup() {
  buttonR1 = createButton('reset 1');
  buttonR1.position(20,30);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset 2');
  buttonR2.position(100,30);buttonR2.style('width','70px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset 3');
  buttonR3.position(20,60);buttonR3.style('width','70px');
  buttonR3.mouseClicked(buttonR3Action);
  buttonR4 = createButton('reset 4');
  buttonR4.position(100,60);buttonR4.style('width','70px');
  buttonR4.mouseClicked(buttonR4Action);
  button0 = createButton('dp 0');
  button0.position(20,90);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,150);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(20,180);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,210);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(20,240);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(20,270);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  button7 = createButton('dp 7');
  button7.position(20,300);button7.style('width','70px');
  button7.mouseClicked(button7Action);
  button8 = createButton('dp 8');
  button8.position(20,330);button8.style('width','70px');
  button8.mouseClicked(button8Action);
  button9 = createButton('dp 9');
  button9.position(20,360);button9.style('width','70px');
  button9.mouseClicked(button9Action);
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,390);buttonZW.style('width','100px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('download');
  buttonD.position(20,420);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
 
 createCanvas(windowWidth, windowHeight);
 const x = width/2; const y = height/2;
 const n = height/20; let sw = n/30; let sc = color(0);
 let c1 = color(cl1); let c2 = color(cl2);
 let c3 = color(cl3); let c4 = color(cl4);
 let c5 = color(cl5); let c6 = color(cl6);
 ruitjespap = new Ruitjes(n,x,y);
 vorm[0] = new Hoek_n3n(n, 4, x-5*n, y-5*n, -45, c1,sw,sc);
 vorm[1] = new Hoek_n3n(n, 4, x-5*n, y-5*n, -45, c2,sw,sc);
 vorm[2] = new Hoek_n3n(n, 4, x+5*n, y-5*n,  45, c1,sw,sc);
 vorm[3] = new Hoek_n3n(n, 4, x+5*n, y-5*n,  45, c2,sw,sc);
 vorm[4] = new Hoek_n3n(n, 4, x-5*n, y+5*n,-135, c1,sw,sc);
 vorm[5] = new Hoek_n3n(n, 4, x-5*n, y+5*n,-135, c2,sw,sc);
 vorm[6] = new Hoek_n3n(n, 4, x+5*n, y+5*n, 135, c1,sw,sc);
 vorm[7] = new Hoek_n3n(n, 4, x+5*n, y+5*n, 135, c2,sw,sc);
 vorm[8] = new Trap_3nan(n,  1, x-n, y-4*n, -180,c5,sw,sc);
 vorm[9] = new Trap_3nan(n,  1, x-4*n, y-n, 0,   c5,sw,sc);
 vorm[10] = new Trap_3nan(n, 1, x+4*n, y-n, -90, c6,sw,sc);
 vorm[11] = new Trap_3nan(n, 1, x+n, y-4*n,  90, c6,sw,sc);
 vorm[12] = new Trap_3nan(n, 1, x-n, y+4*n, -90, c6,sw,sc);
 vorm[13] = new Trap_3nan(n, 1, x-4*n, y+n,  90, c6,sw,sc);
 vorm[14] = new Trap_3nan(n, 1, x+4*n, y+n, -180,c5,sw,sc);
 vorm[15] = new Trap_3nan(n, 1, x+n,   y+4*n, 0, c5,sw,sc);
 vorm[16] = new Trap_3nan(n, 7, x-n, y-4*n, -90, c6,sw,sc);
 vorm[17] = new Trap_3nan(n, 7, x-4*n, y-n,  90, c6,sw,sc);
 vorm[18] = new Trap_3nan(n, 7, x+n, y-4*n, -180,c5,sw,sc);
 vorm[19] = new Trap_3nan(n, 7, x+4*n, y-n, 0,   c5,sw,sc);
 vorm[20] = new Trap_3nan(n, 7, x-4*n, y+n, -180,c5,sw,sc);
 vorm[21] = new Trap_3nan(n, 7, x-n, y+4*n,   0, c5,sw,sc);
 vorm[22] = new Trap_3nan(n, 7, x+4*n, y+n, -90, c6,sw,sc);
 vorm[23] = new Trap_3nan(n, 7, x+n,   y+4*n,90, c6,sw,sc);
}
function draw() {
  if (zwartwit) {background(0)}
     else {clear(); background('rgba(255,255,255, 0)');}
 for (let i=0; i<24; i++){vorm[i].display();}
 if (key == 's' || key== 'S') { }
  else
{
  vorm[0].dpRotLi(vorm[0]);  vorm[1].dpRotRe(vorm[1]);
  vorm[2].dpRotLi(vorm[2]);  vorm[3].dpRotRe(vorm[3]);
  vorm[4].dpRotLi(vorm[4]);  vorm[5].dpRotRe(vorm[5]);
  vorm[6].dpRotLi(vorm[6]);  vorm[7].dpRotRe(vorm[7]);
  vorm[8].dpRotRe(vorm[8]);  vorm[9].dpRotLi(vorm[9]);
  vorm[10].dpRotLi(vorm[10]); vorm[11].dpRotRe(vorm[11]);
  vorm[12].dpRotRe(vorm[12]); vorm[13].dpRotLi(vorm[13]);
  vorm[14].dpRotLi(vorm[14]); vorm[15].dpRotRe(vorm[15]);
  vorm[16].dpRotLi(vorm[16]); vorm[17].dpRotRe(vorm[17]);
  vorm[18].dpRotLi(vorm[18]); vorm[19].dpRotRe(vorm[19]);
  vorm[20].dpRotRe(vorm[20]); vorm[21].dpRotLi(vorm[21]);
  vorm[22].dpRotRe(vorm[22]); vorm[23].dpRotLi(vorm[23]);
 }
}
function windowResized() {
 resizeCanvas(windowWidth, windowHeight);
}
function buttonR1Action()
{cl1='hsla(132,98%,50%,0.5)';cl2='hsla(187,98%,50%,0.5)';
 cl5='hsla(60,100%,55%,0.5)';cl6='hsla(0,100%,60%, 0.5)';setup();}
function buttonR2Action()
{cl1='hsla(24,100%,64%,0.5)';cl2='hsla(60,100%,55%,0.5)';
 cl5='hsla(12,60%,50%,0.5)';cl6='hsla(100,100%,60%,0.5)';setup();}
function buttonR3Action()
{cl1='hsla(0,100%,50%,0.5)';cl2='hsla(150,100%,50%,0.5)';
 cl5='hsla(85,80%,50%,0.5)'; cl6='hsla(27,38%,50%,0.5)';setup();}
function buttonR4Action()
{cl1='hsla(185,100%,50%,0.5)';cl2='hsla(122,100%,50%,0.5)';
 cl5='hsla(42,98%,50%,0.5)' ;cl6='hsla(85,98%,50%,0.5)';setup();}
function button0Action(){for(let i=0; i<8; i++){vorm[i].d = 4;}
                         for(let i=8; i<16;i++){vorm[i].d = 1;}
                         for(let i=16;i<24;i++){vorm[i].d = 7;}}
function button1Action(){for(let i=0; i<8; i++){vorm[i].d = 4;}
                         for(let i=8; i<16;i++){vorm[i].d = 0;}
                         for(let i=16;i<24;i++){vorm[i].d = 0;}}
function button2Action(){for(let i=0; i<8; i++){vorm[i].d = 8;}
                         for(let i=8; i<16;i++){vorm[i].d = 3;}
                         for(let i=16;i<24;i++){vorm[i].d = 4;}}
function button3Action(){for(let i=0; i<8; i++){vorm[i].d = 2;}
                         for(let i=8; i<16;i++){vorm[i].d = 2;}
                         for(let i=16;i<24;i++){vorm[i].d = 5;}}
function button4Action(){for(let i=0; i<8; i++){vorm[i].d = 1;}
                         for(let i=8; i<16;i++){vorm[i].d = 4;}
                         for(let i=16;i<24;i++){vorm[i].d = 4;}}
function button5Action(){for(let i=0; i<8; i++){vorm[i].d = 4;}
                         for(let i=8; i<16;i++){vorm[i].d = 1;}
                         for(let i=16;i<24;i++){vorm[i].d = 0;}}
function button6Action(){for(let i=0; i<8; i++){vorm[i].d = 0;}
                         for(let i=8; i<16;i++){vorm[i].d = 8;}
                         for(let i=16;i<24;i++){vorm[i].d = 4;}}
function button7Action(){for(let i=0; i<8; i++){vorm[i].d = 3;}
                         for(let i=8; i<16;i++){vorm[i].d = 3;}
                         for(let i=16;i<24;i++){vorm[i].d = 5;}}
function button8Action(){for(let i=0; i<8; i++){vorm[i].d = 6;}
                         for(let i=8; i<16;i++){vorm[i].d = 2;}
                         for(let i=16;i<24;i++){vorm[i].d = 6;}}
function button9Action(){for(let i=0; i<8; i++){vorm[i].d = 2;}
                         for(let i=8; i<16;i++){vorm[i].d = 4;}
                         for(let i=16;i<24;i++){vorm[i].d = 2;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit = true;}}
function buttonDAction(){save('hoeken_trapeziums.png');}