Schets met acht  parallellogrammen  rond zeshoek                 terug naar de inleiding
Met toets "s" stoppen de rotaties met iedere andere toets starten de rotaties weer

                                                                            acht parallellogrammen rond de zeshoek in fullscreen

De schets maakt gebruik van de classes  "Vhoek_n2a4" ,   "Paral"  en  de superclass  Vormen

onder deze schets staat de schets in p5.js

 

Vhoe//animatie met 8 parallellogrammen met hoogten = n en  lengte = 2n 
Vormen[] vorm = new Vormen[9];   
void setup() {     
 size(780, 560); 
 float x = width/2;     
 float y = height/2;     
 float n = height/6;  
 float h = n; 
 float l = 2*n; 
 vorm[0] = new Paral(h, l, 0, 5, x-n/2, y-n, 90, color(255, 255, 0, 100));     
 vorm[1] = new Paral(h, l, 1, 3, x+n/2, y-n, -90, color(255, 255, 0, 100));     
 vorm[2] = new Paral(h, l, 1, 7, x-1.5*n, y, 0, color(0, 255, 0, 100));   
 vorm[3] = new Paral(h, l, 0, 1, x+1.5*n, y, 0, color(0, 100, 255, 100));   
 vorm[4] = new Paral(h, l, 0, 5, x-1.5*n,   y, 0, color(0, 255, 0, 100));  
 vorm[5] = new Paral(h, l, 1, 3, x+1.5*n,   y, 0, color(0, 100, 255, 100));   
 vorm[6] = new Paral(h, l, 1, 3, x-n/2, y+n, 90, color(245, 177, 67, 100));     
 vorm[7] = new Paral(h, l, 0, 1, x+n/2, y+n, 90, color(245, 177, 67, 100));   
 vorm[8] = new Vhoek_n2a4(n, 0, x, y, 0, color(100, 200, 0, 50)); 
} 
 
void draw() {     
background(#E6FBFF); 
 
 for (int i = 0; i < 9; i++)  
 { 
   vorm[i].display();     
 } 
  
  vorm[0].dpRotRe(vorm[0]); 
  vorm[1].dpRotLi(vorm[1]);  
  vorm[2].dpRotLi(vorm[2]); 
  vorm[3].dpRotRe(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]); 
} 
 
void keyPressed() {  
 if (key == 's') {     
 noLoop(); 
 }     
 if (key == 'r') { 
 loop();
 
de schets in p5.js
De schets maakt gebruik van objecten van de p5.js classes "Vhoek_n2a4" , "paral" en de superclass "Vormen"
 
 
 vorm = [];
function setup() {
 createCanvas(windowWidth, windowHeight)
 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);
 buttonA = createButton('zeshoek aan');
 buttonA.position(20,200);buttonA.style('width','120px');
 buttonA.mouseClicked(buttonAAction);
 buttonU = createButton('zeshoek uit');
 buttonU.position(20,240);buttonU.style('width','120px');
 buttonU.mouseClicked(buttonUAction);
 buttonD = createButton('downloaden');
 buttonD.position(20,280);buttonD.style('width','120px');
 buttonD.mouseClicked(buttonDAction);
 let x = width/2; let y = height/2; let n = height/8;
 let h = n; let l = 2*n;
 let alfa = 50; let sw = n/220; let kleur = 0;
 vorm[0] = new Paral(h, l, 0, 5, x-n/2, y-n,90, color(255,255,0,alfa),sw,color(kleur));
 vorm[1] = new Paral(h, l, 1, 3, x+n/2, y-n,-90, color(255,255,0,alfa),sw,color(kleur));
 vorm[2] = new Paral(h, l, 1, 7, x-1.5*n, y, 0, color(0,255,0, alfa),sw,color(kleur));
 vorm[3] = new Paral(h, l, 0, 1, x+1.5*n, y, 0, color(0,100,255,alfa),sw,color(kleur));
 vorm[4] = new Paral(h, l, 0, 5, x-1.5*n, y, 0, color(0,255,0,alfa),sw,color(kleur));
 vorm[5] = new Paral(h, l, 1, 3, x+1.5*n, y, 0, color(0,100,255,alfa),sw,color(kleur));
 vorm[6] = new Paral(h, l, 1, 3, x-n/2, y+n,90, color(245,177,67,alfa),sw,color(kleur));
 vorm[7] = new Paral(h, l, 0, 1, x+n/2, y+n,90, color(245,177,67,alfa),sw,color(kleur));
 vorm[8] = new Vhoek_n2a4(n, 0, x, y, 0, 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'|| 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].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
  vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
  vorm[8].dpRotRe(vorm[8]);
 }
}
 
function button0Action()
{vorm[0].dc = 5; vorm[1].dc = 3; vorm[2].dc = 7; vorm[3].dc = 1;
 vorm[4].dc = 5; vorm[5].dc = 3; vorm[6].dc = 3; vorm[7].dc = 1;}
function button1Action()
 {vorm[0].dc = 7; vorm[1].dc = 1; vorm[2].dc = 7; vorm[3].dc = 1;
  vorm[4].dc = 5; vorm[5].dc = 3; vorm[6].dc = 1; vorm[7].dc = 3;}
function button2Action()
  {vorm[0].dc = 5; vorm[1].dc = 3; vorm[2].dc = 5; vorm[3].dc = 3;
  vorm[4].dc = 7; vorm[5].dc = 1; vorm[6].dc = 3; vorm[7].dc = 1;}
function button3Action()
  {vorm[0].dc = 7; vorm[1].dc = 1; vorm[2].dc = 5; vorm[3].dc = 3;
  vorm[4].dc = 7; vorm[5].dc = 1; vorm[6].dc = 1; vorm[7].dc = 3;}
 
function buttonAAction(){vorm[8].dc = 0; }
function buttonUAction(){vorm[8].dc = 11; }
function buttonDAction(){save('acht_parallellogrammen_rond_zeshoek.png');}