@@ -0,0 +1,88 @@
/**
* 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 ;
}
Anthodpnt created this gist