animatie met 12 rechthoeken

Met de "s" of "S" toets stopt en met elke andere toets starten de bewegingen weer, met de "d" of "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 rechth = []; 
//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; 
//  ruitjespapier = new Ruitjes(n,x,y); 
 rechth[0] = new Rechthoek(n*2,n*2, dpvb, x-6*n, y-n, 0,color(255, 102, 102,100),sw, color(0)); 
 rechth[1] = new Rechthoek(n*2,n*2, dpvb, x-2*n, y-n, 0,color(51, 153, 255,100), sw, color(0)); 
 rechth[2] = new Rechthoek(n*2,n*2, dpvb, x+2*n, y-n, 0,color(0,255,0,100),      sw, color(0)); 
 rechth[3] = new Rechthoek(n*2,n*2, dpvb, x+6*n, y-n, 0,color(255,255,0,100),    sw, color(0)); 
 
 rechth[4] = new Rechthoek(n*2,n*2, dpvo, x-6*n, y+n, 0,color(255,255,0,100),    sw, color(0)); 
 rechth[5] = new Rechthoek(n*2,n*2, dpvo, x-2*n, y+n, 0,color(0,255,0,100),      sw, color(0)); 
 rechth[6] = new Rechthoek(n*2,n*2, dpvo, x+2*n, y+n, 0,color(51, 153, 255,100), sw, color(0)); 
 rechth[7] = new Rechthoek(n*2,n*2, dpvo, x+6*n, y+n, 0,color(255, 102, 102,100),sw, color(0)); 
 
 rechth[8] = new Rechthoek(n*4,n, dprb, x-4*n, y-n, 0, color(204, 255, 51,100), sw, color(0)); 
 rechth[9] = new Rechthoek(n*4,n, dprb, x+4*n, y-n, 0, color(51, 153, 255,100), sw, color(0)); 
 rechth[10] = new Rechthoek(n*4,n,dpro, x-4*n, y+n, 0, color(51, 153, 255,100), sw, color(0)); 
 rechth[11] = 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); 
//  ruitjespapier.display(); 
 
  for (let i = 0; i < 12; i +=1) { 
    rechth[i].display(); 
  } 
 
//  for (let i = 0; i < 12; i +=1) { 
//    rechth[i].dpAan(); 
//  } 
 
  if (key == 's' || key == 'S') { 
 
  } 
  else { 
  rechth[0].dpRotLi(rechth[0]); rechth[1].dpRotRe(rechth[1]); 
  rechth[2].dpRotLi(rechth[2]); rechth[3].dpRotRe(rechth[3]); 
  rechth[4].dpRotRe(rechth[4]); rechth[5].dpRotLi(rechth[5]); 
  rechth[6].dpRotRe(rechth[6]); rechth[7].dpRotLi(rechth[7]); 
  rechth[8].dpRotRe(rechth[8]); rechth[9].dpRotLi(rechth[9]); 
  rechth[10].dpRotLi(rechth[10]); rechth[11].dpRotRe(rechth[11]); 
  } 
} 
 
function windowResize() { 
  resizeCanvas(windowWidth, windowHeight); 
} 
 
function keyPressed() { 
 if (key == 'd' || key == 'D'){ 
    save('rechthoeken_animatie.png'); 
  } 
 
  if (key == '1') { 
     dpvb = 3; dpvo = 1; dprb = 8; dpro = 4; 
     setup(); 
  } 
  if (key == '2') { 
     dpvb = 4; dpvo = 8; dprb = 4; dpro = 8; 
     setup(); 
  } 
  if (key == '3') { 
     dpvb = 2; dpvo = 6; dprb = 8; dpro = 4; 
     setup(); 
  } 
 
  if (key == '4') { 
     dpvb = 6; dpvo = 6; dprb = 4; dpro = 8; 
     setup(); 
  } 
 
  if (key == '5') { 
     setup(); 
  } 
 
  if (key == '6') { 
     dpvb = 5; dpvo = 7; dprb = 8; dpro = 4; 
     setup(); 
  } 
}

Flevopink