Met de "s" toets stopt en met de "r" toets starten de bewegingen, met de "d" toets kan je een afbeelding van de animatie downloaden.
 
Met toetsen 1 t/m 6 veranderen de draaipunten van de rechthoeken.   zie ook  "Rechthoek" in processing
 

animatie met 12 rechthoeken                       terug naar de inleiding                            naar de animatie in fullscreen

De schets maakt gebruik van objecten van class  "Rechthoek"  en de superclass  "Vormen"

argumenten van de constructor  1) hoogte,  2) breedte,  3) draaipunt,  4) x positie,  5) y positie,  6) hoek,  7) kleur,  8) lijndikte,  9) lijnkleur

 

 

 
let rechth0, rechth1, rechth2, rechth3, rechth4, rechth5; 
let rechth6, rechth7, rechth8, rechth9, rechth10,recht11, ruitjes; 
//dpvb = draaipunt vierkant boven 
//dpvo = draaipunt vierkant onder 
//dprb = draaipunt rechthoek boven 
//dpro = draaipunt rehthoek onder 
let dpvb = 8, dpvo = 4; dprb = 8, dpro = 4; 
 
function  setup() { 
  createCanvas(windowWidth, windowHeight); 
  let n = height/10; 
  let x = width/2; 
  let y = height/2; 
  let sw = height/150; 
//constructor            1    2     3     4     5   6   7                      8     9 
 rechth0 = new Rechthoek(n*2,n*2, dpvb, x-6*n, y-n, 0,color(255, 102, 102,100),sw, color(0)); 
 rechth1 = new Rechthoek(n*2,n*2, dpvb, x-2*n, y-n, 0,color(51, 153, 255,100), sw, color(0)); 
 rechth2 = new Rechthoek(n*2,n*2, dpvb, x+2*n, y-n, 0,color(0,255,0,100),      sw, color(0)); 
 rechth3 = new Rechthoek(n*2,n*2, dpvb, x+6*n, y-n, 0,color(255,255,0,100),    sw, color(0)); 
 
 rechth4 = new Rechthoek(n*2,n*2, dpvo, x-6*n, y+n, 0,color(255,255,0,100),    sw, color(0)); 
 rechth5 = new Rechthoek(n*2,n*2, dpvo, x-2*n, y+n, 0,color(0,255,0,100),      sw, color(0)); 
 rechth6 = new Rechthoek(n*2,n*2, dpvo, x+2*n, y+n, 0,color(51, 153, 255,100), sw, color(0)); 
 rechth7 = new Rechthoek(n*2,n*2, dpvo, x+6*n, y+n, 0,color(255, 102, 102,100),sw, color(0)); 
 
 rechth8 = new Rechthoek(n*4,n, dprb, x-4*n, y-n, 0, color(204, 255, 51,100), sw, color(0)); 
 rechth9 = new Rechthoek(n*4,n, dprb, x+4*n, y-n, 0, color(51, 153, 255,100), sw, color(0)); 
 rechth10 = new Rechthoek(n*4,n,dpro, x-4*n, y+n, 0, color(51, 153, 255,100), sw, color(0)); 
 rechth11 = new Rechthoek(n*4,n,dpro, x+4*n, y+n, 0, color(204, 255, 51,100), sw, color(0)); 
} 
 
function draw(){ 
  background(230,251,255); 
//  ruitjes.show(); 
  rechth0.display(); rechth1.display(); rechth2.display(); rechth3.display(); 
  rechth4.display(); rechth5.display(); rechth6.display(); rechth7.display(); 
  rechth8.display(); rechth9.display(); rechth10.display(); rechth11.display(); 
  rechth0.dpRotLi(rechth0); rechth1.dpRotRe(rechth1); 
  rechth2.dpRotLi(rechth2); rechth3.dpRotRe(rechth3); 
  rechth4.dpRotRe(rechth4); rechth5.dpRotLi(rechth5); 
  rechth6.dpRotRe(rechth6); rechth7.dpRotLi(rechth7); 
  rechth8.dpRotRe(rechth8); rechth9.dpRotLi(rechth9); 
  rechth10.dpRotLi(rechth10); rechth11.dpRotRe(rechth11); 
} 
 
function keyPressed() { 
  if (key === 's') { 
    noLoop(); 
  } 
  if (key == 'r') { 
    loop(); 
 } 
 if (key == 'd'){ 
    save('rechthoeken_animatie.png'); 
  } 
  if (key == '1') { 
     dpvb = 3; dpvo = 1; dprb = 8; dpro = 4; 
     loop(); 
     setup(); 
  } 
  if (key == '2') { 
     dpvb = 4; dpvo = 8; dprb = 4; dpro = 8; 
     loop(); 
     setup(); 
  } 
  if (key == '3') { 
     dpvb = 2; dpvo = 6; dprb = 8; dpro = 4; 
     loop(); 
     setup(); 
  } 
 
  if (key == '4') { 
     dpvb = 6; dpvo = 6; dprb = 4; dpro = 8; 
     loop(); 
     setup(); 
  } 
 
  if (key == '5') { 
     dpvb = 2; dpvo = 6; dprb = 8; dpro = 4; 
     loop(); 
     setup(); 
  } 
 
  if (key == '6') { 
     dpvb = 5; dpvo = 7; dprb = 8; dpro = 4; 
     loop(); 
     setup(); 
  } 
}