dagfooyo

I'm doing some jitter animation in Javascript and am trying to find a lightweight interpolation function that I can apply across many different variables in the animation - x, y, rotation, brightness, etc. The idea is to have several animation states, then to hit "animate" and have it flow smoothly between them. Currently it goes linearly and therefore looks jerky.

Ideally the function would smooth across any number of points, so that whether there's 2 or 10 the objects flow smoothly from one state to another. Anybody done anything like this and have a function they could send? Or a link to code on the topic? Much appreciated.

I'm doing some jitter animation in Javascript and am trying to find a lightweight interpolation function that I can apply across many different variables in the animation - x, y, rotation, brightness, etc.  The idea is to have several animation states, then to hit "animate" and have it flow smoothly between them.  Currently it goes linearly and therefore looks jerky.

Ideally the function would smooth across any number of points, so that whether there's 2 or 10 the objects flow smoothly from one state to another.  Anybody done anything like this and have a function they could send?  Or a link to code on the topic?  Much appreciated.


interpolation-function

I'm working on a max javascript for interactive graphics myself and my plan for today is implementing spline interpolator in javascript. The idea is to do something along the lines of:

x: new Spline( [[0,0], [1,5], [2,3], [3,3.5]] ), // pairs are [time, x]

y: new Spline( ..... ), // pairs are [time, y]

var pos = [ interp.x.calc(now), interp.y.calc(now) ]; // calculates x and y corresponding to current time

If that sounds useful to you, I could paste the implementation of Spline later today.

var interp = {
x: new Spline( [[0,0], [1,5], [2,3], [3,3.5]] ), // pairs are [time, x]
y: new Spline( ..... ), // pairs are [time, y]
};
...
var now = /* current animation time */;
var pos = [ interp.x.calc(now), interp.y.calc(now) ]; // calculates x and y corresponding to current time

If that sounds useful to you, I could paste the implementation of Spline later today.


initial version (not the API from sample above) of the spline interpolator (javascript attached and a demo patch pasted). I used code from jsxgraph library as a starting point, so current javascript appears to be LGPL contaminated. I guess as I massage it further towards the API I want, it'll loose any resemblance with the original and liberate itself of software freedom.

a new version of the spline interpolator, backward compatible with the previous but also providing a variant of the object oriented API for use from javascript. The interface is a bit different from what I wanted initially:

x: Spline( [[0,0], [1,5], [2,3], [3,3.5]] ), // pairs are [time, x]

y: Spline( ..... ), // pairs are [time, y]

var pos = [ interp.x(now), interp.y(now) ]; // calculates x and y corresponding to current time

 when creating interpolators and calling them is simpler (just 

var interp = {
    x: Spline( [[0,0], [1,5], [2,3], [3,3.5]] ), // pairs are [time, x]
    y: Spline( ..... ), // pairs are [time, y]
};

var now = /* current animation time */;
var pos = [ interp.x(now), interp.y(now) ]; // calculates x and y corresponding to current time

notice, there is no new when creating interpolators and calling them is simpler (just variable(parameter)).


oops, the problem with posting untested code - line 93 was unnecessary and broken. Just delete it if you want to use the OO-like (or is it functional?) API.

yet another bug fixed and API is further simplified (arguments to Spline() don't have to be in the array) , this time with an extra javascript that shows how to use Spline(...) api. You can test it from patch (upper right corner).

interpolation function?