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();
}
}