Jump to content

add an easing function to an animation with multiple keys


Flomotion
 Share

Recommended Posts

I made a bezier path for my camera to follow. So I put all points from the CreateCubicBezier into the camera animation. The camera follows the path. But I'd also like the camera to ease in and ease out.

Using the easing function eases in and out for every step in the path. But I want the whole path to have a single ease in/ ease out.

For now I used a function I found somewhere on the internet to place the time of the keyframes. (it's sort of an inversed ease in ease out function)

 

var speedInOut = function(x) {
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) / (sinh(2.5) * 1.82);
};
// supporting math function (not included in the standard javascript Math object)
function sinh(aValue) {
  var myTerm1 = Math.pow(Math.E, aValue);
  var myTerm2 = Math.pow(Math.E, -aValue);
  return (myTerm1-myTerm2)/2;
}

 

It works.. but I'd like to have a bit more smoothing out of the animation.

Is there a native way to add an easing function to an animation with multiple keys?

Link to comment
Share on other sites

Wow!  Hi again, F!  Good to see you.

You seem to be a killer coder, and I am not really qualified to talk, but, take a look at this.

http://playground.babylonjs.com/#HH1U5#6

I hijacked the framework's Animation._interpolate() into the PG.  It's working.  This function calc's a gradient between each key of the animation. 

See line 29?  You could add a feature here... maybe an "easeEndsOnly" boolean flag. 

Then... just before line 30 (or nearby)... add another IF.  In pseudo... IF (easeEndsOnly AND this is the terp between first key and second OR this is the terp between last key and next-to-last key)... then blah blah blah, ELSE no gradient.  Get my drift?   You could add a conditional in there... if current key is NOT 0 and/or if next key is NOT last key... then don't install the gradient between these two keys.

terp = interpolation :)  terpin' time.  heh

That's terrible explaining... sorry.  I think you can understand. 

AND... your suggestion is darned good IMHO, so... you/we should consider adding the easeEndsOnly flag... permanently.  When easeEndsOnly is set true... things like easeIN, easeOut and easeInOut... will only graduate (gradiate? heh)... the first and last keys.  Gradiator?!  :D  

Boy, I'm goofy tonight. 

hmmm...  but what if... a person wants to ease-in across the first 6 keys... then no gradient across 20 keys.... then ease-out across the final 10 keys?  Wow, that would be cool!  Phew.  I'm scared.  :)  Ok bye.

Link to comment
Share on other sites

Hey thanks! Thats a clever way to do it.

 

Let me first correct your assumption about me being a killer coder.. I'm not :-) That complicated calculation is not mine.

I'm from the 3D animation and motion graphics world. But I also love messing around with code. Used to do that with flash (untill Steve Jobs killed it). But now I discovered BabylonJS and all it's possibilities make me very happy.

 

But I think your solution probably won't work for my animation path. Because it's made up of 40 position points close to eachother to get a nice curve. So the distance between the points is very small and an easing gradient on the last point won't make much of a difference.

 

Adding a 'gradiator' function would be a great addition. To be able to set the ease in time in frames and the ease out time in frames.

 

Another nice addition would be an animation points interpolator. So the points in the animation could be interpolated as a bezier curve.

 

:rolleyes:

Link to comment
Share on other sites

Thanks!

 

Yep, I agree with everything you have said, and I understand your situation.  hmm.

 

You know, though, that you DO have a time-related parameter for each key... by using 'frame'.  For example, you could set it so that:

 

- it takes 100 frames to get from key #0 to key #1

- 95 frames from #1 to #2

- 90 frames from #2 to #3

- 85 frames from #3 to #4

etc.  (speeding-up)

 

(I bet you know this already - sorry)

 

This would get you a linear ease-in across many keys, and you could do the inverse for the ease-out.  Not easy, but it can be done.

 

On the other subject (automatically generating keys that follow a Bezier curve)... I went looking at Jerome's BJS implementation of Curve3.  I think this beast has some abilities that could help in this task.  Given a few parameters, this critter can generate a "list" of Vector3's... which COULD be used as the key positions of an animation.

 

I have never tried this... but it seems like it would be plausible.  Curve3 also works in conjunction with another of Jerome's parametric candies... and that's Path3D.

 

Neither of these things had animation in mind when they were created... but I have a feeling that they could be used for such things. 

 

Interesting thinkings, Flomo!  A whole series of experiments could be done, here... based-upon your good ideas.  "How to properly bastardize a Curve3 object."  :)   hmm.  And even a little more hmm.

Link to comment
Share on other sites

Haha, nice.

Your description is exactly what I have done. Using the Curve3 to plot those points into the animation curve.

Then I thought I could use an ease function to increase/decrease the time for all keys. But the ease function should be reversed. Because when easing out, the time should be longer. And the easing function returns a smaller value. (green curve is the one I'm looking for)

 

speed-ease.jpg

 

 

That's what the ease-in-out function above does (thanks to jeroentbt.. somewhere on the web).

 

http://www.wolframalpha.com/input/?i=plot%28f%28x%29+%3D+%28sinh%28%28x+-+0.5%29+*+5%29+%2B+sinh%28-%28x+-+0.5%29%29+%2B+%28sinh%282.5%29+%2B+sin%28-2.5%29%29%29+%2F+%28sinh%282.5%29+*+2%29%2C+x+%3D+[0%2C+1]%29

 

and in action:

http://jsfiddle.net/b6L8M/24/

 

But that math is too complex for me to change the curve. The code below is what I did.. if anyone is interested. But.. if anyone knows a way how to get the green curve with easier math.. that would be very nice :-)

 

curveKeys = the array of curve points from Curve3
        framestep = 1/ (curveKeys.length-1);
        for (i=0; i<curveKeys.length; i++) {
            var frameVal = speedInOut(framestep*i)* traveltime;
            aniKeys.push({frame: frameVal, value: curveKeys});
        }

var speedInOut = function(x) {
    return (sinh((x - 0.5) * 5) + sinh(-(x - 0.5)) + (sinh(2.5) + Math.sin(-2.5))) / (sinh(2.5) * 1.82);
};
// supporting math function (not included in the standard javascript Math object)
function sinh(aValue) {
  var myTerm1 = Math.pow(Math.E, aValue);
  var myTerm2 = Math.pow(Math.E, -aValue);
  return (myTerm1-myTerm2)/2;
}

 

and.. on a personal not: I think you should be consulted everytime a new function name is introduced into BabylonJS. Bastardizing things or unleashing Gradiators sounds like fun :D

Link to comment
Share on other sites

Hi,

 

I'm not a specialist about BJS easing functions so I can't tell anything about them.

 

However, if you want to set your camera speed according to the curve itself, it to say the "curviness" (not sure this word exists) or the distance between successive points, you could then rely on the curve geometry itself.

Example :

You could compute the distance between two successive points of the curve and fix your camera speed from this current distance...

You could also instanciate a Path3D object from your curve, setting the raw parameter to true : http://doc.babylonjs.com/classes/2.2/Path3D (it seems my documentation about this paramater disaperead somewhere the BJS limbo). You will then have access to each tangent and normals computed on each point, these tangents and normals won't be normalized giving an information on both the curviness and distance of the curve on the current point

 

If it's not clear, please use this user function to visualize the path3D, you will understand what I mean : https://github.com/BabylonJS/UserFunctions/blob/master/showPath3D.js

 

how to :

http://www.html5gamedevs.com/topic/14965-user-custom-function-showpath3d/?hl=path3d

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...