zie ook "T" , "Drieh_nh" en "Ellipse" animatie met random veranderen van draaipunten
De animatie maakt gebruik van objecten van de p5.js classes "Hoek_n3n" , "Trap_3nan" en de p5.js superclass "Vormen"
let vorm = [];
let dph = 4; let dpt1 = 1; let dpt2 = 7;
let cl1 = 'hsla(132, 98%, 50%, 0.5)'; let cl2 = 'hsla(187, 98%, 50%, 0.5)';
let cl3 = 'hsla(132, 98%, 50%, 0.5)'; let cl4 = 'hsla(187, 98%, 50%, 0.5)';
let cl5 = 'hsla(60, 100%, 55%, 0.5)'; let cl6 = 'hsla(0, 100%, 60%, 0.5)';
function setup() {
createCanvas(windowWidth, windowHeight);
const x = width/2; const y = height/2;
const n = height/20;
let c1 = color(cl1); let c2 = color(cl2);
let c3 = color(cl3); let c4 = color(cl4);
let c5 = color(cl5); let c6 = color(cl6);
ruitjespap = new Ruitjes(n,x,y);
vorm[0] = new Hoek_n3n(n, dph, x-5*n, y-5*n,-45, c1);
vorm[1] = new Hoek_n3n(n, dph, x-5*n, y-5*n,-45, c2);
vorm[2] = new Hoek_n3n(n, dph, x+5*n, y-5*n, 45, c3);
vorm[3] = new Hoek_n3n(n, dph, x+5*n, y-5*n, 45, c4);
vorm[4] = new Hoek_n3n(n, dph, x-5*n, y+5*n, -135, c1);
vorm[5] = new Hoek_n3n(n, dph, x-5*n, y+5*n, -135, c2);
vorm[6] = new Hoek_n3n(n, dph, x+5*n, y+5*n, 135, c3);
vorm[7] = new Hoek_n3n(n, dph, x+5*n, y+5*n, 135, c4);
vorm[8] = new Trap_3nan(n, dpt1, x-n, y-4*n, -180,c5);
vorm[9] = new Trap_3nan(n, dpt2, x-n, y-4*n, -90, c6);
vorm[10] = new Trap_3nan(n, dpt1, x-4*n, y-n, 0, c5);
vorm[11] = new Trap_3nan(n, dpt2, x-4*n, y-n, 90, c6);
vorm[12] = new Trap_3nan(n, dpt2, x+n, y-4*n, -180,c5);
vorm[13] = new Trap_3nan(n, dpt1, x+4*n, y-n, -90, c6);
vorm[14] = new Trap_3nan(n, dpt2, x+4*n, y-n, 0, c5);
vorm[15] = new Trap_3nan(n, dpt1, x+n, y-4*n, 90, c6);
vorm[16] = new Trap_3nan(n, dpt2, x-4*n, y+n, -180,c5);
vorm[17] = new Trap_3nan(n, dpt1, x-n, y+4*n, -90, c6);
vorm[18] = new Trap_3nan(n, dpt2, x-n, y+4*n, 0, c5);
vorm[19] = new Trap_3nan(n, dpt1, x-4*n, y+n, 90, c6);
vorm[20] = new Trap_3nan(n, dpt1, x+4*n, y+n, -180,c5);
vorm[21] = new Trap_3nan(n, dpt2, x+4*n, y+n, -90, c6);
vorm[22] = new Trap_3nan(n, dpt1, x+n, y+4*n, 0, c5);
vorm[23] = new Trap_3nan(n, dpt2, x+n, y+4*n,90, c6);
}
function draw() {
// background('#E6FBFF');
clear();
background('rgba(255,255,255, 0)');
for (let i = 0; i < 24; i++)
{
vorm[i].display();
}
if (key == 's') {
}
else
{
vorm[0].dpRotLi(vorm[0]); vorm[1].dpRotRe(vorm[1]);
vorm[2].dpRotLi(vorm[2]); vorm[3].dpRotRe(vorm[3]);
vorm[4].dpRotLi(vorm[4]); vorm[5].dpRotRe(vorm[5]);
vorm[6].dpRotLi(vorm[6]); vorm[7].dpRotRe(vorm[7]);
vorm[8].dpRotRe(vorm[8]); vorm[9].dpRotLi(vorm[9]);
vorm[10].dpRotLi(vorm[10]); vorm[11].dpRotRe(vorm[11]);
vorm[12].dpRotLi(vorm[12]); vorm[13].dpRotLi(vorm[13]);
vorm[14].dpRotRe(vorm[14]); vorm[15].dpRotRe(vorm[15]);
vorm[16].dpRotRe(vorm[16]); vorm[17].dpRotRe(vorm[17]);
vorm[18].dpRotLi(vorm[18]); vorm[19].dpRotLi(vorm[19]);
vorm[20].dpRotLi(vorm[20]); vorm[21].dpRotRe(vorm[21]);
vorm[22].dpRotRe(vorm[22]); vorm[23].dpRotLi(vorm[23]);
}
}
function windowResized() {
resizeCanvas(windowWidth, windowHeight);
}
function keyPressed() {
if (key == 'd' || key == 'D'){ save('hoeken_trapeziums.png'); }
if (key == '1') { dph = 4; dpt1 = 1; dpt2 = 7; setup(); }
if (key == '2') { dph = 4; dpt1 = 0; dpt2 = 0; setup(); }
if (key == '3') { dph = 8; dpt1 = 3; dpt2 = 4; setup(); }
if (key == '4') { dph = 2; dpt1 = 2; dpt2 = 5; setup(); }
if (key == '5') { dph = 1; dpt1 = 4; dpt2 = 4; setup(); }
if (key == '6') { dph = 4; dpt1 = 1; dpt2 = 0; setup(); }
if (key == '7') { dph = 0; dpt1 = 8; dpt2 = 4; setup(); }
if (key == '8') { dph = 3; dpt1 = 3; dpt2 = 5; setup(); }
if (key == '9') { dph = 6; dpt1 = 2; dpt2 = 6; setup(); }
if (key == '0') { dph = 2; dpt1 = 4; dpt2 = 2; setup(); }
if (key == 'z') {
cl1 = 'hsla(132, 98%, 50%, 0.5)'; cl2 = 'hsla(187, 98%, 50%, 0.5)';
cl3 = 'hsla(132, 98%, 50%, 0.5)'; cl4 = 'hsla(187, 98%, 50%, 0.5)';
cl5 = 'hsla(60, 100%, 55%, 0.5)'; cl6 = 'hsla(0, 100%, 60%, 0.5)';
setup();
}
if (key == 'x') {
cl1 = 'hsla(24, 100%, 64%, 0.5)'; cl2 = 'hsla(60, 100%, 55%, 0.5)';
cl3 = 'hsla(24, 100%, 64%, 0.5)'; cl4 = 'hsla(60, 100%, 55%, 0.5)';
cl5 = 'hsla(120, 60%, 50%, 0.5)'; cl6 = 'hsla(210, 100%, 60%, 0.5)';
setup();
}
if (key == 'c') {
cl1 = 'hsla(270, 100%, 80%, 0.5)'; cl2 = 'hsla(20, 100%, 70%, 0.5)';
cl3 = 'hsla(270, 100%, 80%, 0.5)'; cl4 = 'hsla(20, 100%, 70%, 0.5)';
cl5 = 'hsla(120, 60%, 50%, 0.5)'; cl6 = 'hsla(210, 100%, 60%, 0.5)';
setup();
}
}