Schets met acht zeshoeken in achthoek. terug naar de inleiding
toets "s" stoppen de rotaties met iedere ander toets starten de rotaties weer.
de acht zeshoeken in de achthoek in fullscreen
In deze schets is bij de keuze van de draaipunten rekening gehouden met het symetrisch kunnen veranderen
van de draaipunten tijdens de animatie.
schets in p5.js
De schets maakt gebruik van objecten van de p5.js classes "Vhoek_na4" , "Vhoek_n2a4" en de superclass "Vormen"
In de Button..Action functies (regel 87 t/m 110) worden, van de objecten om en om te beginnen bij vorm[1], de draaipunten verandert
Met i = 1 wordt van vorm[ i + i] = 2 , dc = 1 en van vorm[i+(i-1)] = 1 , dc = 6 van vorm zie regel 88
Met i = 2 wordt van vorm[ i + i] = 4 , dc = 2 en van vorm[i+(i-1)] = 3 , dc = 5 van vorm zie regel 90
let vorm = []; let ruitjespap;
let ruitjes = false; let achthoek = true;
function setup() {
createCanvas(windowWidth, windowHeight);
buttonR = createButton('reset');
buttonR.position(20,40);buttonR.style('width','70px');
buttonR.mouseClicked(buttonRAction);
button0 = createButton('dp 0');
button0.position(20,80);button0.style('width','70px');
button0.mouseClicked(button0Action);
button1 = createButton('dp 1');
button1.position(110,80);button1.style('width','70px');
button1.mouseClicked(button1Action);
button2 = createButton('dp 2');
button2.position(20,120);button2.style('width','70px');
button2.mouseClicked(button2Action);
button3 = createButton('dp 3');
button3.position(110,120);button3.style('width','70px');
button3.mouseClicked(button3Action);
button4 = createButton('dp 4');
button4.position(20,160);button4.style('width','70px');
button4.mouseClicked(button4Action);
button5 = createButton('dp 5');
button5.position(110,160);button5.style('width','70px');
button5.mouseClicked(button5Action);
button6 = createButton('dp 6');
button6.position(20,200);button6.style('width','70px');
button6.mouseClicked(button6Action);
button7 = createButton('dp 7');
button7.position(110,200);button7.style('width','70px');
button7.mouseClicked(button7Action);
button8 = createButton('dp 8');
button8.position(20,240);button8.style('width','70px');
button8.mouseClicked(button8Action);
button9 = createButton('dp 9');
button9.position(110,240);button9.style('width','70px');
button9.mouseClicked(button9Action);
button10 = createButton('dp 10');
button10.position(20,280);button10.style('width','70px');
button10.mouseClicked(button10Action);
button11 = createButton('dp 11');
button11.position(110,280);button11.style('width','70px');
button11.mouseClicked(button11Action);
buttonA = createButton('achthoek aan/uit');
buttonA.position(20,320);buttonA.style('width','140px');
buttonA.mouseClicked(buttonAAction);
buttonRuitjes = createButton('ruitjes aan/uit');
buttonRuitjes.position(20,360);buttonRuitjes.style('width','140px');
buttonRuitjes.mouseClicked(buttonRuitjesAction);
buttonD = createButton('downloaden');
buttonD.position(20,400);buttonD.style('width','140px');
buttonD.mouseClicked(buttonDAction);
let x = width/2; let y = height/2; let n = height/10;
let alfa = 50; let kleur = 0; let sw = n/65; let sc = color(0);
vorm[0] = new Vhoek_na4(n*2, 0, x, y, 0, color(200, 255, 0, alfa),sw,sc);
vorm[1] = new Vhoek_n2a4(n,1,x-n/2, y-1.5*n,0, color(255,255,0, alfa),sw,sc);
vorm[2] = new Vhoek_n2a4(n,6,x+n/2, y-1.5*n,0, color(255,0,0, alfa),sw,sc);
vorm[3] = new Vhoek_n2a4(n,1,x+1.5*n, y-n/2,90, color(255,255,0, alfa),sw,sc);
vorm[4] = new Vhoek_n2a4(n,6,x+1.5*n, y+n/2,90, color(255,0,0, alfa),sw,sc);
vorm[5] = new Vhoek_n2a4(n,1,x+n/2, y+1.5*n,180,color(26,237,225,alfa),sw,sc);
vorm[6] = new Vhoek_n2a4(n,6,x-n/2, y+1.5*n,180,color(100,200,50,alfa),sw,sc);
vorm[7] = new Vhoek_n2a4(n,1,x-1.5*n, y+n/2,-90,color(26,237,225,alfa),sw,sc);
vorm[8] = new Vhoek_n2a4(n,6,x-1.5*n, y-n/2,-90,color(100,200,0, alfa),sw,sc);
ruitjespap = new Ruitjes(n,x,y);
}
function draw() {
// background('#E6FBFF');
clear();
background('rgba(255,255,255, 0)');
if (achthoek){vorm[0].display();}
if (ruitjes){ruitjespap.display();
for (let i = 0; i <9; i++){vorm[i].dpAan();}}
for (let i = 1; i <9; i++) {vorm[i].display();}
if (key == 's' || key == 'S') { }
else
{
vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]);
vorm[2].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
vorm[8].dpRotLi(vorm[8]);
}
}
function buttonRAction(){setup();}
function button0Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 1;vorm[i+(i-1)].d = 6;}}
function button1Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 2;vorm[i+(i-1)].d = 5;}}
function button2Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 3;vorm[i+(i-1)].d = 4;}}
function button3Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 0;vorm[i+(i-1)].d = 0;}}
function button4Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 1;vorm[i+(i-1)].d = 1;}}
function button5Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 2;vorm[i+(i-1)].d = 2;}}
function button6Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 3;vorm[i+(i-1)].d = 3;}}
function button7Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 4;vorm[i+(i-1)].d = 4;}}
function button8Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 5;vorm[i+(i-1)].d = 5;}}
function button9Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 6;vorm[i+(i-1)].d = 6;}}
function button10Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 1;vorm[i+(i-1)].d = 4;}}
function button11Action()
{for (let i = 1; i < 5;i++){vorm[i+i].d = 7;vorm[i+(i-1)].d = 2;}}
function buttonAAction()
{if(achthoek){achthoek = false;} else {achthoek = true;}}
function buttonRuitjesAction()
{if (ruitjes){ruitjes = false;} else{ruitjes = true;}}
function buttonDAction(){save('acht-zeshoeken.png');}