vorm = []; let ruitjes; let n; let x; rechth = true; zwartwit = false;
function setup() {
createCanvas(windowWidth, windowHeight);
 buttonR1 = createButton('reset');
 buttonR1.position(20,40);buttonR1.style('width','70px');
 buttonR1.mouseClicked(buttonR1Action);
 buttondp0 = createButton('dp 0');
 buttondp0.position(20,80);buttondp0.style('width','70px');
 buttondp0.mouseClicked(buttondp0Action);
 buttondp1 = createButton('dp 1a');
 buttondp1.position(20,120);buttondp1.style('width','70px');
 buttondp1.mouseClicked(buttondp1Action);
 buttondp2 = createButton('dp 1b');
 buttondp2.position(100,120);buttondp2.style('width','70px');
 buttondp2.mouseClicked(buttondp2Action);
 buttondp3 = createButton('dp 2a');
 buttondp3.position(20,160);buttondp3.style('width','70px');
 buttondp3.mouseClicked(buttondp3Action);
 buttondp4 = createButton('dp 2b');
 buttondp4.position(100,160);buttondp4.style('width','70px');
 buttondp4.mouseClicked(buttondp4Action);
 buttondp5 = createButton('dp 3a');
 buttondp5.position(20,200);buttondp5.style('width','70px');
 buttondp5.mouseClicked(buttondp5Action);
 buttondp6 = createButton('dp 3b');
 buttondp6.position(100,200);buttondp6.style('width','70px');
 buttondp6.mouseClicked(buttondp6Action);
 buttondp7 = createButton('dp 4a');
 buttondp7.position(20,240);buttondp7.style('width','70px');
 buttondp7.mouseClicked(buttondp7Action);
 buttondp8 = createButton('dp 4b');
 buttondp8.position(100,240);buttondp8.style('width','70px');
 buttondp8.mouseClicked(buttondp8Action);
 buttonx1 = createButton('x1');
 buttonx1.position(20,280);buttonx1.style('width','70px');
 buttonx1.mouseClicked(buttonx1Action);
 buttonx2 = createButton('x2');
 buttonx2.position(100,280);buttonx2.style('width','70px');
 buttonx2.mouseClicked(buttonx2Action);
 buttonRechth= createButton('vierkant aan/uit');
 buttonRechth.position(20,320);buttonRechth.style('width','120px');
 buttonRechth.mouseClicked(buttonRechthAction);
 buttonZW = createButton('zwart/wit');
 buttonZW.position(20,360);buttonZW.style('width','120px');
 buttonZW.mouseClicked(buttonZWAction);
 buttonRAU = createButton('ruitjes aan uit');
 buttonRAU.position(20,400);buttonRAU.style('width','120px');
 buttonRAU.mouseClicked(buttonRAUAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,440); buttonD.style('width','100px');
 buttonD.mouseClicked(buttonDAction);
  x = width/2; let y = height/2; n = height/5;
  let a = sqrt(2*n*n); let hn = sqrt(3*n*n/4);
  let alfa = 100; let sw = n/100; let sc = color(0);
  vorm[0] = new Ruit(n, 1, x-3*n/2, y-hn,  30, color(255, 255, 0, alfa),sw,sc);
  vorm[1] = new Ruit(n, 1, x+3*n/2, y-hn, -30, color(250, 110,100,alfa),sw,sc);
  vorm[2] = new Ruit(n, 1, x+3*n/2, y+hn,-150, color(251, 122, 99,alfa),sw,sc);
  vorm[3] = new Ruit(n, 1, x-3*n/2, y+hn, 150, color(0, 255, 0,   alfa),sw,sc);
  vorm[4] = new Ruit(n, 1, x-n,     y,     60, color(30, 247, 220,alfa),sw,sc);
  vorm[5] = new Ruit(n, 1, x+n,     y,    -60, color(247, 201, 30,alfa),sw,sc);
  vorm[6] = new Ruit(n, 1, x+n,     y,    240, color(178, 247, 50,alfa),sw,sc);
  vorm[7] = new Ruit(n, 1, x-n,     y,   -240, color(30, 176, 247,alfa),sw,sc);
  vorm[8] = new Rechthoek(a,a,0, x, y,     45, color(0, 200, 0,   alfa),sw,sc);
  ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
  if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
 
  for (let i = 0; i < 8; i++){vorm[i].display();}
  if (rechth) {vorm[8].display()}
 
  if (ruitjes) {ruitjespap.display();
   for (let i = 0; i < 9; i++) {vorm[i].dpAan();}};
 
  if (key == 's'|| key == 'S') { }
   else
 {
vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
vorm[5].dpRotRe(vorm[5]); vorm[4].dpRotLi(vorm[4]);
vorm[7].dpRotRe(vorm[7]); vorm[6].dpRotLi(vorm[6]);
}
}
 
function buttonR1Action(){setup();}
function buttondp0Action()
{for(let i = 0; i<8; i++) {vorm[i].d =1}}
function buttondp1Action()
{vorm[0].d=7; vorm[1].d=3; vorm[2].d=7; vorm[3].d=3;}
function buttondp2Action()
{vorm[4].d=5; vorm[5].d=1; vorm[6].d=5; vorm[7].d=1;}
function buttondp3Action()
{vorm[0].d=2; vorm[1].d=8; vorm[2].d=2; vorm[3].d=8;}
function buttondp4Action()
{vorm[4].d=6; vorm[5].d=4; vorm[6].d=6; vorm[7].d=4;}
function buttondp5Action()
{vorm[0].d=6; vorm[1].d=4; vorm[2].d=6; vorm[3].d=4;}
function buttondp6Action()
{vorm[4].d=2; vorm[5].d=8; vorm[6].d=2; vorm[7].d=8;}
function buttondp7Action()
{vorm[0].d=5; vorm[1].d=5; vorm[2].d=5; vorm[3].d=5;}
function buttondp8Action()
{vorm[4].d=7; vorm[5].d=3; vorm[6].d=7; vorm[7].d=3;}
function buttonx1Action()
{vorm[4].x=x-n; vorm[5].x=x+n;vorm[6].x=x+n;vorm[7].x=x-n;}
function buttonx2Action()
{vorm[4].x=x-2*n; vorm[5].x=x+2*n;vorm[6].x=x+2*n;vorm[7].x=x-2*n;}
function buttonRechthAction()
  {if (rechth){rechth = false;} else {rechth=true;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit=true;}}
function buttonRAUAction()
  {if (ruitjes){ruitjes = false;} else {ruitjes=true;}}
function buttonDAction() {save('zeven_ruiten.png');}