regel 33, rotateX(-PI/4) en regel 83, rotateX(3*PI/4) uitgeschakeld

 regel 33, rotateX(-PI/4) en regel 83, rotateX(3*PI/4) uitgeschakeld

 

 

regel 33, rotateX(-PI/4) uitgeschakeld 

regel 33, rotateX(-PI/4) uitgeschakeld 

 

 

 

custom box03

 

 

 

 

 

 

 

 

 

 

 

regel 83,  rotateX(3*PI/4) uitgeschakeld

regel 83,  rotateX(3*PI/4) uitgeschakeld

 

 

 

regel 33, rotateX(-PI/4) uitgeschakeld 

 

regel 33, rotateX(-PI/4) uitgeschakeld

zelf gemaakte box.                                     terug naar de inleiding

In p5.js is het middelpunt van de 3d primitieven het draaipunt. In deze class "Box" is een hoekpunt van de box het draaipunt

vergelijk deze creatie met de 8 pseudo 3d roterende boxen

de class box staat onder deze schets           ga naar de animatie met 8 boxen met de "s" toets stoppen, en met de "r" toets starten de rotaties

 

let gradhoek0 = 1; let gradhoek1 = 1; let gradhoek2 = 1; 
let gradhoek3 = 1; let gradhoek4 = 1; let gradhoek5 = 1; 
let gradhoek6 = 1; let gradhoek7 = 1; 
let x; let y; let z; let n; 
 
function setup() { 
  createCanvas(windowWidth, windowHeight,WEBGL); 
  n = height/5; 
  x = 0; y = 0; z = 0; 
  let alpha = 100; 
//kl1 = voorvlak, kl2 = achtervlak, kl3 = re vlak 
  let kl1 = color(0,255,0,alpha); let kl2 = color(0,255,255,alpha); let kl3 = color(255,0,255,alpha); 
//kl4 = li vlak, kl5 = bovenvlak, kl6 = ondervlak 
  let kl4 = color(0,0,255,alpha); let kl5 = color(255,255,0,alpha); let kl6 = color(255,255,0,alpha); 
//argumenten van de constructor: 1) lengte in x richting, 2) lengte in y richting, 3) lengte in z richting 
//kl1 t/m kl6 zijn de kleuren van de vlakken 
//               1, 2, 3 
  box0 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box1 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box2 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box3 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box4 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box5 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box6 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
  box7 = new Box(n, n, n, kl1, kl2, kl3, kl4, kl5, kl6); 
} 
 
function draw() { 
  background('#E6FBFF'); 
  strokeWeight(2); 
 
  rotateX(-PI/4); 
 
  push(); 
  translate(x, y, z); 
  rotateZ(-PI/4); 
  rotateZ(radians(-gradhoek0)); 
  gradhoek0 += 1; 
  box0.display(); 
  pop(); 
 
  push(); 
  translate(x, y, x); 
  rotateZ(-PI/4); 
  rotateZ(radians(gradhoek1)); 
  gradhoek1 += 1; 
  box1.display(); 
  pop(); 
 
  push(); 
  translate(x, y, z); 
  rotateZ(3*PI/4); 
  rotateZ(radians(gradhoek2)); 
  gradhoek2 += 1; 
  box2.display(); 
  pop(); 
 
  push(); 
  translate(x, y, z); 
  rotateZ(3*PI/4); 
  rotateZ(radians(-gradhoek3)); 
  gradhoek3 += 1; 
  box3.display(); 
  pop(); 
 
  push(); 
  translate(x-n, y, z); 
  rotateZ(-PI/4); 
  rotateZ(radians(-gradhoek4)); 
  gradhoek4 += 1; 
  box4.display(); 
  pop(); 
 
  push(); 
  translate(x+n, y, z); 
  rotateZ(-PI/4); 
  rotateZ(radians(gradhoek5)); 
  gradhoek5 += 1; 
  box5.display(); 
  pop(); 
 
  rotateX(3*PI/4); 
 
  push(); 
  translate(x-n, y, z); 
  rotateZ(3*PI/4); 
  rotateZ(radians(gradhoek6)); 
  gradhoek6 += 1; 
  box6.display(); 
  pop(); 
 
  push(); 
  translate(x+n, y, z); 
  rotateZ(3*PI/4); 
  rotateZ(radians(-gradhoek7)); 
  gradhoek7 += 1; 
  box7.display(); 
  pop(); 
} 
 
function keyPressed() { 
  if (key == 's') { 
     noLoop(); 
  } 
 
  if (key == 'r') { 
     loop(); 
  } 
} 
 
function windowResized() { 
   resizeCanvas(windowWidth, windowHeight); 
 }

 

de class "Box"

 
 

class Box { 
 constructor(b, h, d, c1, c2, c3, c4, c5, c6) { 
   this.b = b; this.h = h; this.d = d; 
   this.x = x; this.y = y; this.z = z; 
   this.c1 = c1; this.c2 = c2; this.c3 = c3; this.c4 = c4; this.c5 = c5; this.c6 = c6; 
 } 
 
 display() { 
   fill(this.c1); 
   beginShape(); //voorvlak 
   vertex(0,0,0);vertex(0,-this.h,0);vertex(this.b,-this.h, 0);vertex(this.b,0,0); 
   endShape(CLOSE); 
 
   fill(this.c2); 
   beginShape();  //achtervlak 
   vertex(0,0,-this.d);vertex(0,-this.h,-this.d);vertex(this.b,-this.h,-this.d);vertex(this.b,0,-this.d); 
   endShape(CLOSE); 
 
   fill(this.c3); 
   beginShape();  // re vlak 
   vertex(this.b,0,0);vertex(this.b,-this.h,0);vertex(this.b,-this.h,-this.d);vertex(this.b,0,-this.d); 
   endShape(CLOSE); 
 
   fill(this.c4); 
   beginShape();   // li vlak 
   vertex(0,0,0);vertex(0,-this.h,0);vertex(0,-this.h,-this.d);vertex(0,0,-this.d); 
   endShape(CLOSE); 
 
   fill(this.c5); 
   beginShape(); // bovenvlak 
   vertex(0,-this.h,0);vertex(0,-this.h,-this.d);vertex(this.b,-this.h,-this.d);vertex(this.b,-this.h,0); 
   endShape(CLOSE); 
 
   fill(this.c6); 
   beginShape();  // ondervlak 
   vertex(0,0,0);vertex(0,0,-this.d);vertex(this.b,0,-this.d);vertex(this.b,0,0); 
   endShape(CLOSE); 
 } 
}