"T" en "drieh_nh" draaipunten random veranderen

3 pentominos "T" en 8 "Drieh_nh" vormen een gelijkzijdige achthoek. terug naar de inleiding

toets "s" stopt de rotaties de overige toetsen starten de rotaties weer

pentomino's T en driehoeken in fullscreen

Positie draaipunt van de driehoeken = hoogte achthoek - hoogte driehoek = sqr(1.5*1.5+1.5*1.5)+1.5-1.5 = sqrt(4.5) (regel 12)

De draaipunten bevinden zich dus op de rand van een cirkel.

Het random veranderen van de draaipunten

Na het starten worden twee for lussen uitgevoerd

1) de T pentomino objecten 0 t/m 3 met draaipunt 0 (regel 40)

2) de driehoek objecten 4 t/m 11 met draaipunt 3 (regel 48)

dpT en dpD (regel 51 en 52) zullen tot de frameCount van 50 (regel 55) telkens verandereren.

De lussen in regel 62 en 68 gaan draaien en de objecten krijgen de at random ingestelde waarden van dpT en dpD

Na FrameCount > 400 (regel 74) stoppen de lussen en de start lussen beginnen weer te draaien.

De schets maakt gebruik van objecten van de p5. js pentomino classes "T" , "Drieh_nh" , "Ellips"

en de p5.js superclass "Vormen"


let vorm = [];
let dpT = 0; let dpD = 3; let hoek = 0;
let start = true; let cirkelAan = false;
function setup() {
  buttonCirkelAU = createButton('cirkel aan/uit');
  buttonCirkelAU.position(20,80);buttonCirkelAU.style('width','100px');
  buttonCirkelAU.mouseClicked(buttonCirkelAUAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,120);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  const x = width/2; const y = height/2; const n = height/12;
  let sw = n/50; let kleur = 0; let alfa = 100;
 //dp is de plaats van het draaipunt van de driehoeken in het assenstelsel
 let dp = sqrt(4.5)*n;
 vorm[0] = new T(n, dpT, x-1.5*n, y-1.5*n,       -45,color(10,255,200,alfa),sw,color(kleur));
 vorm[1] = new T(n, dpT, x+1.5*n, y-1.5*n,        45,color(247,50,40,alfa), sw,color(kleur));
 vorm[2] = new T(n, dpT, x+1.5*n, y+1.5*n,      -225,color(50,255,121,alfa),sw,color(kleur));
 vorm[3] = new T(n, dpT, x-1.5*n, y+1.5*n,       225,color(250,200,0,alfa), sw,color(kleur));
 vorm[4] = new Drieh_nh(3*n, 3*n/2, dpD, x, y-dp,180,color(165,247,10,alfa),sw,color(kleur));
 vorm[5] = new Drieh_nh(3*n, 3*n/2, dpD, x, y-dp,180,color(250,10,240,alfa),sw,color(kleur));
 vorm[6] = new Drieh_nh(3*n, 3*n/2, dpD, x+dp,y, -90,color(252,0,246,alfa), sw,color(kleur));
 vorm[7] = new Drieh_nh(3*n, 3*n/2, dpD, x+dp,y, -90,color(161,252,0,alfa), sw,color(kleur));
 vorm[8] = new Drieh_nh(3*n, 3*n/2, dpD, x, y+dp,  0,color(0,0,245,alfa),   sw,color(kleur));
 vorm[9] = new Drieh_nh(3*n, 3*n/2, dpD, x, y+dp,  0,color(50,200,153,alfa),sw,color(kleur));
 vorm[10] = new Drieh_nh(3*n,3*n/2, dpD, x-dp,y,  90,color(251,201,0,alfa), sw,color(kleur));
 vorm[11] = new Drieh_nh(3*n,3*n/2, dpD, x-dp,y,  90,color(0,255,111,alfa), sw,color(kleur));
 cirkel = new Ellips(dp, dp, 0, x, y, 0, color(222,144,92,50),sw,color(kleur));
 
 tekst1 = new Text("", 18, 1, 40, 20,0,color(0),0.2,color(0));
 tekst2 = new Text("", 18, 1, 40, 40,0,color(0),0.2,color(0));
}
 
function draw() {
  //  background('#E6FBFF');
  clear();
  background('rgba(255,255,255, 0)');
   if (start) {
  for (let i = 0; i < 4; i++)
  {
    vorm[i].d = 0;
    vorm[i].display();
  }
 
  for (let i = 4; i < 12; i++)
  {
    vorm[i].d = 3;
    vorm[i].display();
  }
   dpT = int(random(9));100
   dpD = int(random(7));
}
 
if (frameCount > 50) {
    start = false;
    strokeWeight(0);
    tekst1.display();
    tekst2.display();
    tekst1.text = ("draaipunt T = "+dpT+" , draaipunt driehoek = "+dpD);
    tekst2.text = ("hoek = " + vorm[9].hoek + " graden");
    for (let i = 0; i < 4; i++)
    {
      vorm[i].d = dpT;
      vorm[i].display();
    }
 
    for (let i = 4; i < 12; i++)
    {
      vorm[i].d = dpD;
      vorm[i].display();
    }
  }
  if (frameCount > 400) {frameCount = 0; start = true;}
  //save('T_drieh_animatie.png');}
     if (key == 's' || key == 'S') {
 }
  else
  {
 vorm[0].dpRotLi(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].dpRotRe(vorm[7]);
 vorm[8].dpRotLi(vorm[8]);  vorm[9].dpRotRe(vorm[9]);
 vorm[10].dpRotLi(vorm[10]);vorm[11].dpRotRe(vorm[11]);
}
 
if (cirkelAan){cirkel.display();}
}  //einde draw functie
 
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
 
function buttonCirkelAUAction()
 { if (cirkelAan){cirkelAan=false;} else {cirkelAan=true;}}
function buttonDAction(){save('pentomino_T_driehoeken.png');}

Flevopink