Various ease in / ease out through functions

I saw this link:

Easing Equations

or

Robert Penner Easing Equations

and was trying to get the quadratic ease out to work but couldn't figure out a certain section of code marked in bold :

// quadratic easing out - decelerating to zero velocity

Math.easeOutQuad = function (t, b, c, d) {

return -c *(t/=d)*(t-2) + b;

};

How do I translate 't/=d' to C2? I'm basically using trying to move a ball across the screen that eases out to zero velocity.

[Edit] I changed the title from 'Quadratic Easing' to 'Various ease in / ease out through functions'. While I was looking for a single form of ease out, the mighty Yann returned many types of ease ins/outs via functions with an excellent capx example file.

t /= d means t = t / d. basically a shortcut for 'set t to t / d'.

It looks like you copied the function over wrong - the t /= d comes in a separate line on the linked website. I don't see why you put it into the algorithm.

Check out easytween plugin too, has lots of easing functions in easy to use form!

I copied the info from the second link which shows it as being part of the code.

Strange that it's separate in the first link.

Check out easytween plugin too, has lots of easing functions in easy to use form!

Was trying to avoid using a plugin.

A more 'traditional' way to do ease out is to use this formula:

set x to lerp(self.x,destinationx,dt * factor)

same for y.

Thanks sqiddster

I was hoping to create a function sheet collection of ease ins and outs based on Robert Penner's codes and to mimmic the sample screen on the first link.

demo

capx

(Though it wouldn't be hard to make a plugin for that)

Holy smokes Yann that's beautiful!

Just rewrote the thing as in the first link o.o

I'm all smiles <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley4.gif" border="0" align="middle" /> <img src="smileys/smiley36.gif" border="0" align="middle" />

This is brilliant! I love the simplicity of your code. Mine looks like a garbage dump compared to yours <img src="smileys/smiley36.gif" border="0" align="middle" />

Tr?s excellente!

Yann would it be too much to implement these last three easings: Elastic, Back and Bounce to your awesome interpolation.capx?

I made an attempt but was unsuccessful at it.

http://www.robertpenner.com/easing/penner_easing_as1.txt

Darn they don't have the same signature as the others... It might break the cleanliness of my capx /o/

I'll try someday, ring me again in a few days if I didn't pop a new capx.

I'll look for code that comes closer to the the one you based it on.

Yann, found this for bounce, elastic & back. May be a little clearer than the first.

bounce, back & elastic

It starts at line 194.

Also this link

same?

as it looks a bit easier to read. Nonetheless for cross referencing.

It looks a little more involved. Taking a second look, I'm not sure if it could be done since the bounce ease out has multiple 'else's. Am I correct that C2 can only use a single else per condition?

For those who are curious about easing here's another visual example of the various types.