achth drieh 05

 

 

 

Schets met achthoek en acht driehoeken.                                  terug naar de inleiding
Toets "s" rotaties stoppen met de overige toetsen starten de rotaties weer.

                                                                        achthoek en acht driehoeken in fullscreen

hn = (n+a)/2  is de straal van de binnencirkel van de achthoek en hoogte van de gelijkzijdige driehoek

De schuine zijde van de driehoek dan is de straal van de binnencirkel van de achthoek

toetsfuncties van de processing pde schets
toetsen 1 t/m 6 veranderen de draaipunten
toets 0  de achthoek wordt in- en uitgeschakeld

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

De schets maakt gebruik van de classes Vhoek_n8,    Drieh_nh,    en  de superclass  Vormen

onder de processing schets staat de schets in p5.js

 

Vormen vorm[]; 
int dp = 0;
int een = 1;
void setup() {  
 // fullScreen();  
  size(880, 660);
  float x = width/2;  
  float y = height/2;  
  float n = height/4;  
  float a = sqrt(2*n*n); 
  float hn = (n+a)/2; //de hoogte van de driehoek 
  vorm     = new Vormen[9]; 
  vorm[0] = new Vhoek_n8(n*een, 0, x, y, 0, color(255, 255, 0, 100)); 
  vorm[1]  = new Drieh_nh(n, hn, 1+dp, x-(a/2+n/2), y-n/2, 90, color(255, 0, 0, 100));  
  vorm[2]  = new Drieh_nh(n, hn, 5-dp, x-(a/2+n/2), y-n/2, 135, color(200, 0, 100, 100));  
  vorm[3]  = new Drieh_nh(n, hn, 1+dp, x+n/2+a/2, y-n/2, -135, color(200, 200, 50, 100));  
  vorm[4]  = new Drieh_nh(n, hn, 5-dp, x+n/2+a/2, y-n/2, -90, color(200, 200, 50, 100));  
  vorm[5]  = new Drieh_nh(n, hn, 1+dp, x+a/2+n/2, y+n/2, -90, color(255, 0, 0, 100));  
  vorm[6]  = new Drieh_nh(n, hn, 5-dp, x+(a/2+n/2), y+n/2, -45, color(200, 0, 100, 100));  
  vorm[7]  = new Drieh_nh(n, hn, 5-dp, x-(a/2+n/2), y+n/2, 90, color(200, 200, 50, 100));  
  vorm[8]  = new Drieh_nh(n, hn, 1+dp, x-(a/2+n/2), y+n/2, 45, color(200, 200, 50, 100));  
 
}  
Vhoek_n8  
void draw() {  
  background(#E6FBFF);  
 
  for (int i = 0; i < 9; i++)  
  {  
  vorm[i].display();    
  }  
  if (key == 's') {     
      
  }       
   else  
 {  
  vorm[0].dpRotRe(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].dpRotLi(vorm[7]);  
  vorm[8].dpRotRe(vorm[8]); 
 }  
}
 
 void keyPressed() { 
  if (key == '0') {
    if (een == 0) 
    { 
      een = 1;
    } 
    else
    {
    een = 0;
  }
     setup();
  }
  if (key == '1') { dp = 0; setup(); }        
  if (key == '2') { dp = 1; setup(); }  
  if (key == '3') { dp = 2; setup(); }  
  if (key == '4') { dp = 3; setup(); }   
  if (key == '5') { dp = 4; setup(); }
  if (key == '6') { dp = 5; setup();}
} 

De schets in p5.js

De schets maakt gebruik van objecten van de p5.js classes  "Vhoek_n8" , "Drieh_nh" en de superclass  "Vormen"

 
 let 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);
  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);
  button7 = createButton('dp 7');
  button7.position(20,320);button7.style('width','70px');
  button7.mouseClicked(button7Action);
  button8 = createButton('dp 8');
  button8.position(20,360);button8.style('width','70px');
  button8.mouseClicked(button8Action);
  buttonA = createButton('achthoek aan');
  buttonA.position(20,400);buttonA.style('width','140px');
  buttonA.mouseClicked(buttonAAction);
  buttonU = createButton('achthoek uit');
  buttonU.position(20,440);buttonU.style('width','140px');
  buttonU.mouseClicked(buttonUAction);
  buttonD = createButton('downloaden (d)');
  buttonD.position(20,480);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
  let x = width/2; let y = height/2; let n = height/4;
  let a = sqrt(2*n*n);
  let hn = (n+a)/2; //de hoogte van de driehoek
  let alfa = 100; let sw = n/220; let kleur = 0;
  vorm[0]=new Vhoek_n8(n,0, x,y, 0, color(255, 255, 0, alfa),sw,color(kleur));
  vorm[1]=new Drieh_nh(n,hn,1,x-(a/2+n/2), y-n/2,90,color(255,0,0,    alfa),sw,color(kleur));
  vorm[2]=new Drieh_nh(n,hn,5,x-(a/2+n/2), y-n/2,135,color(200,0,100, alfa),sw,color(kleur));
  vorm[3]=new Drieh_nh(n,hn,1,x+n/2+a/2, y-n/2, -135,color(200,200,50,alfa),sw,color(kleur));
  vorm[4]=new Drieh_nh(n,hn,5,x+n/2+a/2, y-n/2, -90, color(200,200,50,alfa),sw,color(kleur));
  vorm[5]=new Drieh_nh(n,hn,1,x+a/2+n/2, y+n/2, -90, color(255,0, 0,  alfa),sw,color(kleur));
  vorm[6]=new Drieh_nh(n,hn,5,x+(a/2+n/2), y+n/2,-45,color(200,0,100, alfa),sw,color(kleur));
  vorm[7]=new Drieh_nh(n,hn,1,x-(a/2+n/2), y+n/2, 45,color(200,200,50,alfa),sw,color(kleur));
  vorm[8]=new Drieh_nh(n,hn,5,x-(a/2+n/2), y+n/2, 90,color(200,200,50,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].dpRotRe(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[8].dpRotLi(vorm[8]);
  vorm[7].dpRotRe(vorm[7]);
 }
}
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function button0Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 1;vorm[i+(i-1)].d = 5;}}
 function button1Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 2;vorm[i+(i-1)].d = 4;}}
 function button2Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 6;vorm[i+(i-1)].d = 6;}}
 function button3Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 3;vorm[i+(i-1)].d = 3;}}
 function button4Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 0;vorm[i+(i-1)].d = 0;}}
 function button5Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 0;vorm[i+(i-1)].d = 6;}}
 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 = 5;vorm[i+(i-1)].d = 5;}}
 function button8Action()
 {for (let i = 1; i < 5;i++){vorm[i+i].d = 3;vorm[i+(i-1)].d = 6;}}
 
 function buttonAAction(){vorm[0].d = 0; }
 function buttonUAction(){vorm[0].d = 11; }
 function buttonDAction(){save('acht_driehoeken_rond_achthoek.png');}