forms = []; let colors = ["#ed3441", "#ffd630", "#329fe3", "#154296", "#000000"]; function setup() { createCanvas(750, 750); rectMode(CENTER); addForms(); } function draw() { background(255); for (let f of forms) { f.run(); } if (frameCount % (60 * 7) == 0) { forms.length = 0; addForms(); } } function addForms() { let seg = 4; let w = width / seg; for (let i = 0; i < seg; i++) { for (let j = 0; j < seg; j++) { let x = i * w + w / 2; let y = j * w + w / 2; forms.push(new Form(x, y, w, w)); } } } function easeOutQuart(t) { return 1 - (--t) * t * t * t } function easeInQuint(t) { return t * t * t * t * t } function easeOutElastic(t) { let s = 1.70158; let p = 0; let a = 1; if (t == 0) return 0; if ((t /= 1) == 1) return 1; if (!p) p = 0.3; if (a < abs(1)) { a = 1; let s = p / 4; } else s = p / (2 * PI) * asin(1 / a); return a * pow(2, -10 * t) * sin((t * 1 - s) * (2 * PI) / p) + 1; } class Form { constructor(x, y, w) { this.x = x; this.y = y; this.w = w; this.w0 = w; this.w1 = w / 2; this.t = -80; this.t0 = this.t; this.t1 = 20; this.t2 = 80 + this.t1; this.t3 = 20 + this.t2; this.t4 = 80 + this.t3; this.t5 = 30 + this.t4; this.offx = this.w / 4; this.offy = this.w / 4; this.a = int(random(2)) * PI * 0.5; this.rdc = 0; this.col = random(colors); } show() { let hw = this.w0 / 2; let cor = 10; push(); translate(this.x, this.y); rotate(this.a); noStroke(); fill(this.col); if (this.t < this.t1) { square(0 + this.offx, 0 + this.offy, hw * this.rdc, cor); square(0 - this.offx, 0 + this.offy, hw * this.rdc, cor); square(0 + this.offx, 0 - this.offy, hw * this.rdc, cor); square(0 - this.offx, 0 - this.offy, hw * this.rdc, cor); } if (this.t1 <= this.t && this.t < this.t3) { rect(0, 0 + this.offy, this.w * this.rdc, hw * this.rdc, cor); rect(0, 0 - this.offy, this.w * this.rdc, hw * this.rdc, cor); } if (this.t3 <= this.t) { rect(0, 0 + this.offy, this.w0 * this.rdc, this.w1 * this.rdc, cor); } pop(); } move() { if (this.t < 0) { let nor = norm(this.t, this.t0, -1); let ease = easeOutElastic(nor); this.rdc = lerp(0, 0.9, ease); } if (0 <= this.t && this.t < this.t1) { let nor = norm(this.t, 0, this.t1 - 1); let ease = easeInQuint(nor);; this.offx = lerp(this.w / 4, 0, ease); this.w = lerp(this.w0, this.w0 / 2, ease); } if (this.t1 <= this.t && this.t < this.t2) { let nor = norm(this.t, this.t1, this.t2 - 1); let ease = easeOutElastic(nor); this.w = lerp(this.w0 / 2, this.w0, ease); } if (this.t2 <= this.t && this.t < this.t3) { let nor = norm(this.t, this.t2, this.t3 - 1); let ease = easeInQuint(nor);; this.offy = lerp(this.w / 4, 0, ease); } if (this.t3 <= this.t && this.t < this.t4) { let nor = norm(this.t, this.t3, this.t4 - 1); let ease = easeOutElastic(nor); this.w1 = lerp(this.w0 / 2, this.w0, ease); } if (this.t4 <= this.t && this.t < this.t5) { let nor = norm(this.t, this.t4, this.t5 - 1); let ease = easeInQuint(nor); this.rdc = lerp(0.9, 0, ease); } this.t++; } run() { this.show(); this.move(); } }

201217