parallellogrammen animatie in fullscreen

De schets maakt gebruik p5.js van objectmethodes van de superclass "Vormen", en objecten van de subclass   "Paral",  voor het ruitjespapier de class "Ruitjes"

met de knop "snel/langzaam" hebben vorm 4 t/m 7 is de hogere snelheid dpRotLiS() en dpRotReS() (regel 96 t/m 93)

 

//animatie met 12 parallellogrammen hoogte n lengte n, 2n en 3n
let vorm = []; let ruitjes = false; zwartwit = false;
let x; let n; let y; let sl = false;
function setup() {
  buttonR1 = createButton('reset');
  buttonR1.position(20,40);buttonR1.style('width','70px');
  buttonR1.mouseClicked(buttonR1Action);
  buttonxn = createButton('x1 = 0');
  buttonxn.position(20,80);buttonxn.style('width','70px');
  buttonxn.mouseClicked(buttonxnAction);
  buttonx2n = createButton('x1 = 2n');
  buttonx2n.position(100,80);buttonx2n.style('width','70px');
  buttonx2n.mouseClicked(buttonx2nAction);
  buttonxy2n = createButton('xy2 = n');
  buttonxy2n.position(20,120);buttonxy2n.style('width','70px');
  buttonxy2n.mouseClicked(buttonxy2nAction);
  buttonxy2_2n = createButton('xy2 = 2n');
  buttonxy2_2n.position(100,120);buttonxy2_2n.style('width','70px');
  buttonxy2_2n.mouseClicked(buttonxy2_2nAction);
  buttonxy3n = createButton('xy3 = n');
  buttonxy3n.position(20,160);buttonxy3n.style('width','70px');
  buttonxy3n.mouseClicked(buttonxy3nAction);
  buttonxy3_2n = createButton('xy3 = 2n');
  buttonxy3_2n.position(100,160);buttonxy3_2n.style('width','70px');
  buttonxy3_2n.mouseClicked(buttonxy3_2nAction);
  buttonH0 = createButton('h = 0');
  buttonH0.position(20,200);buttonH0.style('width','70px');
  buttonH0.mouseClicked(buttonH0Action);
  buttonH45 = createButton('h = 45');
  buttonH45.position(100,200);buttonH45.style('width','70px');
  buttonH45.mouseClicked(buttonH45Action);
  buttonH30 = createButton('h = 30');
  buttonH30.position(20,240);buttonH30.style('width','70px');
  buttonH30.mouseClicked(buttonH30Action);
  buttonH60 = createButton('h = 60');
  buttonH60.position(100,240);buttonH60.style('width','70px');
  buttonH60.mouseClicked(buttonH60Action);
  buttonH135 = createButton('h = 135');
  buttonH135.position(20,280);buttonH135.style('width','70px');
  buttonH135.mouseClicked(buttonH135Action);
 
  buttonH225 = createButton('h = 225');
  buttonH225.position(100,280);buttonH225.style('width','70px');
  buttonH225.mouseClicked(buttonH225Action);
 
  buttonsl = createButton('snel/langzaam');
  buttonsl.position(20,320);buttonsl.style('width','120px');
  buttonsl.mouseClicked(buttonslAction);
 
  buttonZW = createButton('zwart/wit');
  buttonZW.position(20,360);buttonZW.style('width','120px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonRAU = createButton('ruitjes aan uit');
  buttonRAU.position(20,400);buttonRAU.style('width','120px');
  buttonRAU.mouseClicked(buttonRAUAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,440); buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
  createCanvas(windowWidth, windowHeight);
  x = width/2; y = height/2;  n = height/9; let hoek = 0;
  const h = n; const l = n; let alfa = 100; let sw = n/50; let sc = color(0);
  vorm[0] = new Paral(h, l, 1, 5, x, y, hoek, color(255, 255,0,alfa),sw,sc);
  vorm[1] = new Paral(h, l, 0, 3, x, y, hoek, color(0, 255, 0, alfa),sw,sc);
  vorm[2] = new Paral(h, l, 0, 7, x, y, hoek, color(255, 0, 0, alfa),sw,sc);
  vorm[3] = new Paral(h, l, 1, 1, x, y, hoek, color(100,0,255, alfa),sw,sc);
 
  vorm[4] = new Paral(h, 2*l, 1, 7, x-n, y-n, hoek, color(255,255,0,alfa-25),sw,sc);
  vorm[5] = new Paral(h, 2*l, 0, 1, x+n, y-n, hoek, color(0, 255, 0,alfa-25),sw,sc);
  vorm[6] = new Paral(h, 2*l, 0, 5, x-n, y+n, hoek, color(255, 0, 0,alfa-25),sw,sc);
  vorm[7] = new Paral(h, 2*l, 1, 3, x+n, y+n, hoek, color(100,0,255,alfa-25),sw,sc);
 
  vorm[8] = new Paral(h, 3*l, 1, 7, x-n, y-n, hoek, color(255,255,0, alfa),sw,sc);
  vorm[9] = new Paral(h, 3*l, 0, 1, x+n, y-n, hoek, color(0, 255, 0, alfa),sw,sc);
  vorm[10] = new Paral(h,3*l, 0, 5, x-n, y+n, hoek, color(255, 0, 0, alfa),sw,sc);
  vorm[11] = new Paral(h,3*l, 1, 3, x+n, y+n, hoek, color(100,0,255, alfa),sw,sc);
  ruitjespap = new Ruitjes(n,x,y);
}
 
function draw() {
  if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
  for (let i = 0; i < 12; i++) { vorm[i].display();}
  if (ruitjes) {ruitjespap.display();
   for (let i = 0; i < 12; i++) {vorm[i].dpAan();}}
  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]);
 
  if (sl)
   {vorm[4].dpRotReS(vorm[4]); vorm[5].dpRotLiS(vorm[5]);
    vorm[6].dpRotLiS(vorm[6]); vorm[7].dpRotReS(vorm[7]);}
 
  if (sl == false)
   {vorm[4].dpRotRe(vorm[4]); vorm[5].dpRotLi(vorm[5]);
    vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);}
 
   vorm[8].dpRotLi(vorm[8]);  vorm[9].dpRotRe(vorm[9]);
   vorm[11].dpRotLi(vorm[11]);vorm[10].dpRotRe(vorm[10]);
 }
}
function buttonR1Action(){setup();}
function buttonxnAction(){for (let i=0; i<4; i++) {vorm[i].x = x;}}
function buttonx2nAction()
{vorm[0].x=x-n*2; vorm[1].x=x+n*2; vorm[2].x=x-n*2; vorm[3].x=x+n*2;}45
function buttonxy2nAction()
{vorm[4].y=y-n; vorm[5].y=y-n; vorm[6].y=y+n; vorm[7].y=y+n;
 vorm[4].x=x-n; vorm[5].x=x+n; vorm[6].x=x-n; vorm[7].x=x+n;}
function buttonxy2_2nAction()
{vorm[4].y=y-2*n; vorm[5].y=y-2*n; vorm[6].y=y+2*n; vorm[7].y=y+2*n;
 vorm[4].x=x-2*n; vorm[5].x=x+2*n; vorm[6].x=x-2*n; vorm[7].x=x+2*n;}
function buttonxy3nAction()
{vorm[8].y=y-n; vorm[9].y=y-n; vorm[10].y=y+n; vorm[11].y=y+n;
 vorm[8].x=x-n; vorm[9].x=x+n; vorm[10].x=x-n; vorm[11].x=x+n;}
function buttonxy3_2nAction()
{vorm[8].y=y-2*n; vorm[9].y=y-2*n; vorm[10].y=y+2*n; vorm[11].y=y+2*n;
 vorm[8].x=x-2*n; vorm[9].x=x+2*n; vorm[10].x=x-2*n; vorm[11].x=x+2*n;}
function buttonH0Action()  {for (let i=0; i<12; i++) {vorm[i].hoek=0}}
function buttonH45Action() {for (let i=0; i<12; i++) {vorm[i].hoek=45}}
function buttonH30Action() {for (let i=0; i<12; i++) {vorm[i].hoek=30}}
function buttonH60Action() {for (let i=0; i<12; i++) {vorm[i].hoek=60}}
function buttonH135Action(){for (let i=0; i<12; i++) {vorm[i].hoek=135}}
function buttonH225Action(){for (let i=0; i<12; i++) {vorm[i].hoek=225}}
function buttonslAction()
  {if (sl){sl = false;} else {sl=true;}}
function buttonZWAction()
  {if(zwartwit){zwartwit = false;} else {zwartwit=true;}}
function buttonRAUAction()
  {if (ruitjes){ruitjes  = false;} else {ruitjes=true;}}
function buttonDAction() {save('twaalf-parallellogrammen.png');}
 

 

                                                                                       10 parallellogrammen afbeeldingen in fullscreen

 

//animatie met 12 parallellogrammen hoogte n lengte n, 2n en 3n
vorm = []; let zwartwit = false;
function setup() {
  buttonH0 = createButton('h0');
  buttonH0.position(20,30);buttonH0.style('width','40px');
  buttonH0.mouseClicked(buttonH0Action);
  buttonH1 = createButton('h1');
  buttonH1.position(20,60);buttonH1.style('width','40px');
  buttonH1.mouseClicked(buttonH1Action);
  buttonH2 = createButton('h2');
  buttonH2.position(20,90);buttonH2.style('width','40px');
  buttonH2.mouseClicked(buttonH2Action);
  buttonH3 = createButton('h3');
  buttonH3.position(20,120);buttonH3.style('width','40px');
  buttonH3.mouseClicked(buttonH3Action);
  buttonH4 = createButton('h4');
  buttonH4.position(20,150);buttonH4.style('width','40px');
  buttonH4.mouseClicked(buttonH4Action);
  buttonH5 = createButton('h5');
  buttonH5.position(20,180);buttonH5.style('width','40px');
  buttonH5.mouseClicked(buttonH5Action);
  buttonH6 = createButton('h6');
  buttonH6.position(20,210);buttonH6.style('width','40px');
  buttonH6.mouseClicked(buttonH6Action);
  buttonH7 = createButton('h7');
  buttonH7.position(20,240);buttonH7.style('width','40px');
  buttonH7.mouseClicked(buttonH7Action);
  buttonH8 = createButton('h8');
  buttonH8.position(20,270);buttonH8.style('width','40px');
  buttonH8.mouseClicked(buttonH8Action);
  buttonH9 = createButton('h9');
  buttonH9.position(20,300);buttonH9.style('width','40px');
  buttonH9.mouseClicked(buttonH9Action);
  buttonH10 = createButton('h10');
  buttonH10.position(20,330);buttonH10.style('width','40px');
  buttonH10.mouseClicked(buttonH10Action);
  buttonZW = createButton('zwart wit');
  buttonZW.position(20,360);buttonZW.style('width','70px');
  buttonZW.mouseClicked(buttonZWAction);
  buttonD = createButton('downloaden');
  buttonD.position(20,390);buttonD.style('width','100px');
  buttonD.mouseClicked(buttonDAction);
 
  createCanvas(windowWidth, windowHeight);
  let x = width/2; let y = height/2; let n = height/8;
  let h = n , l = n , sw = n/100, sc = color(0), alfa1 = 100, alfa2 = 75;
  vorm[0] = new Paral(h, l,   0, 3, x,   y,  0, color(0, 255, 0,  alfa1),sw,sc);
  vorm[1] = new Paral(h, l,   0, 7, x,   y,  0, color(255, 0, 0,  alfa1),sw,sc);
  vorm[2] = new Paral(h, 2*l, 0, 1, x+n, y-n,0, color(0,  255, 0, alfa2),sw,sc);
  vorm[3] = new Paral(h, 2*l, 0, 5, x-n, y+n,0, color(255,  0, 0, alfa2),sw,sc);
  vorm[4] = new Paral(h, 3*l, 1, 7, x-n, y-n,0, color(255, 255,0, alfa1),sw,sc);
  vorm[5] = new Paral(h, 3*l, 1, 3,  x+n,y+n,0, color(100,0,255,  alfa1),sw,sc);
 
  vorm[6] = new Paral(h, 2*l, 1, 3, x+n, y+n,0, color(100, 0,255, alfa2),sw,sc);
  vorm[7] = new Paral(h, l,   1, 1, x,   y,  0, color(100, 0,255, alfa1),sw,sc);
  vorm[8] = new Paral(h, l,   1, 5, x,   y,  0, color(255, 255,0, alfa1),sw,sc);
  vorm[9] = new Paral(h, 2*l, 1, 7, x-n, y-n,0, color(255, 255,0, alfa2),sw,sc);
  vorm[10]= new Paral(h,3*l,  0, 1, x+n, y-n,0, color(0, 255,  0, alfa1),sw,sc);
  vorm[11]= new Paral(h,3*l,  0, 5, x-n, y+n,0, color(255, 0,  0, alfa1),sw,sc);
}
 
function draw() {
  if (zwartwit) {background(0)}
    else {clear(); background('rgba(255,255,255, 0)');}
  for (let i = 0; i < 12; i++) { vorm[i].display();}
}
 
function buttonH0Action()
{for(let i=0; i<6; i++){vorm[i].hoek=0}for(let i=6; i<12; i++){vorm[i].hoek=0}}
function buttonH1Action()
{for(let i=0; i<6; i++){vorm[i].hoek=135}for(let i=6; i<12; i++){vorm[i].hoek=-135}}
function buttonH2Action()
{for(let i=0; i<6; i++){vorm[i].hoek=225}for(let i=6; i<12; i++){vorm[i].hoek=225}}
function buttonH3Action()
{for(let i=0; i<6; i++){vorm[i].hoek=60}for(let i=6; i<12; i++){vorm[i].hoek=-60}}
function buttonH4Action()
{for(let i=0; i<6; i++){vorm[i].hoek=122.5}for(let i=6; i<12; i++){vorm[i].hoek=-122.5}}
function buttonH5Action()
{for(let i=0; i<6; i++){vorm[i].hoek=45}for(let i=6; i<12; i++){vorm[i].hoek=45}}
function buttonH6Action()
{for(let i=0; i<6; i++){vorm[i].hoek=45}for(let i=6; i<12; i++){vorm[i].hoek=-45}}
function buttonH7Action()
{for(let i=0; i<6; i++){vorm[i].hoek=247.5}for(let i=6; i<12; i++){vorm[i].hoek=247.5}}
function buttonH8Action()
{for(let i=0; i<6; i++){vorm[i].hoek=247.5}for(let i=6; i<12; i++){vorm[i].hoek=-247.5}}
function buttonH9Action()
{for(let i=0; i<6; i++){vorm[i].hoek=210}for(let i=6; i<12; i++){vorm[i].hoek=-210}}
function buttonH10Action()
{for(let i=0; i<6; i++){vorm[i].hoek=210}for(let i=6; i<12; i++){vorm[i].hoek=210}}
function buttonZWAction()
 {if(zwartwit){zwartwit=false;}else{zwartwit=true;}}
function buttonDAction() {save('twaalf-parallellogrammen.png');}