vorm = []; let ruitjespap; let n; let y; let lijnau = false;
let kleurzh = false; let rond = false; let blend = false;
function setup()  {
createCanvas(windowWidth, windowHeight);
buttonR = createButton('reset');
buttonR.position(20,30); buttonR.style('width','70px');
buttonR.mouseClicked(buttonRAction);
buttonV1 = createButton('verpl 1');
buttonV1.position(20,60); buttonV1.style('width','70px');
buttonV1.mouseClicked(buttonV1Action);
buttonV2 = createButton('verpl 2');
buttonV2.position(100,60); buttonV2.style('width','70px');
buttonV2.mouseClicked(buttonV2Action);
buttonV3 = createButton('verpl 3');
buttonV3.position(20, 90); buttonV3.style('width','70px');
buttonV3.mouseClicked(buttonV3Action);
buttonG = createButton('groter');
buttonG.position(20, 120); buttonG.style('width','70px');
buttonG.mouseClicked(buttonGAction);
buttonK = createButton('kleiner');
buttonK.position(100, 120); buttonK.style('width','70px');
buttonK.mouseClicked(buttonKAction);
buttonKZH =createButton('kleur hard/zacht');
buttonKZH.position(20,150); buttonKZH.style('width','140px');
buttonKZH.mouseClicked(buttonKZHAction);
buttonRAU = createButton('rond aan/uit');
buttonRAU.position(20,180); buttonRAU.style('width','100px')
buttonRAU.mouseClicked(buttonRAUAction);
buttonLAU= createButton('lijn aan/uit');
buttonLAU.position(20,210);buttonLAU.style('width','100px');
buttonLAU.mouseClicked(buttonLAUAction);
buttonBM = createButton('Blendmode');
buttonBM.position(20,240);buttonBM.style('width','100px');
buttonBM.mouseClicked(buttonBMAction);
buttonD = createButton('downloaden');
buttonD.position(20,270); buttonD.style('width','100px');
buttonD.mouseClicked(buttonDAction);
const x = width/2; y = height/2; n = height/12;
const sw = 2; const alfa = 100;
//argumenten van de constructor
//1) grootte, 2) links/rechts, 3) draaipunt, 4) x positie, 5) y positie,
//6) hoek     7) vormkleur,    8) lijndikte, 9) lijnkleur
//                 1  2  3  4      5       6      7                8     9
  vorm[0] = new St(n, 1, 6, x-3*n, y-2*n,  0,color(8,58,120,alfa),sw, color(0));
  vorm[1] = new St(n, 0, 3, x+3*n, y-2*n,  0,color(8,58,120,alfa),sw, color(0));
  vorm[2] = new St(n, 0, 8, x-3*n, y-2*n, 90,color(62,252,5,alfa),sw, color(0));
  vorm[3] = new St(n, 1, 1, x+3*n, y-2*n,-90,color(62,252,5,alfa),sw, color(0));
  vorm[4] = new St(n, 0, 8, x,     y,      0,color(252,13,5,alfa),sw, color(0));
  vorm[5] = new St(n, 1, 1, x,     y,      0,color(252,13,5,alfa),sw, color(0));
  vorm[6] = new St(n, 1, 5, x,     y,      0,color(252,13,5,alfa),sw, color(0));
  vorm[7] = new St(n, 0, 4, x,     y,      0,color(252,13,5,alfa),sw, color(0));
  vorm[8] = new St(n, 0, 7, x-3*n, y+2*n,  0,color(8,58,250,alfa),sw, color(0));
  vorm[9] = new St(n, 1, 2, x+3*n, y+2*n,  0,color(8,58,250,alfa),sw, color(0));
  vorm[10] = new St(n,1, 1, x-3*n, y+2*n, 90,color(62,252,5,alfa),sw, color(0));
  vorm[11] = new St(n,0, 4, x+3*n, y+2*n, 90,color(62,252,5,alfa),sw, color(0));
}
function draw()  {
  if (blend) {blendMode(DIFFERENCE)}
 else {blendMode(BLEND)};
  clear();
  background('rgba(255,255,255, 0)');
 for (let i = 0; i< 12; i++){vorm[i].display();}
 
  if (key == 's' || key == 'S') { }
  else {
    vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]);
    vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
    vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
    vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotLi(vorm[7]);
    vorm[8].dpRotRe(vorm[8]); vorm[9].dpRotLi(vorm[9]);
    vorm[10].dpRotLi(vorm[10]); vorm[11].dpRotRe(vorm[11]);
  }
}
function buttonRAction(){setup();} //reset
 function buttonGAction() //groter
{ for (let i = 0; i < 12;  i++) {vorm[i].n = 2*n;vorm[i].sw = n*1.6;}}
function buttonKAction()  //kleiner
{ for (let i = 0; i < 12;  i++) {vorm[i].n = n;  vorm[i].sw = n*0.8;}}
function buttonV1Action() //verplaatsing 1
{ for (let i = 0; i < 6;   i++) {vorm[i].y = y-n;}
  for (let i = 6; i < 12;  i++) {vorm[i].y = y+n;}}
function buttonV2Action()
  { for (let i = 0; i < 6; i++) {vorm[i].y = y;}
    for (let i = 6; i < 12;i++) {vorm[i].y = y;}}
function buttonV3Action()
  { for (let i = 0; i < 4; i++) {vorm[i].y = y-2*n;}
    for (let i = 4; i < 8; i++) {vorm[i].y = y;}
    for (let i = 8; i < 12;i++) {vorm[i].y = y+2*n;}}
 
function buttonKZHAction()  //lijnkleur zacht hard
  {if (kleurzh) {for (let i = 0; i< 12; i++) {
    vorm[i].c = color(random(0,200),random(0,255),random(0,255),100);
    vorm[i].sc = color(random(0,200),random(0,255),random(0,255),100);
    vorm[i].sw = n*0.8;}kleurzh = false}
    else {for (let i = 0; i< 12; i++){
    vorm[i].c  = color(random(0,200),random(0,255),random(0,255),200);
    vorm[i].sc = color(random(0,200),random(0,255),random(0,255),200);
    vorm[i].sw = n*0.8;} kleurzh = true;}}
 
function buttonRAUAction(){if (rond) {strokeJoin(MITER); rond = false;}
   else {strokeJoin(ROUND);rond = true};} //rondingen aan /uit
 
function buttonLAUAction() //lijn aan/uit
  {if (lijnau) {for(let i = 0; i<12; i++){vorm[i].sw = 0;}lijnau = false;}
    else {for(let i = 0; i<12; i++){vorm[i].sc=color(0);vorm[i].sw = height/500}lijnau = true}}
function buttonBMAction()
 {if(blend){blend=false;} else {blend=true;}}
function buttonDAction() {save('twaalf_S.png');}