vorm = [];  rood=true; groen=false; blauw=false; ruitDrieh = true;
sliderAan = 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);
 buttonR = createButton('ruit en drieh aan/uit');
 buttonR.position(20,200);buttonR.style('width','140px');
 buttonR.mouseClicked(buttonRAction);
 buttonD = createButton('downloaden');
 if (sliderAan) {
   sliderhoek = createSlider(-180, 180, 0, 1);
   sliderhoek.position(20,240);
   sliderhoek.style('width', '80px');
   sliderAan = false;
 }
 buttonD.position(20,280);buttonD.style('width','100px');
 buttonD.mouseClicked(buttonDAction);blauw
 createCanvas(windowWidth, windowHeight);
  let x  = width/2;      let y = height/2;let n  = height/10;
  let hn = sqrt(3*n*n/4);let dpb = 7; let hoek = 180;
  let xp = x-2*n; let sw= n/80; let sc = color(0);
  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, dpb, xp, y+3*n,  hoek, kl1,kl2,kl3,sw,sc);
  vorm[1] = new Box(n,n, dpb, xp, y+2*n,  hoek, kl1,kl2,kl3,sw,sc);
  vorm[2] = new Box(n,n, dpb, xp, y+n,    hoek, kl1,kl2,kl3,sw,sc);
  vorm[3] = new Box(n,n, dpb, xp, y,      hoek, kl1,kl2,kl3,sw,sc);
  vorm[4] = new Box(n,n, dpb, xp, y-n,    hoek, kl1,kl2,kl3,sw,sc);
  vorm[5] = new Box(n,n, dpb, xp, y-2*n,  hoek, kl1,kl2,kl3,sw,sc);
  vorm[6] = new Box(n,n, dpb, xp, y-3*n,  hoek, kl1,kl2,kl3,sw,sc);
  vorm[7] = new Box(n,n, dpb, xp+hn,   y-2.5*n, hoek,kl1,kl2,kl3,sw,sc);
  vorm[8] = new Box(n,n, dpb, xp+2*hn, y-2*n,   hoek,kl1,kl2,kl3,sw,sc);
  vorm[9] = new Box(n,n, dpb, xp+3*hn, y-1.5*n, hoek,kl1,kl2,kl3,sw,sc);
  vorm[10] = new Box(n,n,dpb, xp+4*hn, y-n,     hoek,kl1,kl2,kl3,sw,sc);
  vorm[11] = new Box(n,n,dpb, xp+5*hn, y-n/2,   hoek,kl1,kl2,kl3,sw,sc);
  vorm[12] = new Box(n,n,dpb, xp+6*hn, y,       hoek,kl1,kl2,kl3,sw,sc);
  vorm[13] = new Box(n,n,dpb, xp+5*hn, y+n/2,   hoek,kl1,kl2,kl3,sw,sc);
  vorm[14] = new Box(n,n,dpb, xp+4*hn, y+n,     hoek,kl1,kl2,kl3,sw,sc);
  vorm[15] = new Box(n,n,dpb, xp+3*hn, y+1.5*n, hoek,kl1,kl2,kl3,sw,sc);
  vorm[16] = new Box(n,n,dpb, xp+2*hn, y+2*n,   hoek,kl1,kl2,kl3,sw,sc);
  vorm[17] = new Ruit(n, 5,   xp+2*hn, y+2*n,  30,kl3,sw,sc);
  vorm[18] = new Drieh_nh(n,hn,3,xp+2*hn,y+2*n,90,kl1,sw,sc);
 
}
function draw() {
clear();
background('rgba(255,255,255, 0)');
boxhoek();
  for (let i = 0; i < 17; i++)
  {
  vorm[i].display();
  }
  if (ruitDrieh) {vorm[17].display(); vorm[18].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 buttonRAction()
 {if(ruitDrieh){ruitDrieh = false;} else {ruitDrieh = true;}}
function boxhoek(){let slider = sliderhoek.value();
 for (let i=0; i<17; i++){vorm[i].hoek = slider}};
function buttonDAction() {save('penrose_driehoek.png');}