Lerp: Linear Interpolation Function

I have found the lerp function to be really useful when creating animation to make things transition smoothly.

function lerp(start, end, t) {
  return (1 - t) * start + t * end;
}

Many demo can be created from this, but for now here's a example how to transition between 2 colors in Canvas.

See it on CodePen

Full demo code:

const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');

function lerp(start, end, t) {
  return (1 - t) * start + t * end;
}

function lerpColor(from, to, t)
{
    var color = {r:0, g: 0, b: 0};

    color.r = lerp(from.r, to.r, t);
    color.g = lerp(from.g, to.g, t);
    color.b = lerp(from.b, to.b, t);

    return color;
}

var now, last, t;
var duration = 2000;
var current = 0;
var colorA = {
  r: 0,
  g: 250,
  b: 250
};
var colorB = {
  r: 255,
  g: 0,
  b: 255,
};

function draw() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  
  now = performance.now();
  var dt = now - last;

  current += dt;
  last = now;
  t = current/duration;
  
  if (current>duration) {
    t = 0;
    current = 0;
    var c = colorA;
    colorA = colorB;
    colorB = c;
  }
  
  var CC = lerpColor(colorA, colorB, current/duration);

  context.fillStyle = `rgba(${CC.r}, ${CC.g}, ${CC.b}, 1.0)`;
  context.fillRect(0, 0, canvas.width, canvas.height);
  
  context.restore();
  
  window.requestAnimationFrame(draw);
}

// start
last = performance.now();
window.requestAnimationFrame(draw);