asymetrische animatie gemaakt met de p5.js schets

asymetrische animatie gemaakt met de p5.js schets

 

asymetrische animatie gemaakt met de p5.js schets met verschillende lijndiktes en lijnkleuren

asymetrische animatie gemaakt met de p5.js schets
met verschillende lijndiktes en lijnkleuren
 

 
 
 
Animatie met pentomino "U", "T" en "X".                     terug naar de inleiding
Toets "s" stopt de rotaties de overige toetsen starten de rotaties

                                                            "U" , "T" en "X" animatie in fullscreen

De schets maakt gebruik van objecten van de classes  "U""T""X",   en de superclass   "Vormen"

toetsfuncties van de processing pde schets
toetsen 1 t/m 6 veranderen van de draaipunten,
toets "s" stopt en met iedere andere toets start de animatie
toets "d" downloaden van een , deels transparante png afbeelding van de animatie
 

Onder deze schets staat een aangepaste schets in p5.js

 

Vormen [] vorm; 
 int dp1 =0; 
 int dp2 =0; 
 
void setup() { 
 
  size(780, 560); 
//  fullScreen(); 
  float x = width/2; 
  float y = height/2; 
  float n = height/10; 
  vorm = new Vormen[8];  
  vorm[0] = new U(n, 8-dp1, x-1.5*n, y-1.5*n,  0, color(#23E551, 50)); 
  vorm[1] = new U(n, 1+dp1, x+1.5*n, y-1.5*n,  0, color(#23B0E5, 50)); 
  vorm[2] = new U(n, 1+dp1, x-1.5*n, y+1.5*n,180, color(#23B0E5, 50)); 
  vorm[3] = new U(n, 8-dp1, x+1.5*n, y+1.5*n,180, color(#23E551, 50)); 
  vorm[4] = new T(n, dp2, x-3*n,     y,       90, color(200, 255, 0, 50));  
  vorm[5] = new T(n, dp2, x+3*n,     y,      -90, color(200, 255, 0, 50));  
  vorm[6] = new X(n, dp2, x,         y-2*n,    0, color(#E5A223, 50));  
  vorm[7] = new X(n, dp2, x,         y+2*n,    0, color(#E5A223, 50));  
} 
 
void draw() { 
  background(#E6FBFF); 
  strokeWeight(2); 
  for (int i = 0; i < 8; i++)  
  {  
  vorm[i].display();  
  }  
   if (key == 's') {       
        
  }         
   else    
 {    
  
  vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]); 
  vorm[2].dpRotRe(vorm[2]); vorm[3].dpRotLi(vorm[3]); 
  vorm[4].xLiRe(); vorm[5].xReLi(); 
  vorm[6].yUpDown(); vorm[7].yDownUp(); 
} 
} 
void keyPressed() {  
   if (key == '1') {  dp1 = 0; dp2 = 0;  setup(); }      
   if (key == '2') {  dp1 = 2; dp2 = 4;  setup(); } 
   if (key == '3') {  dp1 = 6;  dp2 = 0; setup(); }  
   if (key == '4') {  dp1 = 4;  dp2 = 0; setup(); }   
   if (key == '5') {  dp1 = 7; dp2 = 0;  setup(); }   
   if (key == '6') {  dp1 = 1; dp2 = 2;  setup(); }   
}
 

 
"U" , "T" , "X" animatie met aanpassingen in p5.js   
Toets "s" stopt de rotaties de overige toetsen starten de rotaties

                                                                                            bekijk de animatie in fullScreen

Voor de animatie in fullscreen staat het canvas in het center. Zie voor de code "Centering the sketch on the page width js"

De schets maakt gebruik van de p5.js classes "U" , "T" en "X" en de superclass "Vormen"

De constructors van de p5.js classes "U" , "T" en "X" hebben lijndikte en lijnkleur als extra argument
In setup zijn ,in de constructor, drie lijndiktes (regel 46) en drie hsla kleuren (regel 47 , 48, en 49) ingevoerd

De animaties zijn deels transparant dankzij de code in regel 64 en 65

 
 
let vorm = []; let ruitjespap; let cnv; 

 
function centerCanvas() {
  let x = (windowWidth - width) / 2;
  let y = (windowHeight - height) / 2;
  cnv.position(x, y);
}
function setup() {
  cnv = createCanvas(1000,1000);
  centerCanvas();
  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);
  button9 = createButton('dp 9');
  button9.position(20,400);button9.style('width','70px');
  button9.mouseClicked(button9Action);
  buttonD = createButton('downloaden');
  buttonD.position(20,440);buttonD.style('width','140px');
  buttonD.mouseClicked(buttonDAction);
  const x = width/2; const y = height/2; const alfa = 75;
  const n = height/15; const sw = n/35; const kleur = 0;
  ruitjespap = new Ruitjes(n,x,y);
  vorm[0] = new U(n, 8, x-1.5*n, y-1.5*n,  0, color(35,229,81,alfa), sw,color(kleur));
  vorm[1] = new U(n, 1, x+1.5*n, y-1.5*n,  0, color(35,176,229,alfa),sw,color(kleur));
  vorm[2] = new U(n, 1, x-1.5*n, y+1.5*n,180, color(35,176,229,alfa),sw,color(kleur));
  vorm[3] = new U(n, 8, x+1.5*n, y+1.5*n,180, color(35,229,81,alfa), sw,color(kleur));
  vorm[4] = new T(n, 0, x-3*n,     y,     90, color(200,255,0,alfa), sw,color(kleur));
  vorm[5] = new T(n, 0, x+3*n,     y,    -90, color(200,255,0,alfa), sw,color(kleur));
  vorm[6] = new X(n, 0, x,         y-2*n,  0, color(229,162,35,alfa),sw,color(kleur));
  vorm[7] = new X(n, 0, x,         y+2*n,  0, color(229,162,35,alfa),sw,color(kleur));
}
 
function draw() {
 //background('#E6FBFF');
 clear();
 background('rgba(255,255,255, 0)');
 //ruitjespap.display();
 for (let i = 0; i < 8; i++)
 {
 vorm[i].display();
 //vorm[i].dpAan();
 }
  if (key == 's') {
 
 }
  else
{
  vorm[0].dpRotLi(vorm[0]);vorm[1].dpRotRe(vorm[1]);
  vorm[2].dpRotRe(vorm[2]);vorm[3].dpRotLi(vorm[3]);
  vorm[4].xLiRe();         vorm[5].xReLi();
  vorm[6].yUpDown();       vorm[7].yDownUp();
}
}
 
function windowResized() {
  centerCanvas();
}
 
 function button0Action()
 {vorm[0].d=8; vorm[1].d=1;vorm[2].d=1;vorm[3].d=8;vorm[4].d=0;
  vorm[5].d=0; vorm[6].d=0;vorm[7].d=0;}
 function button1Action()
 {vorm[0].d=7; vorm[1].d=2;vorm[2].d=2;vorm[3].d=7;vorm[4].d=0;
  vorm[5].d=0; vorm[6].d=0;vorm[7].d=0;}
 function button2Action()
 {vorm[0].d=6; vorm[1].d=3;vorm[2].d=3;vorm[3].d=6;vorm[4].d=0;
  vorm[5].d=0; vorm[6].d=0;vorm[7].d=0;}
 function button3Action()
 {vorm[0].d=4; vorm[1].d=5;vorm[2].d=5;vorm[3].d=4;vorm[4].d=0;
  vorm[5].d=0; vorm[6].d=0;vorm[7].d=0;}
 function button4Action()
 {vorm[0].d=5; vorm[1].d=4;vorm[2].d=4;vorm[3].d=5;vorm[4].d=0;
  vorm[5].d=0; vorm[6].d=0;vorm[7].d=0;}
 function button5Action()
 {vorm[0].d=8; vorm[1].d=1;vorm[2].d=1;vorm[3].d=8;vorm[4].d=1;
  vorm[5].d=2; vorm[6].d=3;vorm[7].d=2;}
 function button6Action()
 {vorm[0].d=4; vorm[1].d=5;vorm[2].d=5;vorm[3].d=4;vorm[4].d=7;
  vorm[5].d=7; vorm[6].d=7;vorm[7].d=2;}
 function button7Action()
 {vorm[0].d=3; vorm[1].d=2;vorm[2].d=2;vorm[3].d=3;vorm[4].d=4;
  vorm[5].d=4; vorm[6].d=4;vorm[7].d=2;}
 function button8Action()
 {vorm[0].d=5;vorm[1].d=0;vorm[2].d=0;vorm[3].d=5;vorm[4].d=2;
  vorm[5].d= 2; vorm[6].d=2;vorm[7].d=7;}
 function button9Action()
 {vorm[0].d=8;vorm[1].d=2;vorm[2].d=2;vorm[3].d=8;vorm[4].d=4;
  vorm[5].d= 4; vorm[6].d=4;vorm[7].d=2;}
 function buttonDAction(){save('pentominos_U_T_X.png');}