Code Monkey home page Code Monkey logo

lerppu.js's Introduction

lerppu.js

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.

Usage

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

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.

http://ahvonenj.github.io/lerppu.js

lerppu.js's People

Contributors

ahvonenj avatar

Watchers

James Cloos avatar  avatar

lerppu.js's Issues

Constant speed interpolation option

Interpolations are, by default, done in a constant t and variable speed. There might be a need for variable t, but constant speed interpolation.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.