schets met 12 parallellogrammen.                       terug naar de inleiding    

met de s toets stoppen de rotaties met iedere andere toets starten de rotaties           

                                                                                              naar de animatie in fullscreen

12 parallellogrammen die een x, y en z rotatie maken. De schets maakt gebruik van de class  "Paral3d"  en de superclass  "Vormen"

De schets is een 3d animatie daarom is de WEBGL mode ingeschakeld. WEBGL maakt ook gebruik van de GPU

de schets bestaat uit 12 parallellogrammen met hoogte h en lengtes  l,  2l en 3l

argumenten van de constructor 1) hoogte h,  2) lengte l ,  3) links/rechts (0 of 1),  4) draaipunt,  5) x positie,  6)  y positie,  7) z) positie
                                            8) rotatie mode met: 1) 2d rotatie, 2)  X rotatie, 3) Y rotatie, 4) Z rotatie, 9) hoek x as,  10) hoek,  11) kleur

 
//animatie met 12 parallellogrammen hoogte h lengte l, 2l en 3l
let vorm = []; let xHoek = 0;
//rotatie mode hier 2d rotatie van de parallellogrammen met lengte 3l
let mode3l = 1;  let mode2l = 2; let model = 4;
let zwartwit = false; sliderCreeren = true;
 
function setup() {
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,30);buttonZW.style('width','100px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonR = createButton('reset x hoek 0');
  buttonR.position(20,60);buttonR.style('width','100px');
  buttonR.mouseClicked(buttonRAction);
  buttonXH20 = createButton('x hoek 20');
  buttonXH20.position(20,90);buttonXH20.style('width','100px');
  buttonXH20.mouseClicked(buttonXH20Action);
  buttonXH45 = createButton('x hoek 45');
  buttonXH45.position(20,120);buttonXH45.style('width','100px');
  buttonXH45.mouseClicked(buttonXH45Action);
  buttonXH90 = createButton('x hoek 90');
  buttonXH90.position(20,150);buttonXH90.style('width','100px');
  buttonXH90.mouseClicked(buttonXH90Action);
  buttonZRot = createButton('Z rotatie');
  buttonZRot.position(20,180);buttonZRot.style('width','100px');
  buttonZRot.mouseClicked(buttonZRotAction);
  button2DRot = createButton('2d rotatie');
  button2DRot.position(20,210);button2DRot.style('width','100px');
  button2DRot.mouseClicked(button2DRotAction);
  buttonXRot = createButton('X rotatie');
  buttonXRot.position(20,240);buttonXRot.style('width','100px');
  buttonXRot.mouseClicked(buttonXRotAction);
  buttonYRot = createButton('Y rotatie');
  buttonYRot.position(20,270);buttonYRot.style('width','100px');
  buttonYRot.mouseClicked(buttonYRotAction);
 
  if (sliderCreeren) {
  sliderA = createSlider(0, 200, 100, 2);
  sliderA.position(20, 300); sliderA.style('width', '80px');
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
}
  buttonD = createButton('downloaden');
  buttonD.position(20,330);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight,WEBGL);
  const x = 0;  const y = 0;  const z = height/6;
  const n = height/14; const h = n;  const l = n;
  //argumenten van de constructor 1) hoogte, 2) links/rechts, 3) lengte, 4) draaipunt, 5 x positie, 6) y positie, 7) z) positie
  //8) rotatie mode met 1) 2d rotatie 2) X rotatie 3) Y rotatie, 4) Z rotatie 9) hoek x as
  //10) hoek, 11) kleur
  //constructor         1  2  3  4  5  6  7    8     9    10            11
  vorm[0] = new Paral3d(h, l, 1, 5, x, y, z, model, xHoek, 0, color(255, 255, 0, 200));
  vorm[1] = new Paral3d(h, l, 0, 3, x, y, z, model, xHoek, 0, color(0, 255, 0, 200));
  vorm[2] = new Paral3d(h, l, 0, 7, x, y, z, model, xHoek, 0, color(255, 0, 0, 200));
  vorm[3] = new Paral3d(h, l, 1, 1, x, y, z, model, xHoek, 0, color(100, 0, 255, 200));
 
  vorm[4] = new Paral3d(h, 2*l, 1, 7, x-n, y-n, z, mode2l, xHoek, 0, color(255, 255, 0, 150));
  vorm[5] = new Paral3d(h, 2*l, 0, 1, x+n, y-n, z, mode2l, xHoek, 0, color(0, 255, 0, 150));
  vorm[6] = new Paral3d(h, 2*l, 0, 5, x-n, y+n, z, mode2l, xHoek, 0, color(255, 0, 0, 150));
  vorm[7] = new Paral3d(h, 2*l, 1, 3, x+n, y+n, z, mode2l, xHoek, 0, color(100, 0, 255, 150));
 
  vorm[8] = new Paral3d(h, 3*l, 1, 7, x-n, y-n, z, mode3l, xHoek, 0, color(255, 255, 0, 100));
  vorm[9] = new Paral3d(h, 3*l, 0, 1, x+n, y-n, z, mode3l, xHoek, 0, color(0, 255, 0, 100));
  vorm[10] = new Paral3d(h,3*l, 0,5,  x-n, y+n, z, mode3l, xHoek, 0, color(255, 0, 0, 100));
  vorm[11] = new Paral3d(h,3*l, 1,3,  x+n, y+n, z, mode3l, xHoek, 0, color(100, 0, 255, 100));
}
 
function draw() {
  if (zwartwit) {background(0)}
  else {clear(); background('rgba(255,255,255, 0)');}
  alfaA();
  for (let i = 0; i < 12; i++) {vorm[i].display();}
 
  if (key == 's') {
 }
 
   else
 {
    vorm[0].dpRotReS(vorm[0]);vorm[1].dpRotLiS(vorm[1]);vorm[2].dpRotLiS(vorm[2]); vorm[3].dpRotReS(vorm[3]);
    vorm[4].dpRotReS(vorm[4]);vorm[5].dpRotLiS(vorm[5]);vorm[6].dpRotLiS(vorm[6]); vorm[7].dpRotReS(vorm[7]);
    vorm[8].dpRotLi(vorm[8]); vorm[9].dpRotRe(vorm[9]);vorm[10].dpRotRe(vorm[10]);vorm[11].dpRotLi(vorm[11]);
  }
}
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 function buttonZWAction(){if(zwartwit){zwartwit   = false;} else {zwartwit =true;}}
 function buttonRAction(){setup();}
 function buttonXH20Action(){for (let i=0; i< 12; i++) {vorm[i].xHoek = 20;}}
 function buttonXH45Action(){for (let i=0; i< 12; i++) {vorm[i].xHoek = 45;}}
 function buttonXH90Action(){for (let i=0; i< 12; i++) {vorm[i].xHoek = 90;}}
 function buttonZRotAction(){for (let i=0; i< 12; i++) {vorm[i].rotmod = 4;}}
 function button2DRotAction(){for (let i=0; i< 12; i++) {vorm[i].rotmod = 1;}}
 function buttonXRotAction(){for (let i=0; i< 12; i++) {vorm[i].rotmod = 2;}}
 function buttonYRotAction(){for (let i=0; i< 12; i++) {vorm[i].rotmod = 3;}}
 
 function alfaA(){let sliderAlfa = sliderA.value();
 vorm[8].c = color(255,255,0,sliderAlfa);    vorm[9].c = color(0,255,0,sliderAlfa);
 vorm[10].c = color(255,0,0,sliderAlfa); vorm[11].c = color(100,0,255,sliderAlfa);}
 
 function buttonDAction(){save('twaalf_parallellogrammen.png');}