Math - Linear Interpolation

lerp.js

/**
 * This gist is for Javascript beginners.
 * @author: Anthony Du Pont <antho.dpnt@gmail.com>
 * @site: https://www.twitter.com/JsGists
 *
 * Linear Interpolation is a method to add some natural behaviors to your animations. The more natural
 * your animations look like, the better will be the look-and-feel. But what's Linear Interpolation ?
 *
 * Linear Interpolation, also called `lerp`, is a way of easing your animation. Imagine you want to
 * move a box from a position A to a position B. Without the Linear Interpolation, you box will 
 * instantly switch from the position A to the position B. But if you add the Linear Interpolation
 * your box will smoothly go from the position A to the position B.
 *
 * This is a way of creating inertia in your animations.
 *
 * Example:
 * I have a point following the mouse and I want it to smoothly move from the last position of my
 * mouse to the new position by using Linear Interpolation.
 *
 * Note: 
 * I am using a Canvas but you don't have to use canvas if you want to create a Linear Interpolation
 * in Javascript. Read the documentation about the basics of Canvas if something isn't clear to you.
 **/

// First we create our canvas and get its context.
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');

// We set its dimensions
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;

// Then we append it to our DOM
document.body.appendChild(canvas);

// We need to create some variables we will use later. 2 variables to store the mouse position 
// and 2 other variables to store the circle position.
let sx = 0;
let sy = 0;

let dx = 0;
let dy = 0;

// Then we add a mousemove event to our body.
document.body.addEventListener('mousemove', mousemove);

function mousemove(e) {
  // We only update the mouse position everytime the mouse moves.
  sx = e.offsetX;
  sy = e.offsetY;
}

// We start a `requestAnimationFrame` loop to render our moving circle.
// Get more informations about `requestAnimationFrame` in episode #6 of
// "Gist for Javascript Beginners".
window.requestAnimationFrame(render);

function render() {
  // Now we have our mouse position we can create a Linear Interpolation between the current
  // position of our circle and the mouse position. This will smoothly move our circle from
  // its position to the mouse position. Check the method below for more explanations about
  // the 3 parameters and play with them to see the difference.
  dx = lerp(dx, sx, 0.1);
  dy = lerp(dy, sy, 0.1);
  
  // Then we draw our circle to its new position.
  context.clearRect(0, 0, width, height);
  context.beginPath();
  context.arc(dx, dy, 10, 0, Math.PI * 2, false);
  context.fill();
  context.closePath();
  
  // And we loop again.
  window.requestAnimationFrame(render);
}

// This is our Linear Interpolation method. It takes 3 parameters:
// a: The starting value
// b: The destination value
// n: The normal value (between 0 and 1) to control the Linear Interpolation
//
// If your normal value is equal to 1 the circle will instantly switch from A to B.
// If your normal value is equal to 0 the circle will not move.
// The closer your normal is to 0 the smoother will be the interpolation.
// The closer your normal is to 1 the sharper will be the interpolation.
function lerp(a, b, n) {
  return (1 - n) * a + n * b;
}