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); 
 } 
}