let r = 150; let angle = 0;

let amt = 0; let loc = 0;

​

function setup() {

  createCanvas(400, 400);

  rectMode(CENTER);

  c1 = color('#634AFF');

  c2 = color('#FF5631');

  c3 = color('#FDF48A');

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

//   fill(c1);

//   rect(100, height/2, 80, 80); 

//   fill(c2);

//   rect(300, height/2, 80, 80); 

//   let amt = map(mouseX, 0, width, 0, 1);

//   let c3 = lerpColor(c1, c2, amt);

//   fill(c3);

//   rect(200, height/2, 80, 80); 

  setRectGradient(0, width/4, c1, c2);

  setRectGradient(1*width/4, 2*width/4, c2, c3);

  setRectGradient(2*width/4, 3*width/4, c3, c2);

  setRectGradient(3*width/4, 4*width/4, c2, c1);

  translate(width/2, height/2); 

  setEllipseGradient(0 + angle, 90 + angle, c1, c2);

  setEllipseGradient(90 + angle, 180 + angle, c2, c3);

  setEllipseGradient(180 + angle, 270 + angle, c3, c2);

  setEllipseGradient(270 + angle, 360 + angle, c2, c1);

  angle = loc + easeInQuad(amt) * 90; 

  if (amt > 1) {

    amt = 0;

    loc += 90;

  } else {

    amt += 0.01;

  }

​

}

​

function setRectGradient(min, max, c1, c2) {

  for (let i=min; i<max; i++) {

    let amt = map(i, min, max, 0, 1);

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

    stroke(c);

    line(i, 0, i, height);

  }

}

​

function setEllipseGradient(min, max, c1, c2) {

  for (let i=min; i<max; i++) {

    let amt = map(i, min, max, 0, 1);

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

    stroke(c);

    let x = r*cos(i);

    let y = r*sin(i); 

    line(0, 0, x, y)

  }

}

​

​