roterende boxen in fullscreen

zie animatie 1 met acht boxen "Box_nh "

De schets in p5.js maakt gebruik van objecten van de p5.js class  "Box_nh"  en van de superclass  "Vormen" 

 

 let vorm = []; let x; let n; let hoek = 0; let sliderCreeren = true;
 function setup() {
  buttonR1 = createButton('reset h0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset h1');
  buttonR2.position(100,40);buttonR2.style('width','70px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset h2');
  buttonR3.position(180,40);buttonR3.style('width','70px');
  buttonR3.mouseClicked(buttonR3Action);
  buttondp0 = createButton('dp 0');
  buttondp0.position(20,80);buttondp0.style('width','70px');
  buttondp0.mouseClicked(buttondp0Action);
  button0 = createButton('(x,y) 0');
  button0.position(100,80);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  buttondp1 = createButton('dp 1');
  buttondp1.position(20,120);buttondp1.style('width','70px');
  buttondp1.mouseClicked(buttondp1Action);
  button1 = createButton('(x,y) 1');
  button1.position(100,120);button1.style('width','70px');
  button1.mouseClicked(button1Action);
  buttondp2 = createButton('dp 2');
  buttondp2.position(20,160);buttondp2.style('width','70px');
  buttondp2.mouseClicked(buttondp2Action);
  button2 = createButton('(x,y) 2');
  button2.position(100,160);button2.style('width','70px');
  button2.mouseClicked(button2Action);
  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);
  button3 = createButton('(x,y) 3');
  button3.position(100,200);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  buttondp5 = createButton('dp 5');
  buttondp5.position(20,280);buttondp5.style('width','70px');
  buttondp5.mouseClicked(buttondp5Action);
  buttondp6 = createButton('dp 6');
  buttondp6.position(20,320);buttondp6.style('width','70px');
  buttondp6.mouseClicked(buttondp6Action);
  buttondp7 = createButton('dp 7');
  buttondp7.position(20,360);buttondp7.style('width','70px');
  buttondp7.mouseClicked(buttondp7Action);
  buttondp8 = createButton('dp 8');
  buttondp8.position(20,400);buttondp8.style('width','70px');
  buttondp8.mouseClicked(buttondp8Action);
  if (sliderCreeren) {
  sliderBox0tm3 = createSlider(0, 200, 50, 1);
  sliderBox0tm3.position(20, 440); sliderBox0tm3.style('width', '100px');
  sliderBox4tm7 = createSlider(0, 200, 50, 1);
  sliderBox4tm7.position(20, 460); sliderBox4tm7.style('width', '100px');
}
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
 
  buttonD = createButton('downloaden');
  buttonD.position(20,490);buttonD.style('width','120px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  x = width/2; let y = height/2; n = height/10;
  let h = sqrt(2*n*n);
  let cb1 = color(255, 0, 0, 50);
  let cb2 = color(0, 255, 0, 100);
  let cb3 = color(0, 0, 255, 100);
  let sw = n/100; let sc = color(0);
  vorm[0] = new Box_nh(n*2, h, 6, x,   y, 0+hoek, cb1, cb2, cb3, sw, sc);
  vorm[1] = new Box_nh(n*2, h, 6, x,   y, 0+hoek, cb1, cb2, cb3, sw, sc);
  vorm[2] = new Box_nh(n*2, h, 6, x+n, y, 0+hoek, cb1, cb2, cb3, sw, sc);
  vorm[3] = new Box_nh(n*2, h, 6, x-n, y, 0+hoek, cb1, cb2, cb3, sw, sc);
  vorm[4] = new Box_nh(n*2, h, 6, x,  y,180+hoek, cb1, cb2, cb3, sw, sc);
  vorm[5] = new Box_nh(n*2, h, 6, x,  y,180+hoek, cb1, cb2, cb3, sw, sc);
  vorm[6] = new Box_nh(n*2, h, 6, x-n,y,180+hoek, cb1, cb2, cb3, sw, sc);
  vorm[7] = new Box_nh(n*2, h, 6, x+n,y,180+hoek, cb1, cb2, cb3, sw, sc);
}
 
function draw() {
  // background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  alfaBoxen03(); alfaBoxen47();
  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].dpRotRe(vorm[4]); vorm[3].dpRotLi(vorm[5]);
  vorm[4].dpRotLi(vorm[3]); vorm[5].dpRotRe(vorm[2]);
  vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotLi(vorm[7]);
  }
}
 
function buttonR1Action(){hoek = 0;setup();}
function buttonR2Action(){hoek =45;setup();}
function buttonR3Action(){hoek =90;setup();}
function buttondp0Action()
 {for (let i = 0; i < 8; i++){vorm[i].d = 6}}
 
function buttondp1Action(){vorm[0].d = 1;}
function buttondp2Action(){vorm[1].d = 2;}
function buttondp3Action(){vorm[2].d = 3;}
function buttondp4Action(){vorm[3].d = 4;}
function buttondp5Action(){vorm[4].d = 5;}
function buttondp6Action(){vorm[5].d = 3;}
function buttondp7Action(){vorm[6].d = 7;}
function buttondp8Action(){vorm[7].d = 0;}
 
function button0Action()
{vorm[0].x = x;vorm[1].x = x ;vorm[2].x = x+n;vorm[3].x = x-n;
 vorm[4].x = x;vorm[5].x = x;vorm[6].x = x-n;vorm [7].x = x+n;}
function button1Action()
{vorm[0].x = x; vorm[1].x = x;vorm[2].x = x+2*n;vorm[3].x = x-2*n;
 vorm[4].x = x; vorm[5].x = x;vorm[6].x = x-2*n;vorm [7].x = x+2*n;}
function button2Action()
{vorm[0].x = x+n;vorm[1].x = x-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-2*n;vorm [7].x = x+2*n;}
function button3Action()
 {vorm[0].x = x+n;vorm[1].x = x-n;vorm[2].x = x+3*n;vorm[3].x = x-3*n;
  vorm[4].x = x-n;vorm[5].x = x+n;vorm[6].x = x-3*n;vorm [7].x = x+3*n;}
 
function alfaBoxen03() {let sliderAlfa = sliderBox0tm3.value();
   for (let i = 0; i< 4; i++)
    {vorm[i].c1 = color(255, 0, 0,sliderAlfa);
     vorm[i].c2 = color(0, 255, 0,sliderAlfa+50);
     vorm[i].c3 = color(0, 0, 255, sliderAlfa+50);}}
function alfaBoxen47() {let sliderAlfa = sliderBox4tm7.value();
   for (let i = 4; i< 8; i++)
  {vorm[i].c1 = color(255, 0, 0,sliderAlfa);
   vorm[i].c2 = color(0, 255, 0,sliderAlfa+50);
   vorm[i].c3 = color(0, 0, 255, sliderAlfa+50);}}
 
function buttonDAction(){save('acht_boxen.png');}