let pieces = []; let pallete = ["#067bc2","#84bcda","#ecc30b","#f37748","#d56062"]; function setup() { createCanvas(windowWidth, windowHeight); rectMode(CENTER); newForm(); } function draw() { background(0); for (let i=0; i 50 && h > 50) { rectRec(x, y, w, h); } else { pieces.push(new Piece(x + w/2, y+h/2, w, h)); } } } } function newForm() { let w = width*0.5; let h = height*0.5; let x = (width-w)/2; let y = (height-h)/2; pieces.length = 0; rectRec(x, y, w, h); } function easeInOutQuart(t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; } //--------------------------------------------------------------- class Piece { constructor(x, y, w, h) { this.pos0 = createVector(x, y); this.pos = this.pos0; this.center = createVector(width / 2, height / 2); this.vec1 = p5.Vector.sub(this.pos0, this.center); this.vec2 = p5.Vector.mult(this.vec1, 2); this.pos1 = p5.Vector.add(this.center, this.vec2); this.w0 = w*0.5; this.h0 = h*0.5; this.w = this.w0; this.h = this.h0; this.w1 = w; this.h1 = h; this.maxT = 100; this.t = -int(random(this.maxT)); this.t0 = 0; this.t1 = this.t0+130; this.t2 = this.t1+50; this.t3 = this.t2+70; this.t4 = this.t3+(this.maxT+this.t)+10; this.t5 = this.t4+70; this.t6 = this.t5+80; this.t7 = this.t6+30; this.lines = []; this.drawLine = new DrawLine(x, y, this.w0, this.h0, this.t0, this.t1, this.t); this.col0 = color("#ffffff"); this.col1 = color("#000000"); this.col2 = color(random(pallete)); this.fCol = this.col1; this.sCol = this.col0; } show() { if (this.t1 < this.t) { stroke(this.sCol); fill(this.fCol); rect(this.pos.x, this.pos.y, this.w, this.h); } else { this.drawLine.run(); } } move() { if (this.t1 < this.t && this.t < this.t2) { this.pos = p5.Vector.lerp(this.pos0, this.pos1, this.easing(this.t1, this.t2 - 1)); } if (this.t2 < this.t && this.t < this.t3) { //noStroke(); let amt = this.easing(this.t2, this.t3-1); this.fCol = lerpColor(this.col1, this.col2, amt); this.w = lerp(this.w0, this.w1, amt); this.h = lerp(this.h0, this.h1, amt); } if (this.t4 < this.t && this.t < this.t5) { this.sCol = lerpColor(this.col0, this.col2, this.easing(this.t4, this.t5 - 1)); this.pos = p5.Vector.lerp(this.pos1, this.pos0, this.easing(this.t4, this.t5 - 1)); } if (this.t6 < this.t && this.t < this.t7) { let alph = lerp(255, 0, this.easing(this.t6, this.t7 - 1)); this.sCol.setAlpha(alph); this.fCol.setAlpha(alph); } this.t++; } run() { this.show(); this.move(); } easing(start, end) { let amt = map(this.t, start, end, 0, 1); return easeInOutQuart(amt, 0, 1, 1); } } //------------------------------------------------------- class DrawLine { constructor(x, y, w, h, start, end, current) { let hw = w/2; let hh = h/2; this.startP1 = createVector(x-hw, y-hh); this.endP1 = createVector(x+hw, y-hh); this.pos1 = this.startP1; this.startP2 = createVector(x+hw, y-hh); this.endP2 = createVector(x+hw, y+hh); this.pos2 = this.startP2; this.startP3 = createVector(x+hw, y+hh); this.endP3 = createVector(x-hw, y+hh); this.pos3 = this.startP3; this.startP4 = createVector(x-hw, y+hh); this.endP4 = createVector(x-hw, y-hh); this.pos4 = this.startP4; this.t = current; this.start = start; this.end = end; this.total = end-start; } show() { if (this.start < this.t) { stroke(255); line(this.startP1.x, this.startP1.y, this.pos1.x, this.pos1.y); line(this.startP2.x, this.startP2.y, this.pos2.x, this.pos2.y); line(this.startP3.x, this.startP3.y, this.pos3.x, this.pos3.y); line(this.startP4.x, this.startP4.y, this.pos4.x, this.pos4.y); } } move() { if (this.start < this.t && this.t <= this.end) { let amt = easeInOutQuart(this.t, this.start, this.end, this.total)/this.total; this.pos1 = p5.Vector.lerp(this.startP1, this.endP1, amt); this.pos2 = p5.Vector.lerp(this.startP2, this.endP2, amt); this.pos3 = p5.Vector.lerp(this.startP3, this.endP3, amt); this.pos4 = p5.Vector.lerp(this.startP4, this.endP4, amt); } this.t ++; } run() { this.show(); this.move(); } }

sttfff