acht zeshoeken die een zeshoek vormen in fullscreen

schets in p5.js

de schets maakt gebruik van de p5.js classes   "Vhoek_n6"  , "Text" en de superclass "Vormen"

 
let vorm = []; let tekst1; let tekst2;  let sider;
let dp1 = 8, dp2 = 8, dp3 = 8, dp4 = 8; let hoek = 0;
 
function setup() {
  button0 = createButton('dp 8');
  button0.position(20,40);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 7');
  button1.position(110,40);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  button2 = createButton('dp 6');
  button2.position(20,80);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  button3 = createButton('dp 5');
  button3.position(110,80);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,120);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 3');
  button5.position(110,120);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 2');
  button6.position(20,160);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  button7 = createButton('dp 1');
  button7.position(110,160);button7.style('width','70px');
  button7.mouseClicked(button7Action);
  button8 = createButton('dp');
  button8.position(20,200);button8.style('width','70px');
  button8.mouseClicked(button8Action);
  button9= createButton('dp');
  button9.position(110,200);button9.style('width','70px');
  button9.mouseClicked(button9Action);
  buttonR= createButton('random dp');
  buttonR.position(20,240);buttonR.style('width','120px');
  buttonR.mouseClicked(buttonRAction);
  buttonH = createButton('hoek 30 gr stappen');
  buttonH.position(20,280);buttonH.style('width','150px');
  buttonH.mouseClicked(buttonHAction);
  slider = createSlider(10, 200, 50, 2);
  slider.position(20, 310);
  slider.style('width', '80px');
  buttonD = createButton('downloaden');
  buttonD.position(20,340);buttonD.style('width','110px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
  const x = width/2; const y = height/2; const n = height/7;
  const hn = sqrt(3*n*n/4);
  const  alfa = 50; const sw = n/100;const swt = n/500; const kleur = 0;
  vorm[0] = new Vhoek_n6(n,dp1,x-hn*sin(radians(60)),y+hn*cos(radians(60)),
                         60+hoek, color(211,237,67, alfa),sw,color(kleur));
  vorm[1] = new Vhoek_n6(n,dp2,x+hn*sin(radians(60)),y+hn*cos(radians(60)),
                         -60-hoek, color(67,179,237,alfa),sw,color(kleur));
  vorm[2] = new Vhoek_n6(n,dp3,x-hn*sin(radians(60)),y-hn*cos(radians(60)),
                         120-hoek, color(255,0,255,alfa),sw,color(kleur));
  vorm[3] = new Vhoek_n6(n,dp4,x+hn*sin(radians(60)),y-hn*cos(radians(60)),
                        -120+hoek,color(255,255,0,alfa),sw,color(kleur));
 
  vorm[4] = new Vhoek_n6(n, dp1, x, y-hn,180-hoek,color(128,203,43,alfa),sw,color(kleur));
  vorm[5] = new Vhoek_n6(n, dp2, x, y+hn,-hoek,   color(240,208,46,alfa),sw,color(kleur));
  vorm[6] = new Vhoek_n6(n, dp3, x, y-hn,180+hoek,color(46,196,240,alfa),sw,color(kleur));
  vorm[7] = new Vhoek_n6(n, dp4, x, y+hn,+hoek,   color(236,67,73,alfa),sw,color(kleur));
  tekst1 = new Text("" , 18, 1, 40, 20,0,color(0),swt,color(kleur));
  tekst2 = new Text("" , 18, 1, 180,20,0,color(0),swt,color(kleur));
}
 
function draw() {
  //background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  tekst1.text = ("dp: "+dp1+" , "+dp2+" , "+dp3+" en "+dp4);
  tekst2.text = ("hoek = " + vorm[7].hoek + " graden");
  tekst1.display();
  tekst2.display();
  alfa();
 
  for (let i = 0; i < 8; i++)
  {
  vorm[i].display();
  }
   if (key == 's' || key == 'S') {
 
  }
   else
 {
   vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
   vorm[2].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
   vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotLi(vorm[5]);
   vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotRe(vorm[7]);
 }
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function button0Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 8;}
  dp1 = 8; dp2 = 8; dp3 = 8; dp4 = 8;}
function button1Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 7;}
  dp1 = 7; dp2 = 7; dp3 = 7; dp4 = 7;}
function button2Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 6;}
  dp1 = 6; dp2 = 6; dp3 = 6; dp4 = 6;}
function button3Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 5;}
  dp1 = 5; dp2 = 5; dp3 = 5; dp4 = 5;}
function button4Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 4;}
  dp1 = 4; dp2 = 4; dp3 = 4; dp4 = 4;}
function button5Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 3;}
  dp1 = 3; dp2 = 3; dp3 = 3; dp4 = 3;}
function button6Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 2;}
  dp1 = 2; dp2 = 2; dp3 = 2; dp4 = 2;}
function button7Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 1;}
  dp1 = 1; dp2 = 1; dp3 = 1; dp4 = 1;}
function button8Action()
 {vorm[0].d = 7; vorm[1].d = 4; vorm[2].d = 3; vorm[3].d = 4;
  vorm[4].d = 7; vorm[5].d = 4; vorm[6].d = 3; vorm[7].d = 4;
  dp1 = 7; dp2 = 4; dp3 = 3; dp4 = 4;}
function button9Action()
 {vorm[0].d = 7; vorm[1].d = 8; vorm[2].d = 7; vorm[3].d = 8;
  vorm[4].d = 7; vorm[5].d = 8; vorm[6].d = 7; vorm[7].d = 8;
  dp1 = 7; dp2 = 8; dp3 = 7; dp4 = 8;}2
 
function buttonRAction()
    { dp1 = int(random(0,8)); vorm[0].d = dp1; vorm[4].d = dp1;
      dp2 = int(random(0,8)); vorm[1].d = dp2; vorm[5].d = dp2;
      dp3 = int(random(0,8)); vorm[2].d = dp3; vorm[6].d = dp3;
      dp4 = int(random(0,8)); vorm[3].d = dp4; vorm[7].d = dp4;}
 
function buttonHAction()
   {hoek = hoek + 30; if (hoek == 360) {hoek = 0;}
   vorm[0].hoek = 60+hoek; vorm[1].hoek=-60-hoek; vorm[2].hoek=120-hoek;
   vorm[3].hoek=-120+hoek; vorm[4].hoek=180-hoek; vorm[5].hoek = -hoek;
   vorm[6].hoek= 180+hoek; vorm[7].hoek = hoek;}
 
function alfa(){let sliderAlfa = slider.value();
  vorm[0].c = color(211,237,67,sliderAlfa);
  vorm[1].c = color(67,179,237,sliderAlfa);
  vorm[2].c = color(255,0,255, sliderAlfa);
  vorm[3].c = color(255,255,0, sliderAlfa);
  vorm[4].c = color(128,203,43,sliderAlfa);
  vorm[5].c = color(240,208,46,sliderAlfa);
  vorm[6].c = color(46,196,240,sliderAlfa);
  vorm[7].c = color(236,67,73, sliderAlfa);}
 
function buttonDAction(){save('acht_zeshoeken.png');}