let light, dark, mid, col;

let timer = 0;

let radius = 0;

let radius2 = 250;

let p1, p2, p3;

​

function easing(a, b, t) {

  let c1 = 1.70158;

  let c2 = c1 * 1.525;

  return a + (t < 0.5 ? (pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2)) / 2 : (pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2) * (b - a);

}

​

function easingCol(a, b, t) {

  return color(easing(red(a), red(b), t), easing(green(a), green(b), t), easing(blue(a), blue(b), t));

}

​

function setup() {

  frameRate(60);

  createCanvas(400, 400);

  light = color(116, 133, 212);

  dark = color(67, 88, 148);

  mid = color((116+67)/2, (133+88)/2, (212+148)/2);

  p1 = createVector(width / 2, height / 2);

  p2 = createVector(width / 2, height / 2);

  p3 = createVector(width / 2, height / 2);

}

​

function draw() {

  background(255);

  timer++;

  if (CURRENT == 0) {

    if (timer > 45) {

      timer = 0;

      CURRENT = 1;

    }

  }

  if (CURRENT == 0) {

    radius = easing(0, 250, timer / 45);

    col = easingCol(color(255), mid, timer / 45);

    push();

    noStroke();

    fill(col);

    ellipseMode(CENTER);

    circle(width / 2, height / 2, radius);

    pop();

  } else if (CURRENT == 1) {

    push();

    noStroke();

    fill(mid);

    ellipseMode(CENTER);

    circle(p1.x, p1.y, radius2);

    circle(p2.x, p2.y, radius2);

    circle(p3.x, p3.y, radius2);

    pop();

  }

}