let vorm = []; rood=true; groen=false; blauw=false; sliderAan = true;
 let kl1; let kl2; let kl3; let ds = 1.5; boxpos = true; ruit = true;
function setup() {
  buttonC1 = createButton('blauw');
  buttonC1.position(20,80);buttonC1.style('width','70px');
  buttonC1.mouseClicked(buttonC1Action);
  buttonC2 = createButton('rood');
  buttonC2.position(20,120);buttonC2.style('width','70px');
  buttonC2.mouseClicked(buttonC2Action);
  buttonC3 = createButton('groen');
  buttonC3.position(20,160);buttonC3.style('width','70px');
  buttonC3.mouseClicked(buttonC3Action);
  buttonB = createButton('positie boxen');
  buttonB.position(20,200);buttonB.style('width','100px');
  buttonB.mouseClicked(buttonBAction);
  buttonR = createButton('ruiten aan/uit');
  buttonR.position(20,240);buttonR.style('width','100px');
  buttonR.mouseClicked(buttonRAction);
 
  if (sliderAan) {
     sliderhoek = createSlider(-180, 120, -30, 1);
     sliderhoek.position(20,280);
     sliderhoek.style('width', '80px');
     sliderAan = false;
   }
 
  buttonD = createButton('downloaden');
  buttonD.position(20,320);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);blauw
 
createCanvas(windowWidth, windowHeight);
  let x = width/2;   let y = height/1.4;  let n = height/8;
  let sw = n/50;    let sc = color(0); let hoek = -30;
  let positie = 60; let dp = 7;
  let xcos = cos(radians(positie));
  let ysin = sin(radians(positie));
 
  if(blauw){kl1=color(39,95,139);kl2=color(15,195,245);kl3=color(133,199,252);}
  if(rood) {kl1=color(209,2,38); kl2=color(255,41,48); kl3=color(255,134,138);}
  if(groen){kl1=color(48,152,32);kl2=color(72,245,47); kl3=color(133,245,116);}
 
  vorm[0] = new Box(n,n,dp, x-n*ds*xcos,   y-n*ds*ysin,   hoek, kl1,kl2,kl3,sw,sc);
  vorm[1] = new Box(n,n,dp, x-n*2*ds*xcos, y-n*2*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
  vorm[2] = new Box(n,n,dp, x-n*3*ds*xcos, y-n*3*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
  vorm[3] = new Box(n,n,dp, x-n*ds*xcos,   y-n*3*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
  vorm[4] = new Box(n,n,dp, x+n*ds*xcos,   y-n*3*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
 
  vorm[5] = new Box(n,n,dp, x+n*3*ds*xcos, y-n*3*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
  vorm[6] = new Box(n,n,dp, x+n*2*ds*xcos, y-n*2*ds*ysin, hoek, kl1,kl2,kl3,sw,sc);
 
  vorm[7] = new Box(n,n,dp, x+n*ds*xcos,  y-n*ds*ysin,    hoek, kl1,kl2,kl3,sw,sc);
  vorm[8] = new Box(n,n,dp, x,               y,           hoek, kl1,kl2,kl3,sw,sc);
  vorm[9] =  new Ruit(n,3,  x-n*ds*xcos,  y-n*ds*ysin,    0, kl3,sw,sc);
  vorm[10] = new Ruit(n,dp, x-n*ds*xcos,  y-n*ds*ysin,   -60, kl2,sw,sc);
}
function draw() {
clear();
background('rgba(255,255,255, 0)');
boxhoek();
   for (let i = 0; i < 9; i++)
{
 vorm[i].display();
}
if (ruit) {vorm[9].display(); vorm[10].display();}
}
function buttonC1Action(){blauw=true; rood=false;groen=false; setup();}
function buttonC2Action(){blauw=false;rood=true; groen=false; setup();}
function buttonC3Action(){blauw=false;rood=false;groen=true;  setup();}
function buttonBAction()
{if(boxpos){ds=1.8; boxpos=false;setup();}else{ds=1.2;boxpos=true;setup();}}
function buttonRAction()
 {if(ruit){ruit = false;} else {ruit=true;}}
function boxhoek(){let slider = sliderhoek.value();
 for (let i=0; i<9; i++){vorm[i].hoek = slider}};
function buttonDAction() {save('onmogelijke_driehoek.png');}