let c1; let c2;

​

// circle 

let r = 150;

let angle = 0; let amt = 0; 

let loc = 0; let interval = 4;

​

function setup() {

  createCanvas(400, 400);

  c1 = color('#634AFF');

  c2 = color('#FF5631');

  c3 = color('#FDF48A');

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

​

  // block 

  block(0, width, 0, height);

  // circle

  translate(width/2, height/2);

  circleGradient(angle, 360);

  angle = loc + easeInQuint(amt) * 360/interval;

​

  if (amt > 1) {

    amt = 0;

    loc += (360/interval);

    if (angle > (360 * 3)) {

      loc = 0;

    } 

  } else {

    amt += 0.01;

  }

}

​

function block(min, range, y, h) {

  let m = 0.3;

​

  let x0 = 0;

  let x1 = m;

  let x2 = 0.5;

  let x3 = 1-m;

  let x4 = 1;

  setGradientBlock(min + x0*range, min + x1*range, c1, c2, y, h);

  setGradientBlock(min + x1*range, min + x2*range, c2, c3, y, h);

  setGradientBlock(min + x2*range, min + x3*range, c3, c2, y, h);

  setGradientBlock(min + x3*range, min + x4*range, c2, c1, y, h);

}

​

function circleGradient(min, range) {

  let m = 0.25;

​

  let x0 = 0;

  let x1 = m;

  let x2 = 0.5;

  let x3 = 1-m;

  let x4 = 1;

  setGradientCircle(min + x0*range, min + x1*range, c1, c2);

  setGradientCircle(min + x1*range, min + x2*range, c2, c3);

  setGradientCircle(min + x2*range, min + x3*range, c3, c2);

  setGradientCircle(min + x3*range, min + x4*range, c2, c1);

​

}

​

function setGradientBlock(x, w, c1, c2, y, h) {

  for (let i = x; i <= w; i++) {

    let inter = map(i, x, w, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(i, y, i, y + h);

  }

}

​

function setGradientCircle(startingAngle, endingAngle, c1, c2) {

  for (let i=startingAngle; i<endingAngle; i+=2) {

    let inter = map(i, startingAngle, endingAngle, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    let x = r*cos(i);

    let y = r*sin(i);

    line(0, 0, x, y);

  }

}

​

​