let vorm = []; let x; let n; let lr = true;
let zwartwit = false; let sliderAan = true;
function setup() {
  buttonReset = createButton('reset');
  buttonReset.position(20,40);buttonReset.style('width','70px');
  buttonReset.mouseClicked(buttonResetAction);
  buttonRH = createButton('rood h');
  buttonRH.position(20,80);buttonRH.style('width','70px');
  buttonRH.mouseClicked(buttonRHAction);
  buttonRV = createButton('rood v');
  buttonRV.position(100,80);buttonRV.style('width','70px');
  buttonRV.mouseClicked(buttonRVAction);
  buttonGH = createButton('groen h');
  buttonGH.position(20,120);buttonGH.style('width','70px');
  buttonGH.mouseClicked(buttonGHAction);
  buttonGV = createButton('groen v');
  buttonGV.position(100,120);buttonGV.style('width','70px');
  buttonGV.mouseClicked(buttonGVAction);
  buttonBH = createButton('blauw h');
  buttonBH.position(20,160);buttonBH.style('width','70px');
  buttonBH.mouseClicked(buttonBHAction);
  buttonBV = createButton('blauw v');
  buttonBV.position(100,160);buttonBV.style('width','70px');
  buttonBV.mouseClicked(buttonBVAction);
  buttonZ = createButton('zwart');
  buttonZ.position(20,200);buttonZ.style('width','70px');
  buttonZ.mouseClicked(buttonZAction);
  buttonX = createButton('x=x');
  buttonX.position(20,240);buttonX.style('width','70px');
  buttonX.mouseClicked(buttonXAction);
  buttonX1 = createButton('x=n/2');
  buttonX1.position(100,240);buttonX1.style('width','70px');
  buttonX1.mouseClicked(buttonX1Action);
  buttonX2 = createButton('x=n');
  buttonX2.position(20,280);buttonX2.style('width','70px');
  buttonX2.mouseClicked(buttonX2Action);
  buttonLR = createButton('li<->re');
  buttonLR.position(100,280);buttonLR.style('width','70px');
  buttonLR.mouseClicked(buttonLRAction);
 
  if (sliderAan) {
  slidersw = createSlider(2, 50, 8, 1);
  slidersw.position(20,320);
  slidersw.style('width', '80px');
  sliderAan = false;
}
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,360);buttonZW.style('width','110px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,400);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth,windowHeight);
  x = width/2; let y = height/2; n = height/4;
   let sw = n/10; let c = color(255,0,0);
   // de waarde van sw wordt bepaald door slidersw
  vorm[0] = new Spiraal_8gr_gk(n, 0, 8, x-n, y,   0, sw,c);
  vorm[1] = new Spiraal_8gr_gk(n, 1, 8, x-n, y, -90, sw,c);
  vorm[2] = new Spiraal_8gr_gk(n, 0, 8, x-n, y, -90, sw,c);
  vorm[3] = new Spiraal_8gr_gk(n, 1, 8, x-n, y, 180, sw,c);
  vorm[4] = new Spiraal_8gr_gk(n, 0, 8, x+n, y,-180, sw,c);
  vorm[5] = new Spiraal_8gr_gk(n, 1, 8, x+n, y,  90, sw,c);
  vorm[6] = new Spiraal_8gr_gk(n, 0, 8, x+n, y,  90, sw,c);
  vorm[7] = new Spiraal_8gr_gk(n, 1, 8, x+n, y,   0, sw,c);
}
 
function draw() {
  if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
  lijndikte()
  for (let i=0; i<8; 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]);
 }
}
 
function buttonResetAction(){setup();}
function buttonRHAction(){vorm[0].c=color(255,0,0);
 vorm[3].c=color(255,0,0);vorm[4].c=color(255,0,0);vorm[7].c=color(255,0,0);}
function buttonRVAction(){vorm[1].c=color(255,0,0);
 vorm[2].c=color(255,0,0);vorm[5].c=color(255,0,0);vorm[6].c=color(255,0,0);}
function buttonGHAction(){vorm[0].c=color(0,255,0);
 vorm[3].c=color(0,255,0);vorm[4].c=color(0,255,0);vorm[7].c=color(0,255,0);}
function buttonGVAction(){vorm[1].c=color(0,255,0);
 vorm[2].c=color(0,255,0);vorm[5].c=color(0,255,0);vorm[6].c=color(0,255,0);}
function buttonBHAction(){vorm[0].c=color(0,0,255);
 vorm[3].c=color(0,0,255);vorm[4].c=color(0,0,255);vorm[7].c=color(0,0,255);}
function buttonBVAction(){vorm[1].c=color(0,0,255);
 vorm[2].c=color(0,0,255);vorm[5].c=color(0,0,255);vorm[6].c=color(0,0,255);}
function buttonZAction()
 {for(let i=0; i<8; i++){vorm[i].c = color(0,0,0)}}
function buttonXAction()
 {for(let i=0; i<8; i++){vorm[i].x = x}}
function buttonX1Action()
 {for(let i=0;i<4;i++){vorm[i].x=x-n/2;}
  for(let i=4;i<8;i++){vorm[i].x=x+n/2;}}
function buttonX2Action()
 {for(let i=0;i<4;i++){vorm[i].x=x-n;}
  for(let i=4;i<8;i++){vorm[i].x=x+n;}}
 function buttonLRAction()
 {if(lr){vorm[0].lr=1;vorm[3].lr=0;vorm[4].lr=1;vorm[7].lr=0;lr=false;}
   else {vorm[0].lr=0;vorm[3].lr=1;vorm[4].lr=0;vorm[7].lr=1;lr=true;}}
function lijndikte(){let slider = slidersw.value();
  for (let i=0; i<8; i++){vorm[i].sw = slider}};
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit = true;}}
function buttonDAction(){save('acht_spiralens.png');}