Easing Equations Visualisation in Unity

Hi,

Some time ago I was motivated to write a front end visualisation in Unity that graphs and plots the motions of 40 common ease equations. The idea being to make it easier to understand specific ease functions and the motions they produce. Although many ease equation motions are intuitive to understand others are more complex, while some have subtle differences between them, thus benefiting from having a real-time graph to watch.

So I figured I might as well release the project and source as others might find it useful.

• GitHub link.
• Webgl link.

The source contains the ease equations class ( source - Robert Penner ) that can be used in your own projects. It also contains the visualisation front end that allows you to view the graphs in a grid or fullscreen, as well as optionally displaying a column of 'drawers' down the right side that when you roll-over with the mouse will ease in or out illustrating the motion of that particular ease equation.


Update 25.07.2017
Added support for converting the ease equations into Unity animation curves. This includes code to do the conversion ( might be useful starting point for generalized conversion code ), a custom Unity Curve Preset Library containing all the curves ( this was hand-made as there appears to be no easy way to do this via code) and a monobehaviour test component so you can try out different settings.

The conversion isn't the greatest, it doesn't appear that there is a straight-forward or maybe even possible method to convert the ease equations into Unity curves. This means the curves are generated with more key-frames than is strictly required, however the accuracy is pretty good.

The demo and documentation jave been updated allowing you to toggle between displaying the ease or animation curve graphs, you can even overlay them on top of each other to check for visual differences.

Below is an example of the animation curve graphs, with white dots showing keyframes.

 

Yeah nice and some of the sites like http://easings.net/ don't really give the full overview of them all in action at the same time which helps... so this is useful thanks.

Made a small gif to go with the package..

 

yeah i like how that gif shows the comparison against the linear curve as well, never used the site or that lib, but have written many of theses eases myself, and since its pure math the implementations are pretty similar anywhere you see them.

Though as of late i find my self just using the AnimaitonCurve in unity and save curve presets to the project for others to use.

 

Thanks for the gif. I made a few of them from the demo video and tried to embed it in my original post but they all exceeded the max file size on the forum. Didn't occur to me to make a small one of just the ease graphs.I'll look into that or just use your one if you don't mind

 

Yeah i'm in two minds about code vs animation curves myself. Keep meaning to run some performance tests. The only problem is i'm not sure how you could add these ease equations to an animation curve?

 

The maths for most curves are faster than AnimationCurve which has to support several conditionals along the evaluation of the curve. So if you were doing intensive work, these would be much faster. I use AnimationCurve where I need precise results that maths can't otherwise describe.

 

Yeah good point, though I still like the idea of having access to these for animation curves or to writing into animations.

 

or where you just want to be able to easily tune how it works in editor and do it by feel. But yeah 100% the AnimationCurve is way more intensive than easing

 

i dont mind

 

The orange flags make it confusing. Can you turn off all the orange bits? I would have circles instead of flags shapes but thats just me. The flag shapes make me look to where its pointing.

 

Updated the project to enable conversion of the ease equations into Unity animation curves.

Its far from perfect, but the generated curves are pretty accurate, good enough to use I think.

More details in the original post update.

Updated animated gif of the visualization.

 

Interestingly enough a simple polynomial can represent any curve to any degree of precision over a finite domain. Which means if you do need the math version there are ways and means to get it.

I tend to prefer animation curves myself, because they tend to be far simpler to use and tweak then math.

 

@Kiwasi If you have resources for absolute noob about curve fitting I'm open!

 

If you are willing to cheat, you can fit most curves pretty well with Excel.

1. Open excel
2. Put your x data in column A and your y data in column B
3. Highlight the data
4. Insert a scatter graph
5. Right click the data in the graph
6. Click Add Trendline
7. Check the Display Equation on chart box at the bottom of the dialogue
8. Choose an appropriate equation. A polynomial of a high enough order will always fit the data over the domain given.

A few caveats on the polynomial technique

• A polynomial of high enough order can be fitted to any data, but for some curves the order of the polynomial will be higher then practical.
• The polynomial will give a reasonable approximation within the domain of the data given.
• The polynomial will give completely useless results outside of the domain of data provided. Never extrapolate with a polynomial generated this way.

There are plenty of more advanced techniques for curve fitting. But probably 90 percent of the models* I work with in the day job use a simple polynomial curve.

* Engineering models, not game dev models.

 

Good old Neumann (I didn't realize this was him - he, the father of my favorite research!)

"With four parameters I can fit an elephant, and with five I can make him wiggle his trunk."

 

I'm quite a fan of: http://www.xuru.org/rt/pr.asp

Excellent for doing linear, polynomial, etc regression.

Very useful for those situations you just can't solve the maths but you have samples to derive a polynomial