const interval = 100; const n = 10; const cp = ["#F15946", "#5681CB", "#FAAA2D", "#296647", "#453945"] let w; let tex; let timeline; function setup() { w = min(windowWidth, windowHeight); createCanvas(windowWidth, windowHeight); background(255); rectMode(CENTER); tex = strTex(); timeline = { "canvasScale" : floor(random(5)), //4 "canvasAngle" : floor(random(5)), //1 "offsetScaleX" : floor(random(5)), //3 "offsetScaleY" : floor(random(5)), //4 "angle" : floor(random(5)), //0 "weight" : floor(random(5)) //2 } } function draw() { const period = floor(frameCount / interval); const progress = (frameCount % interval) / interval; background(255); const canvasScale = map(period < timeline.canvasScale+1 ? period < timeline.canvasScale ? 0 : easeOutQuint(progress) : 1, 0, 1, 7, 0.35) + map(min(frameCount/interval, 5), 0, 5, 0.5, 0); const canvasAngle = (period < timeline.canvasAngle+1 ? period < timeline.canvasAngle ? 0 : easeOutCubic(progress) : 1) * TAU; push(); translate(width / 2, height / 2); rotate(canvasAngle); scale(canvasScale); const s = w / n / 2; const scl = 0.7; for (let i = -n+0.5; i < n; i++) { for (let j = -n+0.5; j < n; j++) { const offsetX = i * s; const offsetY = j * s; const offsetScaleX = period < timeline.offsetScaleX+1 ? period < timeline.offsetScaleX ? 0 : easeOutCubic(progress) : 1; const offsetScaleY = period < timeline.offsetScaleY+1 ? period < timeline.offsetScaleY ? 0 : easeOutCubic(progress) : 1; const x = offsetX * offsetScaleX; const y = offsetY * offsetScaleY; const angle = (period < timeline.angle+1 ? period < timeline.angle ? 0 : easeOutCubic(progress) + noise(i, j) * sin(progress * PI) : 1) * TAU; const weight = period < timeline.weight+1 ? period < timeline.weight ? 0.01 : easeOutCubic(progress) : 1; const c = red(tex.get(offsetX+w/2, offsetY+w/2)) < 100 ? 255 : cp[floor(noise(i, j, 4279)*100)%cp.length]; noStroke(); fill(c); push(); translate(x, y); rotate(angle); rect(0, 0, s*scl, s*weight*scl); pop(); } } pop(); } function strTex(str= "FIN"){ let tex = createGraphics(w, w); tex.background(255); tex.textAlign(CENTER, CENTER); tex.textFont("Helvetica"); tex.textSize(w*0.5); tex.fill(0); tex.text(str, w/2, w/2); return tex; } function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); } function easeOutQuint(x) { return 1 - Math.pow(1 - x, 5); }

generative short animation