let circles = []; // let colors = ["#ffffff", "#ED4141", "#FECA16", "#2B8BDF", "#159670"]; let colors = ['#ff595e', '#ffca3a', '#8ac926', '#1982c4','#e70012', '#fef100', '#ef70a8', '#e5007f', '#49acd1', '#70499c']; let bg, pbg; function setup() { createCanvas(900, 900); rectMode(CENTER); bg = color(0); pbg = color(255); init(); } function draw() { background(bg); for(let i of circles){ i.run(); } let e = 300; let t = frameCount % e; pbg.setAlpha((norm(t, 0, e) ** 30) * 255); background(pbg); if(t == e - 1){ init(); } } function init(){ circles = []; let seg = 20; let w = width / seg; let d = w * 0.5; for(let i=0; i 0)this.show(); this.move(); } } class Circle02 extends Circle01{ constructor(x, y, d){ super(x, y, d); this.x0 = x + width * random(-1, 1) * 0.5; this.y0 = y + height * random(-1, 1) * 0.5; this.x1 = x; this.y1 = y; this.x = this.x0; this.y = this.y0; } move(){ if(0 < this.t && this.t < this.t1){ let amt = easeOutCirc(norm(this.t, 0, this.t1 - 1)); this.x = lerp(this.x0, this.x1, amt); this.y = lerp(this.y0, this.y1, amt); this.d = lerp(this.d0, this.d1, amt); } this.t ++; } } class Circle03 extends Circle01{ constructor(x, y, d){ super(x, y, d); this.d = d; this.alph = 0; this.aa = 0; this.ang = random(TAU); this.sw = width*0.002; this.pm = (int(random(2))*2) - 1; } show(){ this.col.setAlpha(this.alph); fill(this.col); noStroke(); circle(this.x, this.y, this.d); push(); this.col.setAlpha(255); noFill(); stroke(this.col); strokeWeight(this.sw); translate(this.x, this.y); scale(this.pm, 1); rotate(this.ang); arc(0, 0, this.d - this.sw, this.d - this.sw, 0, this.aa); pop(); // arc(th); } move(){ if(0 < this.t && this.t < this.t1){ let amt = norm(this.t, 0, this.t1 - 1); this.alph = lerp(0, 255, easeInCubic(amt)); this.aa = lerp(0, TAU, easeOutCubic(amt)); } this.t ++; } } class Circle04 extends Circle01{ constructor(x, y, d){ super(x, y, d); this.ang = 0; this.crn = 0; this.aa = 5 * ((int(random(2))*2)-1); } show(){ push(); translate(this.x, this.y); rotate(this.ang); fill(this.col); noStroke(); square(0, 0, this.d, this.crn); pop(); } move(){ if(0 < this.t && this.t < this.t1){ // let amt = easeOutElastic(norm(this.t, 0, this.t1 - 1)); // let amt = easeOutCubic(norm(this.t, 0, this.t1 - 1)); let amt = norm(this.t, 0, this.t1 - 1); this.ang = lerp(0, TAU*this.aa, amt); this.d = lerp(this.d0, this.d1,easeOutCubic(amt)); this.crn = lerp(0, this.d/2, easeInCubic(amt)); } this.t ++; } }