naar de roterende hoeken in fullscreen

De schets maakt gebruik van de p5.js de classes Hoek_n2n,    Hoek_n3n,   Hoek_n4n , Ruitjes en  de superclass  Vormen

let vorm = []; let ruitjes; let h = 0;
let sliderCreeren = true; let rond = true;
function setup() {
  buttonR1 = createButton('reset 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset 45');
  buttonR2.position(100,40);buttonR2.style('width','70px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset 90');
  buttonR3.position(20,80);buttonR3.style('width','70px');
  buttonR3.mouseClicked(buttonR3Action);
  buttonR4 = createButton('reset 135');
  buttonR4.position(100,80);buttonR4.style('width','80px');
  buttonR4.mouseClicked(buttonR4Action);
  button0 = createButton('dp 0');
  button0.position(20,120);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(100,120);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 2');
  button2.position(20,160);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 3');
  button3.position(100,160);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,200);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(100,200);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(20,240);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  button7 = createButton('dp 7');
  button7.position(100,240);button7.style('width','70px');
  button7.mouseClicked(button7Action);
 
  buttonZw = createButton('zwart');
  buttonZw.position(20,280);buttonZw.style('width','70px');
  buttonZw.mouseClicked(buttonZwAction);
 
  buttonBl= createButton('blauw');
  buttonBl.position(100,280);buttonBl.style('width','70px');
  buttonBl.mouseClicked(buttonBlAction);
 
  if (sliderCreeren) {
  sliderSW = createSlider(0, 70, 10, 1);
  sliderSW.position(20, 310); sliderSW.style('width', '100px');
}
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
  buttonRC = createButton('random kleur');
  buttonRC.position(20,340);buttonRC.style('width','100px');
  buttonRC.mouseClicked(buttonRCAction);
  buttonRondAU = createButton('rond aan/uit');
  buttonRondAU .position(20,380);buttonRondAU .style('width','100px');
  buttonRondAU .mouseClicked(buttonRondAUAction);
  buttonRuitAU = createButton('ruitjes aan/uit');
  buttonRuitAU.position(20,420);buttonRuitAU.style('width','100px');
  buttonRuitAU.mouseClicked(buttonRuitAUAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,460);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  let x = width/2;let y = height/2;let n = height/14;
  let a = sqrt(2*n*n);  let alpha = 100; let c = color(138,135,232);
  ruitjespap = new Ruitjes(n , x ,y);
  vorm[0] = new Hoek_n2n(n, 4, x,      y,      0+h, color(245,220,27,alpha),1,c);
  vorm[1] = new Hoek_n2n(n, 4, x,      y,    180+h, color(27,188, 45,alpha),1,c);
  vorm[2] = new Hoek_n4n(n, 4, x-1.5*a,y-a/2,-90+h, color(168,245,27,alpha),1,c);
  vorm[3] = new Hoek_n4n(n, 4, x+1.5*a,y-a/2, 90+h, color(245,138,177,alpha),1,c);
  vorm[4] = new Hoek_n3n(n, 6, x+a,    y+a,    0+h, color(168,245,27, alpha),1,c);
  vorm[5] = new Hoek_n3n(n, 2, x-a,    y+a,    0+h, color(245,138,177,alpha),1,c);
}
 
function draw() {
  //  background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  strokeSlider();
 for (let i = 0; i < 6; i++){vorm[i].display();}
 
 if (key == 's' || key =='S') { }
else
{
  vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
  vorm[0].yDownUp(); vorm[1].yUpDown();
}
  if (ruitjes){
    ruitjespap.display();
    for(let i = 0; i < 6; i++){vorm[i].dpAan();}
  }
}
 
function windowResized() {
  resizeCanvas(windowWidth,windowHeight);
}
 
function buttonR1Action(){h = 0;setup();}
function buttonR2Action(){h =45;setup();}
function buttonR3Action(){h =90;setup();}
function buttonR4Action(){h =135;setup();}
 
function button0Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=4;vorm[3].d=4;vorm[4].d=6;vorm[5].d=2;}
function button1Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=0;vorm[3].d=0;vorm[4].d=6;vorm[5].d=2;}
function button2Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=8;vorm[3].d=8;vorm[4].d=6;vorm[5].d=2;}
function button3Action()
 {vorm[0].d=4; vorm[1].d=4;vorm[2].d=4;vorm[3].d=4;vorm[4].d=4;vorm[5].d=4;}
function button4Action()
 {vorm[0].d=6; vorm[1].d=6;vorm[2].d=2;vorm[3].d=6;vorm[4].d=1;vorm[5].d=7;}
function button5Action()
 {vorm[0].d=0; vorm[1].d=0;vorm[2].d=5;vorm[3].d=3;vorm[4].d=8;vorm[5].d=8;}
function button6Action()
 {vorm[0].d=8; vorm[1].d=4;vorm[2].d=7;vorm[3].d=1;vorm[4].d=2;vorm[5].d=6;}
function button7Action()
 {vorm[0].d=2; vorm[1].d=2;vorm[2].d=1;vorm[3].d=0;vorm[4].d=2;vorm[5].d=8;}
 
function buttonRCAction()
 {for (let i = 0; i< 6; i++)
 {vorm[i].c = color(random(0,200),random(0,255),random(0,255),100);
  vorm[i].sc = color(random(0,200),random(0,255),random(0,255),100);}}
function buttonZwAction(){for (let i = 0; i< 6; i++)vorm[i].sc = color(0);}
function buttonBlAction(){for (let i = 0; i< 6; i++)vorm[i].sc = color(138,135,232);}
function strokeSlider() {let sliderwaarde = sliderSW.value();
  for (let i = 0; i< 6; i++){vorm[i].sw = sliderwaarde;}}
function buttonRondAUAction()
{if (rond){strokeJoin(ROUND);rond = false;}
 else{strokeJoin(MITER);rond = true;}}
function buttonRuitAUAction()
 {if(ruitjes){ruitjes=false;}else{ruitjes=true;}}
function buttonDAction(){save('zes_hoeken.png');}