24 driehoeken  "Drieh_an".        terug naar de inleiding
toets "s" stopt de rotaties de overige toetsen starten de rotaties weer
dpr = draaipunt roterende driehoeken , dps = daaipunt stilstaande driehoeken  

                                                                   De driehoeken in fullscreen , in p5.js

Tip: stop de rotaties en selecteer reset met een voor ingestelde hoek. mbv de dpr en dps knoppen verschillende afbeeldingen maken

 
De animatie bestaat uit twaalf wel, en twaalf niet roterende driehoeken.
 
Het toepassen van de draaienLi() functie
1) De vomen 0 t/m 11 in setup in het (0,0) (regel 81 t/m 92 ) punt plaatsen.
2) Het canvas roteren  door deze vormen tussen push en pop mbv translate (regel 115) weer in het midden te plaatsen.
 
In regel 134 t/m 137 wordt 4 keer setup aangeroepen hierdoor wordt createSlider telkens aangemaakt (regel 64 en 69)
De sliders worden dan in verschillende standen over elkaar geprojecteerd dit verholpen mbv het if statement (regel 63)
De variabele 's' is de rotatie hoek van het canvas na iedere setup wordt deze hoek weer op 0 gezet (regel 75)
De variable 'h' is de aanpassing van de hoeken van de vormen toegepast in de button functies (regel 134 t/m 137)
 
schets met 24 driehoeken gecodeerd in p5.js
De schets maakt gebruik van objecten van de p5.js class "Drieh_an" en de superclass "Vormen"
 
 
vorm = []; let s = 0; let h = 0; let zwartwit = false;
let sliderR; let sliderS; let sliderCreeren = true;
 
function setup() {
  buttonR1 = createButton('reset 0');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonR2 = createButton('reset 45');
  buttonR2.position(100,40);buttonR2.style('width','70px');
  buttonR2.mouseClicked(buttonR2Action);
  buttonR3 = createButton('reset 90');
  buttonR3.position(20,80);buttonR3.style('width','70px');
  buttonR3.mouseClicked(buttonR3Action);
  buttonR4 = createButton('reset 135');
  buttonR4.position(100,80);buttonR4.style('width','80px');
  buttonR4.mouseClicked(buttonR4Action);
  button1r = createButton('dpr=1');
  button1r.position(20,120);button1r.style('width','70px');
  button1r.mouseClicked(button1rAction);
  button1s = createButton('dps=1');0
  button1s.position(100,120);button1s.style('width','70px');
  button1s.mouseClicked(button1sAction);
  button2r = createButton('dpr=2');
  button2r.position(20,160);button2r.style('width','70px');
  button2r.mouseClicked(button2rAction);
  button2s = createButton('dps=2');
  button2s.position(100,160);button2s.style('width','70px');
  button2s.mouseClicked(button2sAction);
  button3r = createButton('dpr=3');
  button3r.position(20,200);button3r.style('width','70px');
  button3r.mouseClicked(button3rAction);
  button3s = createButton('dps=3');
  button3s.position(100,200);button3s.style('width','70px');
  button3s.mouseClicked(button3sAction);
  button4r = createButton('dpr=4');
  button4r.position(20,240);button4r.style('width','70px');
  button4r.mouseClicked(button4rAction);
  button4s = createButton('dps=4');
  button4s.position(100,240);button4s.style('width','70px');
  button4s.mouseClicked(button4sAction);
  button5r = createButton('dpr=5');
  button5r.position(20,280);button5r.style('width','70px');
  button5r.mouseClicked(button5rAction);
  button5s = createButton('dps=5');
  button5s.position(100,280);button5s.style('width','70px');
  button5s.mouseClicked(button5sAction);
 
  button6r = createButton('dpr=6');
  button6r.position(20,320);button6r.style('width','70px');
  button6r.mouseClicked(button6rAction);
 
  button6s = createButton('dps=6');
  button6s.position(100,320);button6s.style('width','70px');
  button6s.mouseClicked(button6sAction);
  button0r = createButton('dpr=0');
  button0r.position(20,360);button0r.style('width','70px');
  button0r.mouseClicked(button0rAction);
  button0s = createButton('dps=0');
  button0s.position(100,360);button0s.style('width','70px');
  button0s.mouseClicked(button0sAction);
 
  if (sliderCreeren) {
  sliderR = createSlider(0, 200, 100, 2);
  sliderR.position(20, 390); sliderR.style('width', '80px');
  sliderS = createSlider(0, 200, 100, 2);
  sliderS.position(20, 420); sliderS.style('width', '80px');
}
  sliderCreeren = false; //want de slider mag maar een keer worden aangemaakt
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,450);buttonZW.style('width','120px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,480);buttonD.style('width','120px');
  buttonD.mouseClicked(buttonDAction);
 
createCanvas(windowWidth, windowHeight);
let x = 0; let y = 0; s = 0;
let dps = 3; //draaipunt van de stilstaande driehoeken
let dpr = 3; //draaipunt van de roterende driehoeken
let x2 = width/2; let y2 = height/2;
let n = height/6; let a = sqrt(2*n*n); let sw = height/500;
let alpha = 100; //heeft geen zin omdat de alfa van de slider instellingen wordt gebruikt
vorm[0] = new Drieh_an(n, dpr, x,    y-a, 180+h, color(255,0,0,   alpha),sw,color(0));
vorm[1] = new Drieh_an(n, dpr, x,    y-a,   0+h, color(200,0,100, alpha),sw,color(0));
vorm[2] = new Drieh_an(n, dpr, x+a,    y, -90+h, color(200,200,5, alpha),sw,color(0));
vorm[3] = new Drieh_an(n, dpr, x+a,    y,  90+h, color(200,200,50,alpha),sw,color(0));
vorm[4] = new Drieh_an(n, dpr, x,    y+a,   0+h, color(200,0,50,  alpha),sw,color(0));
vorm[5] = new Drieh_an(n, dpr, x,    y+a, 180+h, color(200,0,50,  alpha),sw,color(0));
vorm[6] = new Drieh_an(n, dpr, x-a,    y,  90+h, color(100,200,50,alpha),sw,color(0));
vorm[7] = new Drieh_an(n, dpr, x-a,    y, -90+h, color(100,200,50,alpha),sw,color(0));
vorm[8] = new Drieh_an(n, dpr,x-a/2,y-a/2, 135+h,color(100,200,100,alpha),sw,color(0));
vorm[9] = new Drieh_an(n, dpr,x+a/2,y-a/2,-135+h,color(100,200,100,alpha),sw,color(0));
vorm[10] = new Drieh_an(n,dpr,x+a/2,y+a/2, -45+h,color(100,200,50, alpha),sw,color(0));
vorm[11] = new Drieh_an(n,dpr,x-a/2,y+a/2,  45+h,color(100,200,50, alpha),sw,color(0));
 
vorm[12] = new Drieh_an(n, dps, x2,   y2-a,180+h, color(255,0,0, alpha),   sw, color(0));
vorm[13] = new Drieh_an(n, dps, x2,   y2-a,  0+h,color(200,0,100,alpha),   sw, color(0));
vorm[14] = new Drieh_an(n, dps, x2+a, y2,  -90+h, color(200,200,50,alpha), sw, color(0));
vorm[15] = new Drieh_an(n, dps, x2+a, y2,   90+h, color(200,200,50,alpha), sw, color(0));
vorm[16] = new Drieh_an(n, dps, x2,   y2+a,  0+h, color(200,0,50,  alpha), sw, color(0));
vorm[17] = new Drieh_an(n, dps, x2,   y2+a,180+h, color(200,0, 50, alpha), sw, color(0));
vorm[18] = new Drieh_an(n, dps, x2-a, y2,   90+h, color(100,200,50,alpha), sw, color(0));
vorm[19] = new Drieh_an(n, dps, x2-a, y2,  -90+h, color(100,200,50,alpha), sw, color(0));
vorm[20] = new Drieh_an(n, dps, x2-a/2,y2-a/2, 135+h,color(100,200,100,alpha),sw,color(0));
vorm[21] = new Drieh_an(n, dps, x2+a/2,y2-a/2,-135+h,color(100,200,100,alpha),sw,color(0));
vorm[22] = new Drieh_an(n, dps, x2+a/2,y2+a/2, -45+h,color(100,200,50, alpha),sw,color(0));
vorm[23] = new Drieh_an(n, dps, x2-a/2,y2+a/2,  45+h,color(100,200,50, alpha),sw,color(0));
}
 
function draw() {
//background('#E6FBFF');
if (zwartwit) {background(0)}
   else {clear(); background('rgba(255,255,255, 0)');}
 alfaR();
 alfaS();
 push();
 translate(width/2, height/2);
 //de roterende driehoeken
   if (key == 's'|| key == 'S'){  } else {
     s = s - 0.5;
     rotate(radians(s));
     if (s < -360) {s = 0;}
   }
 pop();
 // Het draaiende canvas,rotate wordt 2 keer aangeroepen.
 // Als 's' is ingedrukt stopt het draaien in de rotatie stand s
 push();
 translate(width/2, height/2);
 rotate(radians(s));
 for (let i = 0; i < 12; i++) {vorm[i].display();}
 pop();
 // de stilstaande driehoeken
 for (let i = 12; i < 24; i++){vorm[i].display();}
}
 
function buttonR1Action(){h = 0;setup();}
function buttonR2Action(){h =45;setup();}
function buttonR3Action(){h =90;setup();}
function buttonR4Action(){h =135;setup();}
 
function button1rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 1;}}
function button1sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 1;}}
function button2rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 2;}}
function button2sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 2;}}
function button3rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 3;}}
function button3sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 3;}}
function button4rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 4;}}
function button4sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 4;}}
function button5rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 5;}}
function button5sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 5;}}
function button6rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 6;}}
function button6sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 6;}}
function button0rAction(){for(let i = 0; i < 12;i++){vorm[i].d = 0;}}
function button0sAction(){for(let i = 12;i < 24;i++){vorm[i].d = 0;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit=true;}}
function buttonDAction() {save('vierentwintig_driehoeken.png');}
 
function alfaR(){let sliderAlfa = sliderR.value();
vorm[0].c = color(255,0,0,sliderAlfa);    vorm[1].c = color(200,0,100,sliderAlfa);
vorm[2].c = color(200,200,50,sliderAlfa); vorm[3].c = color(200,200,50,sliderAlfa);
vorm[4].c = color(200,0,50,sliderAlfa);   vorm[5].c = color(200,0,50,sliderAlfa);
vorm[6].c = color(100,200,50,sliderAlfa); vorm[7].c = color(100,200,50,sliderAlfa);
vorm[8].c = color(100,200,100,sliderAlfa);vorm[9].c = color(100,200,100,sliderAlfa);
vorm[10].c =color(100,200,50,sliderAlfa);vorm[11].c = color(100,200,50,sliderAlfa);}
 
function alfaS(){let sliderAlfa = sliderS.value();
vorm[12].c = color(255,0,0,sliderAlfa);    vorm[13].c = color(200,0,100,sliderAlfa);
vorm[14].c = color(200,200,50,sliderAlfa); vorm[15].c = color(200,200,50,sliderAlfa);
vorm[16].c = color(200,0,50,sliderAlfa);   vorm[17].c = color(200,0,50,sliderAlfa);
vorm[18].c = color(100,200,50,sliderAlfa); vorm[19].c = color(100,200,50,sliderAlfa);
vorm[20].c = color(100,200,100,sliderAlfa);vorm[21].c = color(100,200,100,sliderAlfa);
vorm[22].c = color(100,200,50,sliderAlfa); vorm[23].c = color(100,200,50,sliderAlfa);}