let vorm = [];
function setup() {
  buttonD = createButton('downloaden');
  buttonD.position(20,40);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  const x = width/2; const y = height/2; const n = height/20;
  const sw = n/50; const alfa = 100; let sc = color(0);
  vorm[0] = new Pentos(n*2,2,'u',x-12*n,y-7*n, 90,color(33,18,255, alfa),sw,sc);
  vorm[1] = new Pentos(n,2,'t',x-8*n,   y-n,    0,color(0,255,0,   alfa),sw,sc);
  vorm[2] = new Pentos(n,1,'z',x-5*n,   y-4*n,  0,color(255,0,0,   alfa),sw,sc);
  vorm[3] = new Pentos(n,0,'z',x+2*n,   y-3*n,  0,color(18,255,31, alfa),sw,sc);
  vorm[4] = new Pentos(n,1,'y',x+6*n,   y-6*n, 90,color(255,18,200,alfa),sw,sc);
  vorm[5] = new Pentos(n,0,'l',x-4*n,   y,      0,color(255,18,200,alfa),sw,sc);
  vorm[6] = new Pentos(n,2,'u',x-n,     y+n,    0,color(21,216,232,alfa),sw,sc);
  vorm[7] = new Pentos(n,0,'w',x+7*n,   y+n,    0,color(21,216,232,alfa),sw,sc);
  vorm[8] = new Pentos(n*2,2,'x',x-11*n,y+5*n,  0,color(232,21,218,alfa),sw,sc);
  vorm[9] = new Pentos(n,1,'p',x-3*n,   y+4*n,-90,color(255,0,0,   alfa),sw,sc);
  vorm[10]= new Pentos(n,1,'f',x+3*n,   y+4*n,  0,color(227,255,18,alfa),sw,sc);
  vorm[11]= new Pentos(n,0,'w',x-7*n,   y+8*n,  0,color(18,255,253,alfa),sw,sc);
  vorm[12]= new Pentos(n*2,0,'n',x-n,   y+8*n,  0,color(18,255,253,alfa),sw,sc);
  vorm[13]= new Pentos(n,2,'t',x+2*n,   y+8*n,  0,color(47,250,3,  alfa),sw,sc);
  vorm[14]= new Pentos(n,2,'v',x+6*n,   y+4*n,  0,color(227,255,18,alfa),sw,sc);
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
    for (let i = 0; i < 15; i++){vorm[i].display();}
     if (key == 's'|| key == 'S') { }
  else
{
  vorm[0].dpRotRe(vorm[0]); vorm[0].yUpDown();   vorm[0].xReLi();
  vorm[1].dpRotLi(vorm[1]); vorm[1].yDownUp();   vorm[1].xLiRe();
  vorm[2].dpRotRe(vorm[2]); vorm[2].yUpDown();   vorm[2].xReLi();
  vorm[3].dpRotLi(vorm[3]); vorm[3].yDownUp();   vorm[3].xLiRe();
  vorm[4].dpRotRe(vorm[4]); vorm[4].yUpDown();   vorm[4].xReLi();
  vorm[5].dpRotLi(vorm[5]); vorm[5].yDownUp();   vorm[5].xLiRe();
  vorm[6].dpRotRe(vorm[6]); vorm[6].yUpDown();   vorm[6].xReLi();
  vorm[7].dpRotLi(vorm[7]); vorm[7].yDownUp();   vorm[7].xLiRe();
  vorm[8].dpRotRe(vorm[8]); vorm[8].yUpDown();   vorm[8].xReLi();
  vorm[9].dpRotLi(vorm[9]); vorm[9].yDownUp();   vorm[9].xLiRe();
  vorm[10].dpRotRe(vorm[10]); vorm[10].yUpDown();vorm[10].xReLi();
  vorm[11].dpRotLi(vorm[11]); vorm[11].yDownUp();vorm[11].xLiRe();
  vorm[12].dpRotRe(vorm[12]); vorm[12].yUpDown();vorm[12].xReLi();
  vorm[13].dpRotRe(vorm[13]); vorm[13].yDownUp();vorm[13].xLiRe();
  vorm[14].dpRotRe(vorm[14]); vorm[14].yUpDown();vorm[14].xReLi();
  }
 }
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
function buttonDAction(){save('pentomino_F_X.png');}