let vorm =[];
function setup() {
  buttonR1 = createButton('reset');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttondp0 = createButton('dp 0');
  buttondp0.position(20,80);buttondp0.style('width','70px');
  buttondp0.mouseClicked(buttondp0Action);
  buttondp1 = createButton('dp 1a');
  buttondp1.position(20,120);buttondp1.style('width','70px');
  buttondp1.mouseClicked(buttondp1Action);
  buttondp2 = createButton('dp 1b');
  buttondp2.position(100,120);buttondp2.style('width','70px');
  buttondp2.mouseClicked(buttondp2Action);
  buttondp3 = createButton('dp 2a');
  buttondp3.position(20,160);buttondp3.style('width','70px');
  buttondp3.mouseClicked(buttondp3Action);
  buttondp4 = createButton('dp 2b');
  buttondp4.position(100,160);buttondp4.style('width','70px');
  buttondp4.mouseClicked(buttondp4Action);
  buttondp5 = createButton('dp 3a');
  buttondp5.position(20,200);buttondp5.style('width','70px');
  buttondp5.mouseClicked(buttondp5Action);
  buttondp6 = createButton('dp 3b');
  buttondp6.position(100,200);buttondp6.style('width','70px');
  buttondp6.mouseClicked(buttondp6Action);
  buttondp7 = createButton('dp 4a');
  buttondp7.position(20,240);buttondp7.style('width','70px');
  buttondp7.mouseClicked(buttondp7Action);
  buttondp8 = createButton('dp 4b');
  buttondp8.position(100,240);buttondp8.style('width','70px');
  buttondp8.mouseClicked(buttondp8Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,280); buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  let x = width/2; let y = height/2; let n = height/8;
  let a = sqrt(2*n*n); let alfa = 100; let sw = n/100; let sc = color(0);
  vorm[0] = new Trap_3nan(n, 7, x-1.5*a, y, 135,color(255,255,0,alfa),sw,sc);
  vorm[1] = new Trap_3nan(n, 1, x+1.5*a, y,-135,color(255,0, 0, alfa),sw,sc);
  vorm[2] = new Trap_3nan(n, 7, x+1.5*a, y,-45, color(255,255,0,alfa),sw,sc);
  vorm[3] = new Trap_3nan(n, 1, x-1.5*a, y, 45, color( 255,0, 0,alfa),sw,sc);
 
  vorm[4] = new Trap_3nan(n, 3, x, y-a/2, 135, color(26,237,225,alfa),sw,sc);
  vorm[5] = new Trap_3nan(n, 5, x, y-a/2,-135, color(100,200,50,alfa),sw,sc);
  vorm[6] = new Trap_3nan(n, 3, x, y+a/2, -45, color(26,237,225,alfa),sw,sc);
  vorm[7] = new Trap_3nan(n, 5, x, y+a/2,  45, color(100, 200,0,alfa),sw,sc);
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  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].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
 
    vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
    vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
  }
}
 
function buttonR1Action(){setup();}
function buttondp0Action()
{vorm[0].d = 7; vorm[1].d = 1; vorm[2].d = 7; vorm[3].d = 1;
vorm[4].d = 3; vorm[5].d = 5; vorm[6].d = 3; vorm[7].d = 5;}
function buttondp1Action()
{vorm[0].d = 6; vorm[1].d = 2; vorm[2].d = 6; vorm[3].d = 2;}
function buttondp2Action()
{vorm[4].d = 4; vorm[5].d = 4; vorm[6].d = 4; vorm[7].d = 4;}
function buttondp3Action()
{vorm[0].d = 5; vorm[1].d = 3; vorm[2].d = 5; vorm[3].d = 3;}
function buttondp4Action()
{vorm[4].d = 5; vorm[5].d = 3; vorm[6].d = 5; vorm[7].d = 3;}
function buttondp5Action()
{vorm[0].d = 4; vorm[1].d = 4; vorm[2].d = 4; vorm[3].d = 4;}
function buttondp6Action()
{vorm[4].d = 6; vorm[5].d = 2; vorm[6].d = 6; vorm[7].d = 2;}
function buttondp7Action()
{vorm[0].d = 3; vorm[1].d = 4; vorm[2].d = 3; vorm[3].d = 4;}
function buttondp8Action()
{vorm[4].d = 7; vorm[5].d = 1; vorm[6].d = 7; vorm[7].d = 1;}
function buttonDAction() {save('acht_trapeziums.png');}