animatie 2 met acht boxen "Box_nh" (box met vierkant als top) . terug naar de inleiding
toets "s" stopt de rotaties iedere andere toets start de rotaties weer
zie animatie 1 met acht boxen "Box_nh "
De schets in p5.js maakt gebruik van objecten van de p5.js class "Box_nh" en van de superclass "Vormen"
let vorm = []; let x; let n; let hoek = 0; let sliderCreeren = true;
function setup() {
buttonR1 = createButton('reset h0');
buttonR1.position(20,40);buttonR1.style('width','70px');
buttonR1.mouseClicked(buttonR1Action);
buttonR2 = createButton('reset h1');
buttonR2.position(100,40);buttonR2.style('width','70px');
buttonR2.mouseClicked(buttonR2Action);
buttonR3 = createButton('reset h2');
buttonR3.position(180,40);buttonR3.style('width','70px');
buttonR3.mouseClicked(buttonR3Action);
buttondp0 = createButton('dp 0');
buttondp0.position(20,80);buttondp0.style('width','70px');
buttondp0.mouseClicked(buttondp0Action);
button0 = createButton('(x,y) 0');
button0.position(100,80);button0.style('width','70px');
button0.mouseClicked(button0Action);
buttondp1 = createButton('dp 1');
buttondp1.position(20,120);buttondp1.style('width','70px');
buttondp1.mouseClicked(buttondp1Action);
button1 = createButton('(x,y) 1');
button1.position(100,120);button1.style('width','70px');
button1.mouseClicked(button1Action);
buttondp2 = createButton('dp 2');
buttondp2.position(20,160);buttondp2.style('width','70px');
buttondp2.mouseClicked(buttondp2Action);
button2 = createButton('(x,y) 2');
button2.position(100,160);button2.style('width','70px');
button2.mouseClicked(button2Action);
buttondp3 = createButton('dp 3');
buttondp3.position(20,200);buttondp3.style('width','70px');
buttondp3.mouseClicked(buttondp3Action);
buttondp4 = createButton('dp 4');
buttondp4.position(20,240);buttondp4.style('width','70px');
buttondp4.mouseClicked(buttondp4Action);
button3 = createButton('(x,y) 3');
button3.position(100,200);button3.style('width','70px');
button3.mouseClicked(button3Action);
buttondp5 = createButton('dp 5');
buttondp5.position(20,280);buttondp5.style('width','70px');
buttondp5.mouseClicked(buttondp5Action);
buttondp6 = createButton('dp 6');
buttondp6.position(20,320);buttondp6.style('width','70px');
buttondp6.mouseClicked(buttondp6Action);
buttondp7 = createButton('dp 7');
buttondp7.position(20,360);buttondp7.style('width','70px');
buttondp7.mouseClicked(buttondp7Action);
buttondp8 = createButton('dp 8');
buttondp8.position(20,400);buttondp8.style('width','70px');
buttondp8.mouseClicked(buttondp8Action);
if (sliderCreeren) {
sliderBox0tm3 = createSlider(0, 200, 50, 1);
sliderBox0tm3.position(20, 440); sliderBox0tm3.style('width', '100px');
sliderBox4tm7 = createSlider(0, 200, 50, 1);
sliderBox4tm7.position(20, 460); sliderBox4tm7.style('width', '100px');
}
sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
buttonD = createButton('downloaden');
buttonD.position(20,490);buttonD.style('width','120px');
buttonD.mouseClicked(buttonDAction);
createCanvas(windowWidth, windowHeight);
x = width/2; let y = height/2; n = height/10;
let h = sqrt(2*n*n);
let cb1 = color(255, 0, 0, 50);
let cb2 = color(0, 255, 0, 100);
let cb3 = color(0, 0, 255, 100);
let sw = n/100; let sc = color(0);
vorm[0] = new Box_nh(n*2, h, 6, x, y, 0+hoek, cb1, cb2, cb3, sw, sc);
vorm[1] = new Box_nh(n*2, h, 6, x, y, 0+hoek, cb1, cb2, cb3, sw, sc);
vorm[2] = new Box_nh(n*2, h, 6, x+n, y, 0+hoek, cb1, cb2, cb3, sw, sc);
vorm[3] = new Box_nh(n*2, h, 6, x-n, y, 0+hoek, cb1, cb2, cb3, sw, sc);
vorm[4] = new Box_nh(n*2, h, 6, x, y,180+hoek, cb1, cb2, cb3, sw, sc);
vorm[5] = new Box_nh(n*2, h, 6, x, y,180+hoek, cb1, cb2, cb3, sw, sc);
vorm[6] = new Box_nh(n*2, h, 6, x-n,y,180+hoek, cb1, cb2, cb3, sw, sc);
vorm[7] = new Box_nh(n*2, h, 6, x+n,y,180+hoek, cb1, cb2, cb3, sw, sc);
}
function draw() {
// background('#E6FBFF');
clear();
background('rgba(255,255,255, 0)');
alfaBoxen03(); alfaBoxen47();
for (let i = 0; i < 8; i++)
{
vorm[i].display();
}
if (key == 's' || key == 'S') { }
else
{
vorm[0].dpRotRe(vorm[0]); vorm[1].dpRotLi(vorm[1]);
vorm[2].dpRotRe(vorm[4]); vorm[3].dpRotLi(vorm[5]);
vorm[4].dpRotLi(vorm[3]); vorm[5].dpRotRe(vorm[2]);
vorm[6].dpRotRe(vorm[6]); vorm[7].dpRotLi(vorm[7]);
}
}
function buttonR1Action(){hoek = 0;setup();}
function buttonR2Action(){hoek =45;setup();}
function buttonR3Action(){hoek =90;setup();}
function buttondp0Action()
{for (let i = 0; i < 8; i++){vorm[i].d = 6}}
function buttondp1Action(){vorm[0].d = 1;}
function buttondp2Action(){vorm[1].d = 2;}
function buttondp3Action(){vorm[2].d = 3;}
function buttondp4Action(){vorm[3].d = 4;}
function buttondp5Action(){vorm[4].d = 5;}
function buttondp6Action(){vorm[5].d = 3;}
function buttondp7Action(){vorm[6].d = 7;}
function buttondp8Action(){vorm[7].d = 0;}
function button0Action()
{vorm[0].x = x;vorm[1].x = x ;vorm[2].x = x+n;vorm[3].x = x-n;
vorm[4].x = x;vorm[5].x = x;vorm[6].x = x-n;vorm [7].x = x+n;}
function button1Action()
{vorm[0].x = x; vorm[1].x = x;vorm[2].x = x+2*n;vorm[3].x = x-2*n;
vorm[4].x = x; vorm[5].x = x;vorm[6].x = x-2*n;vorm [7].x = x+2*n;}
function button2Action()
{vorm[0].x = x+n;vorm[1].x = x-n;vorm[2].x = x+2*n;vorm[3].x = x-2*n;
vorm[4].x = x-n;vorm[5].x = x+n;vorm[6].x = x-2*n;vorm [7].x = x+2*n;}
function button3Action()
{vorm[0].x = x+n;vorm[1].x = x-n;vorm[2].x = x+3*n;vorm[3].x = x-3*n;
vorm[4].x = x-n;vorm[5].x = x+n;vorm[6].x = x-3*n;vorm [7].x = x+3*n;}
function alfaBoxen03() {let sliderAlfa = sliderBox0tm3.value();
for (let i = 0; i< 4; i++)
{vorm[i].c1 = color(255, 0, 0,sliderAlfa);
vorm[i].c2 = color(0, 255, 0,sliderAlfa+50);
vorm[i].c3 = color(0, 0, 255, sliderAlfa+50);}}
function alfaBoxen47() {let sliderAlfa = sliderBox4tm7.value();
for (let i = 4; i< 8; i++)
{vorm[i].c1 = color(255, 0, 0,sliderAlfa);
vorm[i].c2 = color(0, 255, 0,sliderAlfa+50);
vorm[i].c3 = color(0, 0, 255, sliderAlfa+50);}}
function buttonDAction(){save('acht_boxen.png');}