Search Unity

  1. Calling all beginners! Join the FPS Beginners Mods Challenge until December 13.
    Dismiss Notice
  2. It's Cyber Week at the Asset Store!
    Dismiss Notice

Easing Equations Visualisation in Unity

Discussion in 'General Discussion' started by Noisecrime, Jul 18, 2017.

  1. Noisecrime

    Noisecrime

    Joined:
    Apr 7, 2010
    Posts:
    1,521
    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.


    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.
    Example_04_Curve_1024.png
     
    Last edited: Jul 25, 2017
    rakkarage, Ryiah, Stardog and 8 others like this.
  2. Player7

    Player7

    Joined:
    Oct 21, 2015
    Posts:
    1,450
    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..
     
  3. passerbycmc

    passerbycmc

    Joined:
    Feb 12, 2015
    Posts:
    1,470
    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.
     
    Noisecrime likes this.
  4. Noisecrime

    Noisecrime

    Joined:
    Apr 7, 2010
    Posts:
    1,521
    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
     
  5. Noisecrime

    Noisecrime

    Joined:
    Apr 7, 2010
    Posts:
    1,521
    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?
     
  6. hippocoder

    hippocoder

    Digital Ape Moderator

    Joined:
    Apr 11, 2010
    Posts:
    25,925
    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.
     
    Kiwasi, Ryiah, theANMATOR2b and 2 others like this.
  7. Noisecrime

    Noisecrime

    Joined:
    Apr 7, 2010
    Posts:
    1,521
    Yeah good point, though I still like the idea of having access to these for animation curves or to writing into animations.
     
  8. passerbycmc

    passerbycmc

    Joined:
    Feb 12, 2015
    Posts:
    1,470
    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
     
    theANMATOR2b likes this.
  9. Player7

    Player7

    Joined:
    Oct 21, 2015
    Posts:
    1,450
    i dont mind
     
  10. yoonitee

    yoonitee

    Joined:
    Jun 27, 2013
    Posts:
    2,284
    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.
     
  11. Noisecrime

    Noisecrime

    Joined:
    Apr 7, 2010
    Posts:
    1,521
    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.
    GraphAnimation_1024.gif
     
  12. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,565
    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.
     
  13. neoshaman

    neoshaman

    Joined:
    Feb 11, 2011
    Posts:
    4,659
    @Kiwasi If you have resources for absolute noob about curve fitting I'm open!
     
  14. Kiwasi

    Kiwasi

    Joined:
    Dec 5, 2013
    Posts:
    16,565
    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.
     
    larku, neoshaman and angrypenguin like this.
  15. EternalAmbiguity

    EternalAmbiguity

    Joined:
    Dec 27, 2014
    Posts:
    2,142
    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."
     
    neoshaman and Kiwasi like this.
  16. larku

    larku

    Joined:
    Mar 14, 2013
    Posts:
    1,412
    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 :)
     
    Last edited: Jul 26, 2017
    Kiwasi likes this.