vorm = [];
 let x; let y; let n; lijnau = true;
 let blend = false; let rond = false; let kleurzh = false;
function setup() {
  button0 = createButton('reset');
  button0.position(20,30);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('(2,3)');
  button1.position(20,60);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  button2 = createButton('(3,2)');
  button2.position(20,90);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('(1,2)');
  button3.position(20,120);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('(2,1)');
  button4.position(20,150);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('(1,1)');
  button5.position(20,180);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button7 = createButton('dp 1');
  button7.position(100,30);button7.style('width','70px');
  button7.mouseClicked(button7Action);
  button8 = createButton('dp 2');
  button8.position(100,60);button8.style('width','70px');
  button8.mouseClicked(button8Action);
  button9 = createButton('dp 3');
  button9.position(100,90);button9.style('width','70px');
  button9.mouseClicked(button9Action);
  button10 = createButton('dp 4');
  button10.position(100,120);button10.style('width','70px');
  button10.mouseClicked(button10Action);
  button12 = createButton('dp 5');
  button12.position(100,150);button12.style('width','70px');
  button12.mouseClicked(button12Action);
  button11 = createButton('dp 6');
  button11.position(100,180);button11.style('width','70px');
  button11.mouseClicked(button11Action);
  buttonKZH =createButton('kleur hard/zacht');
  buttonKZH.position(20,210); buttonKZH.style('width','140px');
  buttonKZH.mouseClicked(buttonKZHAction);
  buttonRAU = createButton('rond aan/uit');
  buttonRAU.position(20,240); buttonRAU.style('width','100px')
  buttonRAU.mouseClicked(buttonRAUAction);
  buttonLAU= createButton('lijn aan/uit');
  buttonLAU.position(20,270);buttonLAU.style('width','100px');
  buttonLAU.mouseClicked(buttonLAUAction);
  buttonBM = createButton('Blendmode');
  buttonBM.position(20,300);buttonBM.style('width','100px');
  buttonBM.mouseClicked(buttonBMAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,330);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  x = width/2; y = height/2; n = height/13;
  let sw = height/500; let alfa = 50; let kleur = 0;
  vorm[0] = new T(n,    8,x-3*n, y-2*n,   0,color(255,255,0,alfa),sw,color(kleur));
  vorm[1] = new Y(n, 1, 5,x-3*n, y-2*n, 180,color(255, 0, 0,alfa),sw,color(kleur));
  vorm[2] = new T(n,    1,x+3*n, y-2*n,   0,color(0, 0, 255,alfa),sw,color(kleur));
  vorm[3] = new Y(n, 0, 4,x+3*n, y-2*n, 180,color(0, 255, 0,alfa),sw,color(kleur));
  vorm[4] = new Y(n, 0, 4,x-3*n, y+2*n,   0,color(0, 255, 0,alfa),sw,color(kleur));
  vorm[5] = new T(n,    1,x-3*n, y+2*n, 180,color(0, 0, 255,alfa),sw,color(kleur));
  vorm[6] = new T(n,    8,x+3*n, y+2*n, 180,color(255,255,0,alfa),sw,color(kleur));
  vorm[7] = new Y(n, 1, 5,x+3*n, y+2*n,   0,color(255, 0, 0,alfa),sw,color(kleur));
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  if (blend) {blendMode(DIFFERENCE)}
  else {blendMode(BLEND)};
 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].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
  vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);1
 }
}
 
function windowResized() {
 resizeCanvas(windowWidth, windowHeight);
}
 
function button0Action(){setup();}
function button1Action()
 {vorm[0].x=x-2*n;vorm[1].x=x-2*n;vorm[2].x=x+2*n;vorm[3].x=x+2*n;
  vorm[4].x=x-2*n;vorm[5].x=x-2*n;vorm[6].x=x+2*n;vorm[7].x=x+2*n;
  vorm[0].y=y-3*n;vorm[1].y=y-3*n;vorm[2].y=y-3*n;vorm[3].y=y-3*n;
  vorm[4].y=y+3*n;vorm[5].y=y+3*n;vorm[6].y=y+3*n;vorm[7].y=y+3*n;}
function button2Action()
 {vorm[0].x=x-3*n;vorm[1].x=x-3*n;vorm[2].x=x+3*n;vorm[3].x=x+3*n;
  vorm[4].x=x-3*n;vorm[5].x=x-3*n;vorm[6].x=x+3*n;vorm[7].x=x+3*n;
  vorm[0].y=y-2*n;vorm[1].y=y-2*n;vorm[2].y=y-2*n;vorm[3].y=y-2*n;
  vorm[4].y=y+2*n;vorm[5].y=y+2*n;vorm[6].y=y+2*n;vorm[7].y=y+2*n;}
function button3Action()
 {vorm[0].x=x-1*n;vorm[1].x=x-1*n;vorm[2].x=x+1*n;vorm[3].x=x+1*n;
  vorm[4].x=x-1*n;vorm[5].x=x-1*n;vorm[6].x=x+1*n;vorm[7].x=x+1*n;
  vorm[0].y=y-2*n;vorm[1].y=y-2*n;vorm[2].y=y-2*n;vorm[3].y=y-2*n;
  vorm[4].y=y+2*n;vorm[5].y=y+2*n;vorm[6].y=y+2*n;vorm[7].y=y+2*n;}
function button4Action()
 {vorm[0].x=x-2*n;vorm[1].x=x-2*n;vorm[2].x=x+2*n;vorm[3].x=x+2*n;
  vorm[4].x=x-2*n;vorm[5].x=x-2*n;vorm[6].x=x+2*n;vorm[7].x=x+2*n;
  vorm[0].y=y-1*n;vorm[1].y=y-1*n;vorm[2].y=y-1*n;vorm[3].y=y-1*n;
  vorm[4].y=y+1*n;vorm[5].y=y+1*n;vorm[6].y=y+1*n;vorm[7].y=y+1*n;}
function button5Action()
 {vorm[0].x=x-1*n;vorm[1].x=x-1*n;vorm[2].x=x+1*n;vorm[3].x=x+1*n;
  vorm[4].x=x-1*n;vorm[5].x=x-1*n;vorm[6].x=x+1*n;vorm[7].x=x+1*n;
  vorm[0].y=y-1*n;vorm[1].y=y-1*n;vorm[2].y=y-1*n;vorm[3].y=y-1*n;
  vorm[4].y=y+1*n;vorm[5].y=y+1*n;vorm[6].y=y+1*n;vorm[7].y=y+1*n;}
function button7Action()
 {vorm[0].d=7;vorm[1].d=4;vorm[2].d=2;vorm[3].d=5;
  vorm[4].d=5;vorm[5].d=2;vorm[6].d=7;vorm[7].d=4;}
function button8Action()
 {vorm[0].d=6;vorm[1].d=3;vorm[2].d=3;vorm[3].d=6;
  vorm[4].d=6;vorm[5].d=3;vorm[6].d=6;vorm[7].d=3;}
function button9Action()
 {vorm[0].d=5;vorm[1].d=2;vorm[2].d=4;vorm[3].d=7;
  vorm[4].d=7;vorm[5].d=4;vorm[6].d=5;vorm[7].d=2;}
function button10Action()
 {vorm[0].d=4;vorm[1].d=1;vorm[2].d=5;vorm[3].d=8;
  vorm[4].d=8;vorm[5].d=5;vorm[6].d=4;vorm[7].d=1;}
function button11Action()
 {vorm[0].d=5;vorm[1].d=8;vorm[2].d=4;vorm[3].d=1;
  vorm[4].d=4;vorm[5].d=1;vorm[6].d=8;vorm[7].d=5;}
function button12Action()
 {vorm[0].d=4;vorm[1].d=7;vorm[2].d=5;vorm[3].d=2;
  vorm[4].d=2;vorm[5].d=5;vorm[6].d=4;vorm[7].d=7;}
 
function buttonRAUAction(){if (rond) {strokeJoin(MITER); rond = false;}
else {strokeJoin(ROUND);rond = true};} //rondingen aan /uit
 
function buttonKZHAction()  //lijnkleur zacht hard
  {if (kleurzh) {for (let i = 0; i< 8; 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.7;}kleurzh = false}
    else {for (let i = 0; i< 8; 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.7;} kleurzh = true;}}
function buttonLAUAction() //lijn aan/uit
  {if (lijnau) {for(let i = 0; i<8; i++){vorm[i].sw = 0;}lijnau = false;}
  else {for(let i = 0; i<8; i++){vorm[i].sc=color(0);vorm[i].sw = height/500}lijnau = true}}
function buttonLZAction() {
   for(let i = 0; i<8; i++) { vorm[i].sc = color(0); vorm[i].sw = height/500}}
function buttonBMAction()
  {if(blend){blend=false;} else {blend=true;}}
function buttonDAction(){save('pentomino_T_Y.png');}