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