let mix = 0;

let easing = 0.05; // 1.0 to 0

​

let size = 25;

let initialSize = size;

let backgroundColor = 255; 

​

function setup(){  

  colorA = color('#8F28A1'); // warm purple color

  colorB = color('#3BEDB7'); // mint green color

}

​

function draw() {

  background(backgroundColor);

  let mixTarget = map(size, initialSize, max(windowWidth, windowHeight) * 1.5, 0.0, 1.0);

  mix = mix + ((mixTarget - mix) * easing);

  let easedColor = lerpColor(colorA, colorB, mix);

  createCanvas(windowWidth, windowHeight);   

  fill (easedColor);

  ellipse(width/2, height/2, size, size);

  if (keyIsPressed && keyCode == 32) {

    if (size <= max(windowWidth, windowHeight) * 1.5){

      size+= 15;

    } else if (size >= max(windowWidth, windowHeight) * 1.1) {

        backgroundColor = easedColor;

        background(backgroundColor);

        console.log(easedColor);

    }

  } else {

      if (size > initialSize){

        size -= 15;

      }

    }

}