parallellogrammen in fullscreen

De schets maakt gebruik van de subclass ,  "Paral"  en de superclass  "Vormen"

 

//animatie met 8 parallellogrammen met hoogten = n en  lengte = 2n
let vorm = []; let x; let y; let n;
let ruitjespap; let ruitjes = false;
 
function setup() {
  buttonR1 = createButton('reset');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonh1 = createButton('hoek 45');
  buttonh1.position(100,80);buttonh1.style('width','80px');
  buttonh1.mouseClicked(buttonh1Action);
  buttonh2 = createButton('hoek 90');
  buttonh2.position(100,120);buttonh2.style('width','80px');
  buttonh2.mouseClicked(buttonh2Action);
  buttonh3 = createButton('hoek 135');
  buttonh3.position(100,160);buttonh3.style('width','80px');
  buttonh3.mouseClicked(buttonh3Action);
  buttondp0 = createButton('dp 0');
  buttondp0.position(20,80);buttondp0.style('width','70px');
  buttondp0.mouseClicked(buttondp0Action);
  buttondp1 = createButton('dp 1');
  buttondp1.position(20,120);buttondp1.style('width','70px');
  buttondp1.mouseClicked(buttondp1Action);
  buttondp2 = createButton('dp 2');
  buttondp2.position(20,160);buttondp2.style('width','70px');
  buttondp2.mouseClicked(buttondp2Action);
  buttondp3 = createButton('dp 3');
  buttondp3.position(20,200);buttondp3.style('width','70px');
  buttondp3.mouseClicked(buttondp3Action);
  buttondp4 = createButton('dp 4');
  buttondp4.position(20,240);buttondp4.style('width','70px');
  buttondp4.mouseClicked(buttondp4Action);
  buttonRAU = createButton('ruitjes aan uit');
  buttonRAU.position(20,280);buttonRAU.style('width','120px');
  buttonRAU.mouseClicked(buttonRAUAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,320);buttonD.style('width','120px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  x = width/2; y = height/2; n = height/12;
  let h  = n; let l   = 2*n; let hoek = 0;
  let sw = height/550; let sc = color(0); let alfa = 100;
  vorm[0] = new Paral(h, l, 1, 3, x-2*n, y-n,hoek,color(255,255,0,alfa),sw,sc);
  vorm[1] = new Paral(h, l, 0, 5, x+2*n, y-n,hoek,color(255,255,0,alfa),sw,sc);
  vorm[2] = new Paral(h, l, 0, 1, x-2*n, y+n,hoek,color(255,0, 0, alfa),sw,sc);
  vorm[3] = new Paral(h, l, 1, 7, x+2*n, y+n,hoek,color(100,0,255,alfa),sw,sc);
  vorm[4] = new Paral(h, l, 0, 7, x-n,   y-n,hoek,color(0,255,0,  alfa),sw,sc);
  vorm[5] = new Paral(h, l, 1, 1, x+n,   y-n,hoek,color(0,100,255,alfa),sw,sc);
  vorm[6] = new Paral(h, l, 1, 5, x-n,   y+n,hoek,color(255,0,200,alfa),sw,sc);
  vorm[7] = new Paral(h, l, 0, 3, x+n,   y+n,hoek,color(255,0,200,alfa),sw,sc);
  ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
//background('#E6FBFF');8
  clear();
  background('rgba(255,255,255, 0)');
  if (ruitjes) {ruitjespap.display();
    for (let i = 0; i < 8; i++) {vorm[i].dpAan();}};
 
 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[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
 }
}
 
function buttonR1Action(){setup();}
function buttonh1Action()
{for (let i=0; i<8; i++){vorm[i].hoek=45;}}
function buttonh2Action()
{for (let i=0; i<8; i++){vorm[i].hoek=90;}}
function buttonh3Action()
{for (let i=0; i<8; i++){vorm[i].hoek=135;}}
 
function buttondp0Action()
{vorm[0].d = 3;    vorm[1].d = 5;    vorm[2].d = 1;    vorm[3].d = 7;
 vorm[4].d = 7;    vorm[5].d = 1;    vorm[6].d = 5;    vorm[7].d = 3;
 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-n;  vorm[5].x = x+n;  vorm[6].x = x-n;  vorm[7].x = x+n;
 vorm[0].y = y-n;  vorm[1].y = y-n;  vorm[2].y = y+n;  vorm[3].y = y+n;
 vorm[4].y = y-n;  vorm[5].y = y-n;  vorm[6].y = y+n;  vorm[7].y = y+n;}
function buttondp1Action()
{vorm[0].d = 4;    vorm[1].d = 4;    vorm[2].d = 2;    vorm[3].d = 6;
 vorm[4].d = 6;    vorm[5].d = 2;    vorm[6].d = 4;    vorm[7].d = 4;
 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-2*n;vorm[1].y = y-2*n;vorm[2].y = y+2*n;vorm[3].y = y+2*n;}
function buttondp2Action()
{vorm[0].d = 5;    vorm[1].d = 3;    vorm[2].d = 3;    vorm[3].d = 5;
 vorm[4].d = 5;    vorm[5].d = 3;    vorm[6].d = 3;    vorm[7].d = 5;
 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-3*n;vorm[1].y = y-3*n;vorm[2].y = y+3*n;vorm[3].y = y+3*n;}
function buttondp3Action()
{vorm[0].d = 6;    vorm[1].d = 2;    vorm[2].d = 4;    vorm[3].d = 4;
 vorm[4].d = 4;    vorm[5].d = 4;    vorm[6].d = 2;    vorm[7].d = 6;
 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+2*n;vorm[1].y = y+2*n;vorm[2].y = y-2*n;vorm[3].y = y-2*n;}
function buttondp4Action()
{vorm[0].d = 7;    vorm[1].d = 1;    vorm[2].d = 5;    vorm[3].d = 3;
 vorm[4].d = 3;    vorm[5].d = 5;    vorm[6].d = 1;    vorm[7].d = 7;
 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+3*n;vorm[1].y = y+3*n;vorm[2].y = y-3*n;vorm[3].y = y-3*n;}
 function buttonRAUAction()
   {if (ruitjes){ruitjes = false;} else {ruitjes = true;}}
function buttonDAction(){save('acht_parallellogrammen.png');}