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