de schets met dph = 4 en dpb = 7

 

 

 

de schets met dph = 2 en dpb = 2

 de schets met dph = 2 en dpb = 2

 

 

dph = 6 en dpb =6

 de schets met dph = 6 en dpb = 6

 

 

 

animatie met 8 boxen en 10 hoekbalken.                                  terug naar de inleiding 
toets "s" stopt de bewegingen iedere andere toets strart de bewegingen weer
                                                                de boxen en hoekbalken in fullscreen
 
de schets maakt gebruik van objectmethodes van de superclass "Vormen" en objecten van de subclasses "Hoek3d_na4n", "Hoek3d_na2n", en "Box_nh"

 
 


let vorm = []; let dpb = 7; let dph = 4; let hoek = 0;
function centerCanvas() {
  let x = (windowWidth - width) / 2;
  let y = (windowHeight- height)/ 2;
  cnv.position(x, y);}
 
function setup()  {
  cnv = createCanvas(1000,1000);
   centerCanvas();
  buttonR1 = createButton('reset h 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset h 45');
  buttonR2.position(100,40);buttonR2.style('width','80px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset h 90');
  buttonR3.position(100,80);buttonR3.style('width','80px');
  buttonR3.mouseClicked(buttonR3Action);
  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);
  buttonD = createButton('downloaden');
  buttonD.position(20,280);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
 
  let x = width/2; let y = height/2; let n   = height/22;
  let a = sqrt(2*n*n);
 
  const ch0 = color(10,10,10,0);    const ch1 = color(255,0,0,100);
  const ch2 = color(50,255,10,100); const ch3 = color(87,245,57,100);
  const ch4 = color(5,252,6,100);   const cb1 = color(59,247,22,100);
  const cb2 = color(34,129,16,100); const cb3 = color(100,227,76,100);
  const sw = n/100; const sc = color(0);
  vorm[0] = new Hoek3d_na4n(n, dph, x-5*n, y-5*n, -45+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[1] = new Hoek3d_na2n(n, dph, x-3*n, y-3*n, -45+hoek,ch0,ch0,ch0,ch0,ch0,sw,sc);
  vorm[2] = new Hoek3d_na4n(n, dph, x+5*n, y-5*n , 45+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[3] = new Hoek3d_na2n(n, dph, x+3*n, y-3*n , 45+hoek,ch0,ch0,ch0,ch0,ch0,sw,sc);
  vorm[4] = new Hoek3d_na4n(n, dph, x+5*n, y+5*n, 135+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[5] = new Hoek3d_na2n(n, dph, x+3*n, y+3*n, 135+hoek,ch0,ch0,ch0,ch0,ch0,sw,sc);
  vorm[6] = new Hoek3d_na4n(n, dph, x-5*n, y+5*n,-135+hoek,ch1,ch2,ch3,ch4,ch4,sw,sc);
  vorm[7] = new Hoek3d_na2n(n, dph, x-3*n, y+3*n,-135+hoek,ch0,ch0,ch0,ch0,ch0,sw,sc);
  vorm[8] = new Box_nh(n*2, a, dpb, x-2*n, y-n,  45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[9] = new Box_nh(n*2, a, dpb, x+2*n, y-n, -45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[10] = new Box_nh(n*2,a, dpb, x-2*n, y+n, 135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[11] = new Box_nh(n*2,a, dpb, x+2*n, y+n,-135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[12] = new Box_nh(n*2,a, dpb, x-n, y-2*n,-135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[13] = new Box_nh(n*2,a, dpb, x-n, y+2*n, -45+hoek,cb1,cb2,cb3,sw,sc);
  vorm[14] = new Box_nh(n*2,a, dpb, x+n, y-2*n, 135+hoek,cb1,cb2,cb3,sw,sc);
  vorm[15] = new Box_nh(n*2,a, dpb, x+n, y+2*n,  45+hoek,cb1,cb2,cb3,sw,sc);
}
 
function draw()  {
  //background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
  for (let i = 0; i < 16; i++) {vorm[i].display();}
 
   if (key == 's' || key == 'S') { }
   else {
  vorm[8].yUpDown(); vorm[9].yUpDown();
  vorm[10].yDownUp();vorm[11].yDownUp();
  vorm[12].xReLi();  vorm[13].xReLi();
  vorm[14].xLiRe();  vorm[15].xLiRe();
  }
}30
 
function windowResized() {centerCanvas();}
 
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 = 4};
  for (let i = 8; i < 16; i++){vorm[i].d = 7}}
function buttondp1Action()
  {for (let i = 0; i < 8; i++){vorm[i].d = 2};
   for (let i = 8; i < 16; i++){vorm[i].d = 2}}
function buttondp2Action()
  {for (let i = 0; i < 8; i++){vorm[i].d = 6};
   for (let i = 8; i < 16; i++){vorm[i].d = 6}}
function buttondp3Action()
  {for (let i = 0; i < 8; i++){vorm[i].d = 4};
   for (let i = 8; i < 16; i++){vorm[i].d = 2}}
function buttondp4Action()
  {for (let i = 0; i < 8; i++){vorm[i].d = 6};
  for (let i = 8; i < 16; i++){vorm[i].d = 5}}
  function buttonDAction(){save('hoekbalken_boxen.png');}