vorm = []; let ruitjespap; let n; let y;
let aan_uit = true; let rond = false; let grkl = false;
 
function setup()  {
  createCanvas(windowWidth, windowHeight);
 buttonR = createButton('reset');
 buttonR.position(20,40); buttonR.style('width','70px');
 buttonR.mouseClicked(buttonRAction);
 buttonV1 = createButton('verpl 1');
 buttonV1.position(20, 80); buttonV1.style('width','70px');
 buttonV1.mouseClicked(buttonV1Action);
 buttonV2 = createButton('verpl 2');
 buttonV2.position(100, 80); buttonV2.style('width','70px');
 buttonV2.mouseClicked(buttonV2Action);
 buttonV3 = createButton('verpl 3');
 buttonV3.position(20, 120); buttonV3.style('width','70px');
 buttonV3.mouseClicked(buttonV3Action);
 buttonGK = createButton('groter / kleiner');
 buttonGK.position(20, 160); buttonGK.style('width','110px');
 buttonGK.mouseClicked(buttonGKAction);
 buttonKZ =createButton('kleur z');
 buttonKZ.position(20,200); buttonKZ.style('width','70px');
 buttonKZ.mouseClicked(buttonKZAction);
 buttonKH = createButton('kleur h');
 buttonKH.position(100,200); buttonKH.style('width','70px')
 buttonKH.mouseClicked(buttonKHAction);
 buttonRUA = createButton('rond aan / uit');
 buttonRUA.position(20,240); buttonRUA.style('width','110px')
 buttonRUA.mouseClicked(buttonRUAAction);
 buttonL0 =createButton('lijn 0');
 buttonL0.position(20,280); buttonL0.style('width','70px');
 buttonL0.mouseClicked(buttonL0Action);[]
 buttonLZ= createButton('lijn z');
 buttonLZ.position(100,280);buttonLZ.style('width','70px');
 buttonLZ.mouseClicked(buttonLZAction);
 buttonAU= createButton('rotaties aan/uit');
 buttonAU.position(20,320);buttonAU.style('width','120px');
 buttonAU.mouseClicked(buttonAUAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,360); buttonD.style('width','100px');
 buttonD.mouseClicked(buttonDAction);
 let x = width/2; y = height/2; n = height/12;
 let stroke = 1;
 let sw = n/50; let alfa = 100;
  //argumenten van de constructor
//1) grootte, 2) links/rechts, 3) draaipunt, 4) x positie, 5) y positie,
//6) hoek     7) vormkleur,    8) lijndikte, 9) lijnkleur
//                 1  2  3   4     5    6        7               8     9
  vorm[0] = new Lt(n, 1, 3, x-n,  y-n, 90, color(8,250,66,alfa),sw, color(stroke));
  vorm[1] = new Lt(n, 0, 4, x+n,  y-n,-90, color(8,250,66,alfa),sw, color(stroke));
  vorm[2] = new Lt(n, 0, 3, x-n,  y-n,  0, color(252,0,21,alfa),sw, color(stroke));
  vorm[3] = new Lt(n, 1, 4, x+n,  y-n,  0, color(252,0,21,alfa),sw, color(stroke));
  vorm[4] = new Lt(n, 1, 1, x-2*n,y, -180, color(250,226,8,alfa),sw, color(stroke));
  vorm[5] = new Lt(n, 0, 6, x+2*n,y, -180, color(250,226,8,alfa),sw, color(stroke));
  vorm[6] = new Lt(n, 1, 2, x-2*n,y,    0, color(8,175,250,alfa),sw, color(stroke));
  vorm[7] = new Lt(n, 0, 5, x+2*n,y,    0, color(8,175,250,alfa),sw, color(stroke));
  ruitjespap = new Ruitjes(n,x,y);
}
function draw(){
  //  background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
 //ruitjespap.display();
 for (let i = 0; i< 8; i++)
  {
  vorm[i].display();
  //vorm[i].dpAan();
  }
  if (aan_uit) {
  vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
  vorm[2].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
  vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
  vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotLi(vorm[7]);
 }
}
 
function buttonRAction(){setup();} //reset
function buttonKZAction() { //lijnkleur zacht
  for (let i = 0; i< 8; i++)
   {
     vorm[i].c = color(random(0,200),random(0,255),random(0,255),100);
     vorm[i].sc = color(random(0,200),random(0,255),random(0,255),100);
     vorm[i].sw = n*0.8;
  }
}
 function buttonKHAction () { //lijnkleur hard
   for (let i = 0; i< 8; i++)
{
    vorm[i].c = color(random(0,200),random(0,255),random(0,255),200);
    vorm[i].sc = color(random(0,200),random(0,255),random(0,255),200);
    vorm[i].sw = n*0.8;
  }
}
 function buttonRUAAction(){if (rond){strokeJoin(ROUND);rond = false;}
                                else{strokeJoin(MITER);rond = true;}}
 function buttonGKAction() //groter /kleiner
{if (grkl){for(let i =0;i<8;i++){vorm[i].nc = 2*n;vorm[i].sw = n;grkl =false;}}
      else{for(let i =0;i<8;i++){vorm[i].nc = n;  vorm[i].sw = n*0.8;grkl= true;}}}
function buttonV1Action() //verplaatsing 1
{ for (let i = 0; i < 4; i++) {vorm[i].y = y-2*n;}
  for (let i = 4; i < 8; i++) {vorm[i].y = y+n;}}
function buttonV2Action()
{vorm[0].y=y-2*n; vorm[1].y=y-2*n; vorm[2].y=y-n;  vorm[3].y=y-n;
 vorm[4].y=y+n;   vorm[5].y=y+n;   vorm[6].y=y;    vorm[7].y=y;}
function buttonV3Action()
{vorm[0].y=y;     vorm[1].y=y;     vorm[2].y=y-2*n;vorm[3].y=y-2*n;
 vorm[4].y=y+2*n; vorm[5].y=y+2*n; vorm[6].y=y;    vorm[7].y=y;}
function buttonL0Action() {for(let i = 0; i< 8; i++) { vorm[i].sw = 0;}}
function buttonLZAction() {
  for(let i = 0; i< 8; i++) { vorm[i].sc = color(0); vorm[i].sw = height/500}}
function buttonAUAction(){if(aan_uit){aan_uit=false;}else{aan_uit=true;}}
function buttonDAction() {save('acht_T.png');}