schets met zelf gemaakte box

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 in full screen

toetsfuncties

"s" toets stoppen van de rotaties

"r" toets starten van de rotaties

"d" of "D" downloaden van een deels transparante png afbeelding van de animaties

 

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 = 150; 
//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 == 'd' || key == 'D'){
   save('boxen.png');
 }
 
  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); 
 } 
}

Flevopink