const ColorPalette = Object.freeze({ "colorT": "#50d0d0", "colorM": "#be1e3e", "colorK": "#7967c3", "colorH": "#ffc639", "colorN": "#255699", "colorS": "#aeb49c" }); var trails = []; var colors = []; function setup() { createCanvas(windowWidth, windowHeight); background(color(ColorPalette.colorN)); colors.push(color(ColorPalette.colorT)); colors.push(color(ColorPalette.colorM)); colors.push(color(ColorPalette.colorK)); colors.push(color(ColorPalette.colorH)); } function draw() { background(color(ColorPalette.colorN)); if(trails.length == 0){ var tCoef1 = random(100, 1000); var tCoef2 = random(100, 1000); for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ var x = width/18 + width/2 + (i-2) * 160; var y = height/18 + height/2 + (j-2) * 160; setTimeout(addTrail, i*tCoef1+j*tCoef2, x, y, colors[(i+j)%4]); } } } for(var i = trails.length-1; i >= 0; i--){ trails[i].update(); trails[i].display(); if(trails[i].isFinished()){ trails.splice(i, 1); } } } function easeInOutExpo(x) { return x === 0 ? 0 : x === 1 ? 1 : x < 0.5 ? pow(2, 20 * x - 10) / 2 : (2 - pow(2, -20 * x + 10)) / 2; } function addTrail(x, y, col) { trails.push(new RectTrail(x, y, 100, col, 0)); } function RectTrail(x, y, len, col, a){ this.isReverse = (random(1) > 0.5); this.centerPos = createVector(x, y); this.col = col; this.len = len; this.vertices = []; this.angle = QUARTER_PI; for(var i = 0; i < 4; i++){ var angle = (TWO_PI/4)*i; var vx = cos(angle + a) * this.len; var vy = sin(angle + a) * this.len; this.vertices.push(createVector(vx, vy)); } this.pointPos = this.vertices[0].copy(); this.time = 0.0; this.trail = []; this.fillPos1 = this.vertices[0].copy(); this.fillPos2 = this.vertices[0].copy(); this.fillPos3 = this.vertices[0].copy(); this.fillPos4 = this.vertices[0].copy(); this.update = function(){ this.time += 1.0/30.0; if(0.0 <= this.time && this.time < 1.0){ this.pointPos.x = lerp(this.vertices[0].x, this.vertices[1].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[0].y, this.vertices[1].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(1.0 <= this.time && this.time < 2.0){ this.pointPos.x = lerp(this.vertices[1].x, this.vertices[2].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[1].y, this.vertices[2].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(2.0 <= this.time && this.time < 3.0){ this.pointPos.x = lerp(this.vertices[2].x, this.vertices[3].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[2].y, this.vertices[3].y, fract(this.time)); this.trail.push(this.pointPos.copy()); } else if(3.0 <= this.time && this.time < 4.0){ this.pointPos.x = lerp(this.vertices[3].x, this.vertices[0].x, fract(this.time)); this.pointPos.y = lerp(this.vertices[3].y, this.vertices[0].y, fract(this.time)); this.trail.push(this.pointPos.copy()); this.pointAlpha = lerp(255, 0, fract(this.time)); } else if(6.0 <= this.time && this.time < 7.0){ this.fillPos1.x = lerp(this.vertices[0].x, this.vertices[1].x, easeInOutExpo(fract(this.time))); this.fillPos1.y = lerp(this.vertices[0].y, this.vertices[1].y, easeInOutExpo(fract(this.time))); this.fillPos2.x = lerp(this.vertices[0].x, this.vertices[3].x, easeInOutExpo(fract(this.time))); this.fillPos2.y = lerp(this.vertices[0].y, this.vertices[3].y, easeInOutExpo(fract(this.time))); this.fillPos3.x = lerp(this.vertices[0].x, this.vertices[1].x, easeInOutExpo(fract(this.time))); this.fillPos3.y = lerp(this.vertices[0].y, this.vertices[1].y, easeInOutExpo(fract(this.time))); this.fillPos4.x = lerp(this.vertices[0].x, this.vertices[3].x, easeInOutExpo(fract(this.time))); this.fillPos4.y = lerp(this.vertices[0].y, this.vertices[3].y, easeInOutExpo(fract(this.time))); } else if(8.0 <= this.time && this.time < 9.0){ this.fillPos3.x = lerp(this.vertices[1].x, this.vertices[2].x, easeInOutExpo(fract(this.time))); this.fillPos3.y = lerp(this.vertices[1].y, this.vertices[2].y, easeInOutExpo(fract(this.time))); this.fillPos4.x = lerp(this.vertices[3].x, this.vertices[2].x, easeInOutExpo(fract(this.time))); this.fillPos4.y = lerp(this.vertices[3].y, this.vertices[2].y, easeInOutExpo(fract(this.time))); } else if(12.0 <= this.time && this.time < 13.0){ this.fillPos3.x = lerp(this.vertices[2].x, this.vertices[1].x, easeInOutExpo(fract(this.time))); this.fillPos3.y = lerp(this.vertices[2].y, this.vertices[1].y, easeInOutExpo(fract(this.time))); this.fillPos4.x = lerp(this.vertices[2].x, this.vertices[3].x, easeInOutExpo(fract(this.time))); this.fillPos4.y = lerp(this.vertices[2].y, this.vertices[3].y, easeInOutExpo(fract(this.time))); } else if(14.0 <= this.time && this.time < 15.0){ this.fillPos1.x = lerp(this.vertices[1].x, this.vertices[0].x, easeInOutExpo(fract(this.time))); this.fillPos1.y = lerp(this.vertices[1].y, this.vertices[0].y, easeInOutExpo(fract(this.time))); this.fillPos2.x = lerp(this.vertices[3].x, this.vertices[0].x, easeInOutExpo(fract(this.time))); this.fillPos2.y = lerp(this.vertices[3].y, this.vertices[0].y, easeInOutExpo(fract(this.time))); this.fillPos3.x = lerp(this.vertices[1].x, this.vertices[0].x, easeInOutExpo(fract(this.time))); this.fillPos3.y = lerp(this.vertices[1].y, this.vertices[0].y, easeInOutExpo(fract(this.time))); this.fillPos4.x = lerp(this.vertices[3].x, this.vertices[0].x, easeInOutExpo(fract(this.time))); this.fillPos4.y = lerp(this.vertices[3].y, this.vertices[0].y, easeInOutExpo(fract(this.time))); } else if(this.time > 17.0){ this.trail.splice(0, 1); } } this.display = function(){ smooth(true); rectMode(CENTER); strokeWeight(10); drawingContext.shadowOffsetX = 15; drawingContext.shadowOffsetY = 15; drawingContext.shadowBlur = 10; drawingContext.shadowColor = color(0); stroke(this.col); // fill(color(ColorPalette.colorN)); noFill(); push(); translate(this.centerPos.x, this.centerPos.y); rotate(this.angle); beginShape(); stroke(this.col); noFill(); for(var i = this.trail.length-1; i >= 0; i--){ vertex(this.trail[i].x, this.trail[i].y); } endShape(); beginShape(); noStroke(); fill(this.col); vertex(this.vertices[0].x, this.vertices[0].y); vertex(this.fillPos1.x, this.fillPos1.y); vertex(this.fillPos3.x, this.fillPos3.y); vertex(this.fillPos4.x, this.fillPos4.y); vertex(this.fillPos2.x, this.fillPos2.y); vertex(this.vertices[0].x, this.vertices[0].y); endShape(CLOSE); pop(); } this.isFinished = function(){ return (this.time > 4.0) && (this.trail.length == 0); } }

FillRectTrail