vorm = [];  let ruitjespap;
function setup() {
  createCanvas(windowWidth, windowHeight);
  buttonR = createButton('reset');
  buttonR.position(20,30);buttonR.style('width','50px');
  buttonR.mouseClicked(buttonRAction);
  button0 = createButton('dp 0');
  button0.position(20,60);button0.style('width','50px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(20,90);button1.style('width','50px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 2');
  button2.position(20,120);button2.style('width','50px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(20,150);button3.style('width','50px');
  button3.mouseClicked(button3Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,180);buttonD.style('width','90px');
  buttonD.mouseClicked(buttonDAction);
  const x = width/2; const y = height/2; const n = height/12;
  const alfa = 100; const sw = n/40; const sc = color(0);
  ruitjespap = new Ruitjes(n,x,y);
  vorm[0] = new Z       (n,0,     6,x-5.5*n, y,    0,color(200,255,0,alfa),sw,sc);
  vorm[1] = new Drieh_nh(3*n, 2*n,1,x-5.5*n, y,    0,color(0,  255,0,alfa),sw,sc);
  vorm[2] = new F       (n,1,     6,x-1.5*n, y+n,180,color(200,100,0,alfa),sw,sc);
  vorm[3] = new Drieh_nh(3*n, 2*n,3,x,       y-3*n,0,color(0,255,  0,alfa),sw,sc);
  vorm[4] = new F       (n,0,     5,x+1.5*n, y+n,180,color(200,100,0,alfa),sw,sc);
  vorm[5] = new Drieh_nh(3*n, 2*n,5,x+5.5*n, y,    0,color(0,255,  0,alfa),sw,sc);
  vorm[6] = new Z       (n,1,     3,x+5.5*n, y,    0,color(200,255,0,alfa),sw,sc);
  vorm[7] = new Paral   (n, n,1,  1,x-1.5*n, y+n,  0,color(0,0,  200,alfa),sw,sc);
  vorm[8] = new Paral   (n, n,0,  7,x+1.5*n, y+n,  0,color(0,0,  200,alfa),sw,sc);
  vorm[9] = new Paral   (n, n,0,  3,x-1.5*n, y+2*n,0,color(0,0,  200,alfa),sw,sc);
  vorm[10] = new Paral  (n, n,1,  5,x+1.5*n, y+2*n,0,color(0,0,  200,alfa),sw,sc);
  vorm[11] = new Drieh_nh(4*n,2*n,4,x-1.5*n, y+2*n,0,color(0,200,200,alfa),sw,sc);
  vorm[12] = new Drieh_nh(4*n,2*n,2,x+1.5*n, y+2*n,0,color(0,200,200,alfa),sw,sc);
}
 
function draw() {
  clear()
  background('rgba(255,255,255, 0)');
  for (let i =0; i < 13; i++) {vorm[i].display()}
 
   if (key == 's' || key == 'S') { }
   else
 {
    vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
    vorm[2].dpRotRe(vorm[2]); vorm[4].dpRotLi(vorm[4]);
    vorm[5].dpRotRe(vorm[5]); vorm[6].dpRotLi(vorm[6]);
    vorm[7].dpRotLi(vorm[7]); vorm[8].dpRotRe(vorm[8]);
    vorm[9].dpRotRe(vorm[9]); vorm[10].dpRotLi(vorm[10]);
    vorm[11].dpRotLi(vorm[11]); vorm[12].dpRotRe(vorm[12]);
  }
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonRAction(){setup()}
function button0Action()
{vorm[0].d=6;vorm[1].d=1;vorm[2].d=6;vorm[3].d=3;vorm[4].d=5;
 vorm[5].d=5;vorm[6].d=3;vorm[7].d=1;vorm[8].d=7;vorm[9].d=3;
 vorm[10].d=5;vorm[11].d=4;vorm[12].d=2;}
function button1Action()
{vorm[0].d=7;vorm[1].d=1;vorm[2].d=7;vorm[3].d=3;vorm[4].d=4;
 vorm[5].d=5;vorm[6].d=2;vorm[7].d=1;vorm[8].d=7;vorm[9].d=3;
 vorm[10].d=5;vorm[11].d=1;vorm[12].d=5;}
function button2Action()
{vorm[0].d=5;vorm[1].d=1;vorm[2].d=10;vorm[3].d=3;vorm[4].d=1;
 vorm[5].d=5;vorm[6].d=4;vorm[7].d=1;vorm[8].d=7;vorm[9].d=3;
 vorm[10].d=5;vorm[11].d=4;vorm[12].d=2;}
function button3Action()
{vorm[0].d=2;vorm[1].d=3;vorm[2].d=6;vorm[3].d=3;vorm[4].d=5;
 vorm[5].d=3;vorm[6].d=7;vorm[7].d=1;vorm[8].d=7;vorm[9].d=3;
 vorm[10].d=5;vorm[11].d=3;vorm[12].d=3;}
function buttonDAction(){save('Z_F_Paral_drieh.png');}