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.

De schets maakt gebruik van objecten van de zeshoek class  "Vhoek_n2a4"

en object van de achthoek class   "Vhoek_na4"  en  de superclass  Vormen

toetsfuncties van de processing pde schets
toetsen 1 t/m 7 veranderen de draaipunten
toets "s" stopt de rotataties
toets  "r" start de rotaties

toetsen "d" of "D" downloaden van een deels transparante png afbeelding van de animatie

onder deze processing pde schets staat den p5.js schets

 

Vormen [] vorm; 
int dp = 0; 
void setup() { 
 
  size(780, 560); 
// fullScreen(); 
  float x = width/2; float y = height/2;  float n = height/8; 
  vorm = new Vormen[9]; 
  vorm[0] = new Vhoek_na4(n*2, 0, x, y, 0, color(200, 255, 0, 50)); 
  vorm[1] = new Vhoek_n2a4(n, 1+dp, x-n/2, y-1.5*n, 0, color(255, 255, 0, 50)); 
  vorm[2] = new Vhoek_n2a4(n, 6-dp, x+n/2, y-1.5*n,  0, color(255, 0, 0, 50));   
  vorm[3] = new Vhoek_n2a4(n, 1+dp, x+1.5*n, y-n/2, 90, color(255, 255, 0, 50)); 
  vorm[4] = new Vhoek_n2a4(n, 6-dp, x+1.5*n, y+n/2, 90, color(255, 0, 0, 50));   
  vorm[5] = new Vhoek_n2a4(n, 1+dp, x+n/2, y+1.5*n, 180, color(26,237, 225, 50)); 
  vorm[6] = new Vhoek_n2a4(n, 6-dp, x-n/2, y+1.5*n,  180, color(100, 200, 50, 50));   
  vorm[7] = new Vhoek_n2a4(n, 1+dp, x-1.5*n, y+n/2, -90, color(26,237, 225, 50)); 
  vorm[8] = new Vhoek_n2a4(n, 6-dp, x-1.5*n, y-n/2,-90, color(100, 200, 0, 50)); 
} 
 
void draw() { 
   background(#E6FBFF); 
   for (int i = 0; i < 9; i++)   
  {   
    vorm[i].display();   
  }       
    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]);  
} 
 
void keyPressed() {
  if (key == 's') { noLoop(); }     
  if (key == 'r') {  loop();  }     
  if (key == '1') { dp = 0; loop(); setup(); }  
  if (key == '2') { dp = 1; loop(); setup(); }  
  if (key == '3') { dp = 2; loop(); setup(); }  
  if (key == '4') { dp = 3; loop(); setup(); }  
  if (key == '5') { dp = 4; loop(); setup(); }  
  if (key == '6') { dp = 5; loop(); setup(); }  
  if (key == '7') { dp = 6; loop(); setup(); }  
}
 
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 dp = 0; 
function setup() { 
createCanvas(windowWidth, windowHeight); 
 let x = width/2; let y = height/2; let n = height/10; 
 button0 = createButton('dp 0'); 
 button0.position(20,40);button0.style('width','70px'); 
 button0.mouseClicked(button0Action); 
 button1 = createButton('dp 1'); 
 button1.position(110,40);button1.style('width','70px'); 
 button1.mouseClicked(button1Action); 
 button2 = createButton('dp 2'); 
 button2.position(20,80);button2.style('width','70px'); 
 button2.mouseClicked(button2Action); 
 button3 = createButton('dp 3'); 
 button3.position(110,80);button3.style('width','70px'); 
 button3.mouseClicked(button3Action); 
 button4 = createButton('dp 4'); 
 button4.position(20,120);button4.style('width','70px'); 
 button4.mouseClicked(button4Action); 
 button5 = createButton('dp 5'); 
 button5.position(110,120);button5.style('width','70px'); 
 button5.mouseClicked(button5Action); 
 button6 = createButton('dp 6'); 
 button6.position(20,160);button6.style('width','70px'); 
 button6.mouseClicked(button6Action); 
 button7 = createButton('dp 7'); 
 button7.position(110,160);button7.style('width','70px'); 
 button7.mouseClicked(button7Action); 
 button8 = createButton('dp 8'); 
 button8.position(20,200);button8.style('width','70px'); 
 button8.mouseClicked(button8Action); 
 button9 = createButton('dp 9'); 
 button9.position(110,200);button9.style('width','70px'); 
 button9.mouseClicked(button9Action); 
 button10 = createButton('dp 10'); 
 button10.position(20,240);button10.style('width','70px'); 
 button10.mouseClicked(button10Action); 
 button11 = createButton('dp 11'); 
 button11.position(110,240);button11.style('width','70px'); 
 button11.mouseClicked(button11Action); 
 buttonA = createButton('achthoek aan'); 
 buttonA.position(20,280);buttonA.style('width','140px'); 
 buttonA.mouseClicked(buttonAAction); 
 buttonU = createButton('achthoek uit'); 
 buttonU.position(20,320);buttonU.style('width','140px'); 
 buttonU.mouseClicked(buttonUAction); 
 buttonD = createButton('downloaden (d)'); 
 buttonD.position(20,360);buttonD.style('width','140px'); 
 buttonD.mouseClicked(buttonDAction); 
 let alfa = 50; let kleur = 0; let sw = n/65; 
 vorm[0] = new Vhoek_na4(n*2, 0, x, y, 0, color(200, 255, 0, alfa),sw,color(kleur)); 
 vorm[1] = new Vhoek_n2a4(n,1+dp,x-n/2, y-1.5*n,0, color(255,255,0, alfa),sw,color(kleur)); 
 vorm[2] = new Vhoek_n2a4(n,6-dp,x+n/2, y-1.5*n,0, color(255,0,0, alfa),sw,color(kleur)); 
 vorm[3] = new Vhoek_n2a4(n,1+dp,x+1.5*n, y-n/2,90, color(255,255,0, alfa),sw,color(kleur)); 
 vorm[4] = new Vhoek_n2a4(n,6-dp,x+1.5*n, y+n/2,90, color(255,0,0, alfa),sw,color(kleur)); 
 vorm[5] = new Vhoek_n2a4(n,1+dp,x+n/2, y+1.5*n,180,color(26,237,225,alfa),sw,color(kleur)); 
 vorm[6] = new Vhoek_n2a4(n,6-dp,x-n/2, y+1.5*n,180,color(100,200,50,alfa),sw,color(kleur)); 
 vorm[7] = new Vhoek_n2a4(n,1+dp,x-1.5*n, y+n/2,-90,color(26,237,225,alfa),sw,color(kleur)); 
 vorm[8] = new Vhoek_n2a4(n,6-dp,x-1.5*n, y-n/2,-90,color(100,200,0, alfa),sw,color(kleur)); 
} 

 
function draw() { 
 // background('#E6FBFF'); 
 clear(); 
 background('rgba(255,255,255, 0)'); 
 for (let i = 0; i < 9; i++) 
 { 
 vorm[i].display(); 
 } 

if (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]); 
 } 
} 
//voor dp = 0 
 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(){vorm[0].d = 0; } 
 function buttonUAction(){vorm[0].d = 11; }
function buttonDAction(){save('acht-zeshoeken.png');}
}