roterende gouden driehoeken rond een vijfhoek.                  terug naar de inleiding
Toets "s" stopt de rotaties. met de overige toetsen starten de rotaties weer

                                                    10 roterende gouden driehoeken rond een vijfhoek in fullscreen

De schets maakt gebruik van objecten van de classes     "Drieh_nh"   ,  "Vhoek_n5"  en objectmethodes van de superclass  ¬®Vormen¬®.

toetsfuncties  voor de processing pde schets
toetsen 2 t/m 5 veranderen de draaipunten
toets 1 herstellen van de oorspronkelijke instellingen

toets "s" stoppen van de rotaties met de overige toetsen de rotaties weer starten

onder deze schets staat de schets in p5.js
 
 

Vormen vorm0;    
Vormen vorm1_1; Vormen vorm1_2;   Vormen vorm2_1; Vormen vorm2_2;  
Vormen vorm3_1; Vormen vorm3_2;   Vormen vorm4_1; Vormen vorm4_2; 
Vormen vorm5_1; Vormen vorm5_2; 
int dp = 3;
 
void setup() {     
  size(780, 560);   
 // fullScreen(); 
  float x = width/2;     float y = height/2;     float n = height/4;   
  float rl = sqrt(50+10*sqrt(5))*n/10;  //rl is de straal van de binnencirkel van de vijfhoek  
  float rk = sqrt(25+10*sqrt(5))*n/10; //rk is de straal van de buitencirkel van de vijfhoek  
  float nphi= ((1+sqrt(5))/2)*n; //nphi is de lijn van hoek naar hoek van de vijfhoek  
  float phi= (1+sqrt(5))/2;      //phi wordt gebruikt in bl   
  float bl = rl/(2*phi);         //bl is de lijn van het middelpunt naar de nphi li  
   
  float h2 = sqrt(n*n-nphi*nphi/4); 
  vorm0 = new Vhoek_n5(n, 0, x, y, 0, color(255, 255, 0, 100)); 
  vorm1_1 = new Drieh_nh(nphi, h2, dp, x-n/2,    y+rk, -144, color(200, 0, 50, 100)); 
  vorm1_2 = new Drieh_nh(nphi, h2, dp, x-n/2,    y+rk, -144, color(200, 0, 50, 100)); 
  vorm2_1 = new Drieh_nh(nphi, h2, dp, x-nphi/2, y-bl, -72,  color(20, 200, 50, 100));  
  vorm2_2 = new Drieh_nh(nphi, h2, dp, x-nphi/2, y-bl, -72,  color(20, 200, 50, 100));  
  vorm3_1 = new Drieh_nh(nphi, h2, dp, x,        y-rl,   0,  color(20, 20, 200, 100));  
  vorm3_2 = new Drieh_nh(nphi, h2, dp, x,        y-rl,   0,  color(20, 20, 200, 100));  
  vorm4_1 = new Drieh_nh(nphi, h2, dp, x+nphi/2, y-bl, 72,   color(20, 200, 50, 100)); 
  vorm4_2 = new Drieh_nh(nphi, h2, dp, x+nphi/2, y-bl, 72,   color(20, 200, 50, 100));  
  vorm5_1 = new Drieh_nh(nphi, h2, dp, x+n/2,    y+rk, 144,  color(200, 0, 50, 100));  
  vorm5_2 = new Drieh_nh(nphi, h2, dp, x+n/2,    y+rk, 144,  color(200, 0, 50, 100));   
}     
void draw() {     
  background(#E6FBFF);    
  vorm0.display();     
  vorm1_1.display(); vorm1_2.display();  vorm2_1.display(); vorm2_2.display();   
  vorm3_1.display(); vorm3_2.display();  vorm4_1.display(); vorm4_2.display();   
  vorm5_1.display(); vorm5_2.display();  
  
  if (key == 's' || key == 'S') {        
         
  }             
   else     
 {     
  vorm1_1.dpRotLi(vorm1_1);  vorm1_2.dpRotRe(vorm1_2);  
  vorm2_1.dpRotRe(vorm2_1);  vorm2_2.dpRotLi(vorm2_2); 
  vorm3_1.dpRotRe(vorm3_1);  vorm3_2.dpRotLi(vorm3_2); 
  vorm4_1.dpRotLi(vorm4_1);  vorm4_2.dpRotRe(vorm4_2); 
  vorm5_1.dpRotRe(vorm5_1);  vorm5_2.dpRotLi(vorm5_2); 
  }    
}  
 
void keyPressed() {       
   if (key == '1') { dp = 3; setup(); } 
   if (key == '2') { dp = 0; setup(); }  
   if (key == '3') { dp = 2; setup(); }  
   if (key == '4') { dp = 5; setup(); }  
   if (key == '5') { dp = 6; setup(); }  
}

 

de schets 10 roterende gouden driehoeken rond een vijfhoek in p5.js

In regels 79 t/m 88 worden de draaipunten verandert door de object variabele "dc"' van de driehoeken te veranderen.

Nu wordt setup(); niet aangeroepen en wordt de vijfhoek niet ingeschakeld door op een dp toets te klikken

de schets maakt gebruik van de p5.js classes "Vhoek_n5" , "Drieh_nh" en de superclass "Vormen"

 
let vorm = []; let vorm0; let dp = 3;
function setup() {
  createCanvas(windowWidth, windowHeight);
  let x = width/2; let y = height/2; let n = height/5;
  let rl = sqrt(50+10*sqrt(5))*n/10; //rl is de straal van de binnencirkel van de vijfhoek
  let rk = sqrt(25+10*sqrt(5))*n/10; //rk is de straal van de buitencirkel van de vijfhoek
  let nphi = ((1+sqrt(5))/2)*n; //nphi is de lijn van hoek naar hoek van de vijfhoek
  let phi = (1+sqrt(5))/2;      //phi wordt gebruikt in bl
  let bl = rl/(2*phi);          //bl is de lijn van het middelpunt naar de nphi li
  let h2 = sqrt(n*n-nphi*nphi/4);
  let alfa = 75; let sw = n/180; let kleur = 0;
  button0 = createButton('dp 0');
  button0.position(20,40);button0.style('width','70px');
  button0.mouseClicked(button0Action);
  button1 = createButton('dp 1');
  button1.position(20,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(20,160);button3.style('width','70px');
  button3.mouseClicked(button3Action);
  button4 = createButton('dp 4');
  button4.position(20,200);button4.style('width','70px');
  button4.mouseClicked(button4Action);
  button5 = createButton('dp 5');
  button5.position(20,240);button5.style('width','70px');
  button5.mouseClicked(button5Action);
  button6 = createButton('dp 6');
  button6.position(20,280);button6.style('width','70px');
  button6.mouseClicked(button6Action);
  buttonA = createButton('vijfhoek aan');
  buttonA.position(20,320);buttonA.style('width','140px');
  buttonA.mouseClicked(buttonAAction);
  buttonU = createButton('vijfhoek uit');
  buttonU.position(20,360);buttonU.style('width','140px');
  buttonU.mouseClicked(buttonUAction);
  buttonD = createButton('downloaden (d)');
  buttonD.position(20,400);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
  vorm0 = new Vhoek_n5(n, 0, x, y, 0, color(255, 255, 0, alfa),sw,color(kleur));
  vorm[0] = new Drieh_nh(nphi,h2,dp,x-n/2,   y+rk,-144,color(200,0,50,alfa), sw,color(kleur));
  vorm[1] = new Drieh_nh(nphi,h2,dp,x-n/2,   y+rk,-144,color(200,0,50,alfa), sw,color(kleur));
  vorm[2] = new Drieh_nh(nphi,h2,dp,x-nphi/2,y-bl,-72, color(20,200,50,alfa),sw,color(kleur));
  vorm[3] = new Drieh_nh(nphi,h2,dp,x-nphi/2,y-bl,-72, color(20,200,50,alfa),sw,color(kleur));
  vorm[4] = new Drieh_nh(nphi,h2,dp,x,       y-rl,  0, color(20,20,200,alfa),sw,color(kleur));
  vorm[5] = new Drieh_nh(nphi,h2,dp,x,       y-rl,  0, color(20,20,200,alfa),sw,color(kleur));
  vorm[6] = new Drieh_nh(nphi,h2,dp,x+nphi/2,y-bl,72,  color(20,200,50,alfa),sw,color(kleur));
  vorm[7] = new Drieh_nh(nphi,h2,dp,x+nphi/2,y-bl,72,  color(20,200,50,alfa),sw,color(kleur));
  vorm[8] = new Drieh_nh(nphi,h2,dp,x+n/2,   y+rk,144, color(200,0,50,alfa), sw,color(kleur));
  vorm[9] = new Drieh_nh(nphi,h2,dp,x+n/2,   y+rk,144, color(200,0,50,alfa), sw,color(kleur));
}
 
function draw() {
  //background("#E6FBFF");
  clear();
  background('rgba(255,255,255, 0)');
  vorm0.display();
 
  for (let i = 0; i < 10; i++) {vorm[i].display();}
  if (key == 's' || key == 'S') {
  }
   else
 {
  vorm[0].dpRotLi(vorm[0]);  vorm[1].dpRotRe(vorm[1]);
  vorm[2].dpRotRe(vorm[2]);  vorm[3].dpRotLi(vorm[3]);
  vorm[4].dpRotRe(vorm[4]);  vorm[5].dpRotLi(vorm[5]);
  vorm[6].dpRotLi(vorm[6]);  vorm[7].dpRotRe(vorm[7]);
  vorm[8].dpRotRe(vorm[8]);  vorm[9].dpRotLi(vorm[9]);
  }
}
 
function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function button0Action() {for(let i = 0;i< 10; i++){vorm[i].d = 0;}}
function button1Action() {for(let i = 0;i< 10; i++){vorm[i].d = 1;}}
function button2Action() {for(let i = 0;i< 10; i++){vorm[i].d = 2;}}
function button3Action() {for(let i = 0;i< 10; i++){vorm[i].d = 3;}}
function button4Action() {for(let i = 0;i< 10; i++){vorm[i].d = 4;}}
function button5Action() {for(let i = 0;i< 10; i++){vorm[i].d = 5;}}
function button6Action() {for(let i = 0;i< 10; i++){vorm[i].d = 6;}}
function buttonAAction() {vorm0.dc = 0; }
function buttonUAction() {vorm0.dc = 11; }
function buttonDAction() {save('driehoeken_rond_vijfhoek.png');}