vorm = []; let n; let x; let y;
let zwartwit = false; let sliderAan = true;
function setup() {
  buttonR = createButton('reset');
  buttonR.position(20,40);buttonR.style('width','70px');
  buttonR.mouseClicked(buttonRAction);
  button0x = createButton('x=0');
  button0x.position(20,80);button0x.style('width','70px');
  button0x.mouseClicked(button0xAction);
  button0y = createButton('y=0');
  button0y.position(100,80);button0y.style('width','70px');
  button0y.mouseClicked(button0yAction);
  button2x = createButton('x=n/2');
  button2x.position(20,120);button2x.style('width','70px');
  button2x.mouseClicked(button2xAction);
  button2y = createButton('y=n/2');
  button2y.position(100,120);button2y.style('width','70px');
  button2y.mouseClicked(button2yAction);
  button4x = createButton('x=n');
  button4x.position(20,160);button4x.style('width','70px');
  button4x.mouseClicked(button4xAction);
  button4y = createButton('y=n');
  button4y.position(100,160);button4y.style('width','70px');
  button4y.mouseClicked(button4yAction);
  buttonphi = createButton('n*phi');
  buttonphi.position(20,200);buttonphi.style('width','70px');
  buttonphi.mouseClicked(buttonphiAction);
  buttonphi2 = createButton('n/2*phi');
  buttonphi2.position(100,200);buttonphi2.style('width','70px');
  buttonphi2.mouseClicked(buttonphi2Action);
  buttonb2 = createButton('2 bogen');
  buttonb2.position(20,240);buttonb2.style('width','70px');
  buttonb2.mouseClicked(buttonb2Action);
  buttonb4 = createButton('4 bogen');
  buttonb4.position(100,240);buttonb4.style('width','70px');
  buttonb4.mouseClicked(buttonb4Action);
  buttonb6 = createButton('6 bogen');
  buttonb6.position(20,280);buttonb6.style('width','70px');
  buttonb6.mouseClicked(buttonb6Action);
  buttonb8 = createButton('8 bogen');
  buttonb8.position(100,280);buttonb8.style('width','70px');
  buttonb8.mouseClicked(buttonb8Action);
  buttonRC = createButton('random kleur');
  buttonRC.position(20,320);buttonRC.style('width','100px');
  buttonRC.mouseClicked(buttonRCAction);
 
 if (sliderAan) {
   slidersw = createSlider(2, 50, 2, 1);
   slidersw.position(20,360);
   slidersw.style('width', '80px');
   sliderAan = false;
 }
  buttonZW = createButton('zwart<->wit');
  buttonZW.position(20,400);buttonZW.style('width','110px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,440);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
  x = width/2; y = height/2;
  n = height/6;let vierk = n; let sw = n/100;
  let lr1 = 0;  let lr2 = 1; let c = color(0);
  //kwadrant 1
  vorm[1] = new Spiraal_8gr_gk(n, lr1,8, x+n, y-n,-90,sw,c);
  vorm[2] = new Spiraal_8gr_gk(n, lr2,8, x+n, y-n,180,sw,c);
  vorm[3] = new Spiraal_8gr_gk(n, lr1,8, x+n, y-n,180,sw,c);
  vorm[4] = new Spiraal_8gr_gk(n, lr2,8, x+n, y-n,-90,sw,c);
  //kwadrant 2
  vorm[5] = new Spiraal_8gr_gk(n, lr1,8, x-n, y-n,180,sw,c);
  vorm[6] = new Spiraal_8gr_gk(n, lr2,8, x-n, y-n, 90,sw,c);
  vorm[7] = new Spiraal_8gr_gk(n, lr1,8, x-n, y-n, 90,sw,c);
  vorm[8] = new Spiraal_8gr_gk(n, lr2,8, x-n, y-n,180,sw,c);
  //kwadrant 3
  vorm[9] = new Spiraal_8gr_gk(n, lr1,8, x-n, y+n, 90,sw,c);
  vorm[10]= new Spiraal_8gr_gk(n, lr2,8, x-n, y+n,  0,sw,c);
  vorm[11]= new Spiraal_8gr_gk(n, lr1,8, x-n, y+n,  0,sw,c);
  vorm[12]= new Spiraal_8gr_gk(n, lr2,8, x-n, y+n, 90,sw,c);
  //kwadrant 4
  vorm[13]= new Spiraal_8gr_gk(n, lr1,8, x+n, y+n, 0, sw,c);
  vorm[14]= new Spiraal_8gr_gk(n, lr2,8, x+n, y+n,-90,sw,c);
  vorm[15]= new Spiraal_8gr_gk(n, lr1,8, x+n, y+n,-90,sw,c);
  vorm[16]= new Spiraal_8gr_gk(n, lr2,8, x+n, y+n, 0, sw,c);
}
 
function draw() {
   if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
 lijndikte()
 
for (let i = 1; i < 17; i++)
{
  vorm[i].display()
}
 
if (key == 's' || key == 'S') { }
else {
//kwadrant 1
vorm[1].dpRotLi(vorm[1]);vorm[2].dpRotRe(vorm[2]);
vorm[3].dpRotRe(vorm[3]);vorm[4].dpRotLi(vorm[4]);
//kwadrant 2
vorm[5].dpRotLi(vorm[5]);vorm[6].dpRotRe(vorm[6]);
vorm[7].dpRotRe(vorm[7]);vorm[8].dpRotLi(vorm[8]);
//kwadrant 3
vorm[9].dpRotLi(vorm[9]);  vorm[10].dpRotRe(vorm[10]);
vorm[11].dpRotRe(vorm[11]);vorm[12].dpRotLi(vorm[12]);
//kwadrant 4
vorm[13].dpRotLi(vorm[13]);vorm[14].dpRotRe(vorm[14]);
vorm[15].dpRotRe(vorm[15]);vorm[16].dpRotLi(vorm[16]);
  }
}
 
function buttonRAction() {setup();}
function button0xAction(){for(let i=1; i<17; i++){vorm[i].x=x;}}
function button0yAction(){for(let i=1; i<17; i++){vorm[i].y=y;}}
function button2xAction()
{for(let i=1; i<5; i++){vorm[i].x=x+n/2;}
 for(let i=5; i<13;i++){vorm[i].x=x-n/2;}
 for(let i=13;i<17;i++){vorm[i].x=x+n/2;}}
function button2yAction()
{for(let i=1; i<9; i++){vorm[i].y=y-n/2;}
 for(let i=9; i<17;i++){vorm[i].y=y+n/2;}}
function button4xAction()
{for(let i=1; i<5; i++){vorm[i].x=x+n;}
 for(let i=5; i<13;i++){vorm[i].x=x-n;}
 for(let i=13;i<17;i++){vorm[i].x=x+n;}}
function button4yAction()
{for(let i=1; i<9; i++){vorm[i].y=y-n;}
 for(let i=9; i<17;i++){vorm[i].y=y+n;}}
 
function buttonphiAction()
 {for(let i=1; i<9; i++){vorm[i].y=y-n;}
  for(let i=9; i<17;i++){vorm[i].y=y+n;}
  for(let i=1; i<5; i++){vorm[i].x=x+n*(1+sqrt(5))/2;}
  for(let i=5; i<13;i++){vorm[i].x=x-n*(1+sqrt(5))/2;}
  for(let i=13;i<17;i++){vorm[i].x=x+n*(1+sqrt(5))/2;}}
function buttonphi2Action()
 {for(let i=1; i<9; i++){vorm[i].y=y-n/2;}
  for(let i=9; i<17;i++){vorm[i].y=y+n/2;}
  for(let i=1; i<5; i++){vorm[i].x=x+n/2*(1+sqrt(5))/2;}
  for(let i=5; i<13;i++){vorm[i].x=x-n/2*(1+sqrt(5))/2;}
  for(let i=13;i<17;i++){vorm[i].x=x+n/2*(1+sqrt(5))/2;}}
function buttonb2Action(){for(let i=1; i<17; i++){vorm[i].r = 2;}}
function buttonb4Action(){for(let i=1; i<17; i++){vorm[i].r = 4;}}
function buttonb6Action(){for(let i=1; i<17; i++){vorm[i].r = 6;}}
function buttonb8Action(){for(let i=1; i<17; i++){vorm[i].r = 8;}}
function buttonRCAction(){for (let i=1; i<17; i++)
 {vorm[i].c = color(random(0,200),random(0,200),random(0,250));}}
function lijndikte(){let slider = slidersw.value();
 for (let i=1; i<17; i++){vorm[i].sw = slider}};
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit = true;}}
function buttonDAction(){save('zestien_spiralen2.png');}