animatie in fullscreen

De schets maak gebruik van objecten van de p5.js class "Vhoek_na4"  en de p5.js class "Vormen"

let vorm =  []; let ruitjes = false; let sliderAan = true; let rotatie = true;
function setup() {
 buttonR = createButton('reset rotatie start/stop');
 buttonR.position(20,40);buttonR.style('width','150px');
 buttonR.mouseClicked(buttonRAction);
 button1 = createButton('dp 1');
 button1.position(20,80);button1.style('width','70px');
 button1.mouseClicked(button1Action);
 button2 = createButton('dp 2');
 button2.position(20,120);button2.style('width','70px');
 button2.mouseClicked(button2Action);
 button3 = createButton('dp 3');
 button3.position(20,160);button3.style('width','70px');
 button3.mouseClicked(button3Action);
 button4 = createButton('dp 4');
 button4.position(20,200);button4.style('width','70px');
 button4.mouseClicked(button4Action);
 
 if (sliderAan) {
    sliderhoek = createSlider(-180, 180, 0, 1);
    sliderhoek.position(20,240);
    sliderhoek.style('width', '80px');
    sliderAan = false;
  }
 
 buttonRuitAU = createButton('ruitjes aan/uit');
 buttonRuitAU.position(20,280);buttonRuitAU.style('width','120px');
 buttonRuitAU.mouseClicked(buttonRuitAUAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,320);buttonD.style('width','110px');
 buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
  const x = width/2; const y = height/2; const n = height/8; let hoek = 0;
  let sw = n/65; let kleur = 0; let alfa = 150; let sc = color(0);
  vorm[0] = new Vhoek_na4(n, 1, x-5*n, y,hoek,color(200,255,0,alfa),sw,sc);
  vorm[1] = new Vhoek_na4(n, 8, x-n,   y,hoek,color(142,247,166,alfa),sw,sc);
  vorm[2] = new Vhoek_na4(n, 1, x+n,   y,hoek,color(35,204,232,alfa), sw,sc);
  vorm[3] = new Vhoek_na4(n, 8, x+5*n, y,hoek,color(222,142,247,alfa),sw,sc);
  vorm[4] = new Vhoek_na4(n, 4, x-5*n, y,hoek,color(222,142,247,alfa),sw,sc);
  vorm[5] = new Vhoek_na4(n, 5, x-n,   y,hoek,color(35,204,232,alfa), sw,sc);
  vorm[6] = new Vhoek_na4(n, 4, x+n,   y,hoek,color(142,247,166,alfa),sw,sc);
  vorm[7] = new Vhoek_na4(n, 5, x+5*n, y,hoek,color(200,255,0,alfa),  sw,sc);
  ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
  clear();
  background('rgba(255,255,255, 0)');
  if (rotatie) {rotatie =true} else {vhoekHoek();rotatie = false};
if (ruitjes){ ruitjespap.display();
   for(let i = 0; i < 6; 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[4].dpRotRe(vorm[4]);
  vorm[1].dpRotRe(vorm[1]); vorm[5].dpRotLi(vorm[5]);
  vorm[2].dpRotLi(vorm[2]); vorm[6].dpRotRe(vorm[6]);
  vorm[3].dpRotRe(vorm[3]); vorm[7].dpRotLi(vorm[7]);
  }
}
 
function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonRAction(){if(rotatie){rotatie=false;}
else{rotatie=true;}setup();}
function button0Action()
 {vorm[0].d=1; vorm[1].d=8;vorm[2].d=1;vorm[3].d=5;vorm[4].d=4;
  vorm[5].d=5; vorm[6].d=4;vorm[7].d=5;}
function button1Action()
 {vorm[0].d=2; vorm[1].d=7;vorm[2].d=2;vorm[3].d=7;vorm[4].d=5;
  vorm[5].d=4; vorm[6].d=5;vorm[7].d=4;}
function button2Action()
 {vorm[0].d=3; vorm[1].d=6;vorm[2].d=3;vorm[3].d=6;vorm[4].d=7;
  vorm[5].d=2; vorm[6].d=7;vorm[7].d=2;}
function button3Action()
 {vorm[0].d=5; vorm[1].d=4;vorm[2].d=5;vorm[3].d=4;vorm[4].d=7;
  vorm[5].d=2; vorm[6].d=7;vorm[7].d=2;}
function button4Action()
 {vorm[0].d=4; vorm[1].d=1;vorm[2].d=8;vorm[3].d=5;vorm[4].d=6;
  vorm[5].d=8; vorm[6].d=1;vorm[7].d=3;}
function buttonRuitAUAction()
 {if(ruitjes){ruitjes=false;}else{ruitjes=true;}}
 function vhoekHoek(){let slider = sliderhoek.value();
 for (let i=0; i<8; i++){vorm[i].hoek = slider}};
function buttonDAction(){save('acht_achthoeken.png');}