Met de "s" toets stopt en met de "r" toets starten de bewegingen, met de "d" toets kan je een afbeelding van de animatie downloaden

schets met 12 parallellogrammen.                       terug naar de inleiding                             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 p5.js 3d animatie kost veel rekencapaciteit,  op mijn wat trage computer worden daarom veel tekenframes overgeslagen

de beelden verlopen daarom wat schokkerig en de lijnen bestaan uit korte steepjes.

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 (met Xrotate op 45 graden),  9) hoek,  10) kleur
 

let vorm = []; 
function setup() { 
  createCanvas(windowWidth, windowHeight,WEBGL); 
  const x = 0; 
  const y = 0; 
  const z = height/5; 
  const n = height/10; 
  const h = n; 
  const l = n; 
  //constructor         1  2  3  4  5  6 7  8 9             10 
  vorm[0] = new Paral3d(h, l, 1, 5, x, y,z, 4,0, color(255, 255, 0, 200)); 
  vorm[1] = new Paral3d(h, l, 0, 3, x, y,z, 4,0, color(0, 255, 0, 200)); 
  vorm[2] = new Paral3d(h, l, 0, 7, x, y,z, 4,0, color(255, 0, 0, 200)); 
  vorm[3] = new Paral3d(h, l, 1, 1, x, y,z, 4,0, color(100, 0, 255, 200)); 
 
  vorm[4] = new Paral3d(h, 2*l, 1, 7, x-n, y-n,z, 2,0, color(255, 255, 0, 150)); 
  vorm[5] = new Paral3d(h, 2*l, 0, 1, x+n, y-n,z, 2,0, color(0, 255, 0, 150)); 
  vorm[6] = new Paral3d(h, 2*l, 0, 5, x-n, y+n,z, 2,0, color(255, 0, 0, 150)); 
  vorm[7] = new Paral3d(h, 2*l, 1, 3, x+n, y+n,z, 2,0, color(100, 0, 255, 150)); 
 
  vorm[8] = new Paral3d(h, 3*l, 1, 7, x-n, y-n,z, 3,0, color(255, 255, 0, 100)); 
  vorm[9] = new Paral3d(h, 3*l, 0, 1, x+n, y-n,z, 3,0, color(0, 255, 0, 100)); 
  vorm[10] = new Paral3d(h,3*l, 0,5,  x-n, y+n,z, 3,0, color(255, 0, 0, 100)); 
  vorm[11] = new Paral3d(h,3*l, 1,3,  x+n, y+n,z, 3,0, color(100, 0, 255, 100)); 
} 
 
function draw() { 
  background(230,251,255); 
 
  for (let i = 0; i < 12; i++) { 
    vorm[i].display(); 
  } 
 
  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 keyPressed() { 
  if (key == 's') { 
    noLoop(); 
  } 
  if (key == 'r') { 
    loop(); 
  } 
  if (key == 'd'){ 
    save('parallellogrammen_animatie.png'); 
  } 
}