JavaScript function interpolation micro-library. Allows for interpolation of any function that handles numeric values(*), with different easing functions to choose from.
- color, time, opacity, distance, rotation, speed, velocity, mass, ...
NOTE: lerppu.js is basically $.animate or CSS3 animation / transition equivalent for canvas.
Updating interpolations
In update loop / function, call:
Lerppu.update(t.time);
Where t.time is the accurate elapsed time since your application started. This makes Lerppu update all interpolations you have defined. If Lerppu.update()
is not called, then Lerppu will not do anything, even if you specify an interpolation.
Creating interpolations
Lerppu.interpolate(v0, v1, t, function(l)
{
// Here l will be the "correct" value you would except from a linear interpolation,
// so for example you could just write player.x = l;
}, easing, lerp_id);
Say you wanted to interpolate the x-position of a "player", you would put the parameters like so:
v0 = player.x
(current x)
v1 = where would you like the player.x
to be after t
has elapsed
t = how long do you want the transition to take
func = function(l) { player.x = l; }
(l is calculated by Lerppu; it is a value going from v0
to v1
in t
amount of time)
easing = Lerppu has these covered, for example Lerppu.easings.lerp2
is valid here
lerp_id = Optional id for the interpolation, in case you would like to cancel it
Multivariable interpolation (as of 20.12.2015)
Lerppu.interpolate([v0a, v0b, v0c, ...], [v1a, v1b, v1c, ...], t, function(l)
{
player.x = l[0];
player.y = l[1];
player.z = l[2];
}, easing, lerp_id);
Stopping / interrupting interpolations
Just call
Lerppu.stop(lerp_id);
Supported easings
Lerppu.easings.lerp / Lerppu.easings.linear
Lerppu.easings.lerp2 / Lerppu.easings.accurateLinear
Lerppu.easings.easeInQuad
Lerppu.easings.easeOutQuad
Lerppu.easings.easeInOutQuad
Lerppu.easings.easeInCubic
Lerppu.easings.easeOutCubic
Lerppu.easings.easeInOutCubic
Lerppu.easings.easeInQuart
Lerppu.easings.easeOutQuart
Lerppu.easings.easeInOutQuart
Lerppu.easings.easeInQuint
Lerppu.easings.easeOutQuint
Lerppu.easings.easeInOutQuint
Demo code (.ip()
is an alias for .interpolate()
):
var ball =
{
x: 100,
y: 100,
r: 15,
c: 'red',
l: 3
}
function lerpEaseInOut()
{
var ivl = setInterval(function()
{
Lerppu.stop('testlerpx');
Lerppu.stop('testlerpy');
Lerppu.ip(ball.x, Math.floor(Math.random() * (800 - ball.r)), 0.5, function(l)
{
ball.x = l;
}, Lerppu.easings.easeInOutCubic, 'testlerpx');
Lerppu.ip(ball.y, Math.floor(Math.random() * (800 - ball.r)), 0.5, function(l)
{
ball.y = l;
}, Lerppu.easings.easeInOutCubic, 'testlerpy');
}, 900);
}
So in the demo we just move the ball from the current ball position to a random one, in 0.5 seconds. This goes on and on every 900 milliseconds.