de pijlen roteren in draaipunt 0de pijlen roteren in draaipunt 0

 

de pijlen roteren in draaipunt 1de pijlen roteren in draaipunt 1

 

de pijlen roteren in draaipunt 2de pijlen roteren in draaipunt 2

 

de vliegers roteren in draaipunt 3de vliegers roteren in draaipunt 3

 

de pijlen roteren in draaipunt 4

de pijlen roteren in draaipunt 4

 

de pijlen roteren in draaipunt 5

 de pijlen roteren in draaipunt 5

 

  

 

 

tien pijlen vormen een vijfhoek.         terug naar de inleiding
Toets "s" stopt de rotaties. met de overige toetsen starten de rotaties weer

                                                                   de animatie in fullscreen     tien pijlen vormen een vijfhoek

De vliegers zijn hier pijlen want het derde argument in de constructor is negatief  

de schets in processing pde. Onder deze schets staat de schets ik p5.js

De schets maakt gebruik objecten van de van class   "Vlieger" ,   en de superclass  "Vormen"

Enkele toetsfuncties

Met de toetsen "1" t/m "9" verander je de draaipunten "0" t/m "8" van de vliegers.
Met toets "1" wordt de oorspronkelijke instelling hersteld.
Met de "s" toets stopt, en met iedere andere toets start de animatie.
Met de "d" toets downloaden van een ,deels transparante png, afbeelding 
 
 

 Vormen [] vorm;
int dpVl = 1;
void setup() { 
//fullScreen(); 
size(960,540);
  float x = width/2; 
  float y = height/2; 
  float n = height/5;
  float rl = sqrt(50+10*sqrt(5))*n/10;
  float rk = sqrt(25+10*sqrt(5))*n/10;
  float h  = (rl+rk);
  float nphi = ((1+sqrt(5))/2)*n;
  float phi  = ((1+sqrt(5))/2); 
  float k    = rl/2*(3-phi); 
  float bl   = rl/(2*phi);
  vorm    = new Vormen[10]; 
  vorm[0] = new Vlieger(nphi, h+k, -k, dpVl, x,        y-rl,   0, color(237,230,86,50)); 
  vorm[1] = new Vlieger(nphi, h+k, -k, dpVl, x,        y-rl,   0, color(237,230,86,50));   
  vorm[2] = new Vlieger(nphi, h+k, -k, dpVl, x+nphi/2, y-bl,  72, color(63,186,229,50)); 
  vorm[3] = new Vlieger(nphi, h+k, -k, dpVl, x+nphi/2, y-bl,  72, color(63,186,229,50));  
  vorm[4] = new Vlieger(nphi, h+k, -k, dpVl, x+n/2,    y+rk, 144, color(76,229,63,50)); 
  vorm[5] = new Vlieger(nphi, h+k, -k, dpVl, x+n/2,    y+rk, 144, color(76,229,63,50));  
  vorm[6] = new Vlieger(nphi, h+k, -k, dpVl, x-n/2,    y+rk,-144, color(76,229,63,50)); 
  vorm[7] = new Vlieger(nphi, h+k, -k, dpVl, x-n/2,    y+rk,-144, color(76,229,63,50));   
  vorm[8] = new Vlieger(nphi, h+k, -k, dpVl, x-nphi/2, y-bl, -72, color(63,186,229,50)); 
  vorm[9] = new Vlieger(nphi, h+k, -k, dpVl, x-nphi/2, y-bl, -72, color(63,186,229,50)); 
} 
 
void draw() { 
  background(#E6FBFF);
// background(0);
  for (int i = 0; i < 10; i++) 
  { 
    vorm[i].display(); 
  } 
  
  if (key == 's') {        
         
  }             
   else     
 {     
  vorm[0].dpRotRe(vorm[0]);
  vorm[1].dpRotLi(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]);   
  vorm[9].dpRotRe(vorm[9]); 
  } 
}
 
void keyPressed() { 
  if (key == '1') { dpVl = 0; setup(); }      
  if (key == '2') { dpVl = 1; setup(); }
  if (key == '3') { dpVl = 2; setup(); }
  if (key == '4') { dpVl = 3; setup(); }
  if (key == '5') { dpVl = 4; setup(); }
  if (key == '6') { dpVl = 5; setup(); }
  if (key == '7') { dpVl = 6; setup(); } 
  if (key == '8') { dpVl = 7; setup(); }
  if (key == '9') { dpVl = 8; setup(); }
}

Tien pijlen die een vijfhoek vormen in p5.js.
Toets "s" stopt de rotaties. met de overige toetsen starten de rotaties weer

                                                                        ga naar de animatie in fullscreen

De schets maakt gebruik van de p5.js classes "Vlieger" en de superclass "Vormen"

Met lijndikte en lijnkleur als extra constructor argumenten 

dankzij coderegels 56 en 57 is de afbeelding deels transparant

  
//p5.js schets met 10 vliegers die een vijfhoek voren
let vlieger = []; let dpVl = 5;
function setup() {
createCanvas(windowWidth, windowHeight);
  const x = width/2; const y = height/2; const n = height/7.5;
  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);
  buttonD = createButton('downloaden (d)');
  buttonD.position(20,320);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
  const rl = sqrt(50+10*sqrt(5))*n/10;
  const rk = sqrt(25+10*sqrt(5))*n/10;
  const h  = (rl+rk);
  const nphi = ((1+sqrt(5))/2)*n;
  const phi  = ((1+sqrt(5))/2);
  const k    = rl/2*(3-phi);
  const bl   = rl/(2*phi);
  let sw = height/20; let alfa = 100;
  let kleur1 = 'hsla(102, 98%, 50%, 0.5)'; let kleur2 = 'hsla(360, 98%, 50%, 0.5)';
  let kleur3 = 'hsla(132, 98%, 50%, 0.5)'; let kleur4 = 'hsla(187, 98%, 50%, 0.5)';
  let kleur5 = 'hsla(60, 100%, 55%, 0.5)'; let kleur6 = 'hsla(0, 100%, 60%, 0.5)';
  vlieger[0] = new Vlieger(nphi,h+k,-k,dpVl,x,       y-rl,   0,color(237,0,86,alfa),sw,color(kleur1));
  vlieger[1] = new Vlieger(nphi,h+k,-k,dpVl,x,       y-rl,   0,color(237,0,86,alfa),sw,color(kleur2));
  vlieger[2] = new Vlieger(nphi,h+k,-k,dpVl,x+nphi/2,y-bl,  72,color(0,186,229,alfa),sw,color(kleur3));
  vlieger[3] = new Vlieger(nphi,h+k,-k,dpVl,x+nphi/2,y-bl,  72,color(0,186,229,alfa),sw,color(kleur4));
  vlieger[4] = new Vlieger(nphi,h+k,-k,dpVl,x+n/2,   y+rk, 144,color(76,10,200,alfa),sw,color(kleur5));
  vlieger[5] = new Vlieger(nphi,h+k,-k,dpVl,x+n/2,   y+rk, 144,color(76,10,200,alfa),sw,color(kleur6));
  vlieger[6] = new Vlieger(nphi,h+k,-k,dpVl,x-n/2,   y+rk,-144,color(200,229,63,alfa),sw,color(kleur5));
  vlieger[7] = new Vlieger(nphi,h+k,-k,dpVl,x-n/2,   y+rk,-144,color(200, 229,63,alfa),sw,color(kleur4));
  vlieger[8] = new Vlieger(nphi,h+k,-k,dpVl,x-nphi/2,y-bl, -72,color(63,186,0,alfa),sw,color(kleur3));
  vlieger[9] = new Vlieger(nphi,h+k,-k,dpVl,x-nphi/2,y-bl, -72,color(63,186,0,alfa),sw,color(kleur6));
}
 
function draw() {
  //  background(230,251,255);
    clear();
    background('rgba(255,255,255, 0)');
    for (let i = 0; i < 10; i++)
    vlieger[i].display();
    if (key == 's' || key == 'S') {
      }
       else
     {
 
    vlieger[0].dpRotRe(vlieger[0]); vlieger[1].dpRotLi(vlieger[1]);
    vlieger[2].dpRotLi(vlieger[2]); vlieger[3].dpRotRe(vlieger[3]);
    vlieger[4].dpRotLi(vlieger[4]); vlieger[5].dpRotRe(vlieger[5]);
    vlieger[6].dpRotLi(vlieger[6]); vlieger[7].dpRotRe(vlieger[7]);
    vlieger[8].dpRotLi(vlieger[8]); vlieger[9].dpRotRe(vlieger[9]);
   }
}
 
function windowResize() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function button0Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 0;}}
function button1Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 1;}}
function button2Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 2;}}
function button3Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 3;}}
function button4Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 4;}}
function button5Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 5;}}
function button6Action() {for(let i = 0;i< 10; i++){vlieger[i].d = 6;}}
function buttonDAction() {save('vliegers_vormen_vijfhoek.png');}