Ease-in / ease-out formula

Moho allows users to write new tools and plugins. Discuss scripting ideas and problems here.

Moderators: Víctor Paredes, Belgarath, slowtiger

Post Reply
User avatar
Rhoel
Posts: 844
Joined: Fri Feb 25, 2005 8:09 am
Location: Phnom Penh, Cambodia
Contact:

Ease-in / ease-out formula

Post by Rhoel »

Okay, as pomised, here is the formula for calculating ease-in/out fairings.

The formula is straight forwards, 'elegant' as a collegue just remarked. The theory behind is it is just mind-numbing so I'll leave the docmentation and graphics till later.

The formula used conventional trigonometry, the kind of mathmatics the ancient Greeks would be damn familiar with. Unfortunately, I'm not that old and it took me a while before I stumbled upon the right solution.

The only key thing to remember is the maximum velocity of any move is 100%. In the formula, 100% has a value of 1. If you want to join the fairing up to a linear move with a velocity/ distance value of, say 4.75, then you must multiple the values from the fomula by 4.75. In that way, the frame preceeding/folowing the linear move can only be less.

If you know the distance (37.5 cm) for a move ( with 6 frames ease-in. linear component of 12 and an ease-out of 8) but don't know how to find all the values, its easy.

Assume the linear move is 1.00. Add up the accummulative values of the ease-in and ease out fairings, then add that to the linear move total (1.0 * 12 frames) You should have something like 5.3 + 12 + 7.7 units (not cm or frames). Your total is 25 distance units of unknown scale.

All you have to do now is divide 30cm but 20 and you have a linear move of 1.5 cm. Multiply all the fairing values by this and you'll have a pan bang on length, with smooth accelerations and decellerations, and no speed jumps at the takeover point.

Okay here is the code.

Code: Select all

# -------------------------------------------------
#             Radian based Fairings
#         Version: 1.02, Date: 2006-01-26
#              (c)2006 T.J Francis
#             tim.francis@hotmail.com
# --------------------------------------------------
# Open Licence - this formula may be reproduced and
# incorported in to any application as you wish.
#
# The only conditions for use and re-use are:
#      *Credit must be is given to the formula's
#         author, i.e., me.
#      *If distributed, it must be done for free.
#---------------------------------------------------

#--- Preamble --------------------------------------
# This calculation is based on the maxim that the
# maximum velocity can only be 1 (ie, 100%).
#---------------------------------------------------

# --- variables / initialize variables -------------
Fairing_frames  = 8
velocity_unit = 0.0
degree_unit = 90/(Fairing_frames + 1)
frame_degree = 0.0
frame = 0

# -------------------------------------------------------------------
#   velocity unit = math.cos(math.radians(90/(Fairing_frames + 1)))
# -------------------------------------------------------------------

print ""
print "-------------------------"
print "  Radian based Fairings"
print "-------------------------"
import math
for frame in range(Fairing_frames+1):
    velocity_unit = 1 - math.cos(math.radians(frame_degree))
    print " fr:", '%3.0d' % frame, "  Vel: ", '%6.3f' % velocity_unit
    if frame == 0: print ""
    frame_degree = frame_degree + degree_unit

print ""
velocity_unit = 1 - math.cos(math.radians(frame_degree))
print " fr:", '%3.0d' % (frame + 1), "  Vel: ", '%6.3f' % velocity_unit
print "-------------------------"

Okay, I'm off down the bar for a beer and a cuddle (I said I'm in Thailand) as I think I've deserved a little reward for this.

Any problem, ask.

I'll do the graphics tomorrow.

Regards

Rhoel
User avatar
Rhoel
Posts: 844
Joined: Fri Feb 25, 2005 8:09 am
Location: Phnom Penh, Cambodia
Contact:

Re: Ease-in / ease-out formula

Post by Rhoel »

Okay, here is a sample set of figures which can be used for the vertical component of the bouncing ball exercise.

fr - v.Pos
----------
0: 0.000
1: 0.174
2: 0.342
3: 0.500
4: 0.643 Slow_out fairing
5: 0.766
6: 0.866
7: 0.940
8: 0.985
9: 1.000 ---------
10: 0.985
11: 0.940
12: 0.866
13: 0.766
14: 0.643 Slow_ in fairing
15: 0.500
16: 0.342
17: 0.174
18: 0.000

Just cycle the last frame back to frame one for an endless loop.

As for the maths, if you find the calculation is giving you the numbers in reverse of what you need, change the formula to one of the following variations.

velocity_unit = math.cos(math.radians(frame_degree))
velocity_unit = math.sin(math.radians(frame_degree))
velocity_unit = 1 - math.sin(math.radians(frame_degree))

Although I have made all the diagrams and demo .swf files, I cannot upload to my server from here ... I'll have to do it Monday from the other office.

I'm off to catch a plane to visit my girlfriend for the weekend. And no, I definately am not taking any homework with me!.

Enjoy playing with the bouncing ball exercise .. the figures above work well.

Rhoel
User avatar
bupaje
Posts: 1175
Joined: Fri Nov 12, 2004 5:44 pm
Location: California
Contact:

Post by bupaje »

Just a quick thank you for your efforts and sharing.
[url=http://burtabreu.animationblogspot.com:2gityfdw]My AnimationBlogSpot[/url:2gityfdw]
User avatar
Rhoel
Posts: 844
Joined: Fri Feb 25, 2005 8:09 am
Location: Phnom Penh, Cambodia
Contact:

Post by Rhoel »

Image
Here is the theory behind the formula.

The first diagram shows the basic problem to be solved. A move can be described both in distance, time and graphically as velocity. The velocity is the bit we need to resolve. It has 3 components ... an acceleration, a constant velocity element and a decleration component. The linear section is easy to calculate, just time x speed.

Calculating the accelerations/decelerations (or fairings) is what we are interested in. Look at the illustration on the lower right - here you see I have divided the quarter circle into equal parts. From each interception of the arc, I have dropped a vertical line down to the base line.

Now look at the increments ... it's a nice mathmatical progression, starting small than gradually to the maximum speed. Fortunately, mathmenticians better than I resolved all the angles and relationship maths centuries ago. We know it as good old fashioned triganometry. The relevant formulas involved here are sine and cosine formulas.

In this bottom left diagram, the angle marked X is measured in radians. (In the computer formula, I have used 90 degrees and the converted those to radians before finding the sine or cosine. Its just easier to understand what is going on if we non-mathmeticians think in degrees).

The key thing to remember is the length of the line OQ is 1. This is vitally important ... 1 is also mathmatical value of 100%: Half speed is 50% or just (maximum speed x 0.5). It makes no difference whether we have 5 fairing frames or 30: USing the sin means all the values of the fairing can only be less than 100%. So by multiplying the linear velocity by the value of sin, we then know the velocity for that angle.

I have taken the demonstration output given above and created a buncing ball excercise. The scene is first built so that the ball bounces on the spot. The up movement is a slow out, the down movement a slow in fairing. Its cycled so it will continue forever. A shadow helps gives scale to the hieght.

The direction, distance covered and the final scale are governed by just two sets of keyframes on the XY, scale timeline (of the top level Ball Group folder): This means the ball and shadow group are moved on just one timeline and not on many sub-folder timelines: Keeping it simple like this is just good compositing practice. It makes changes later so simple.

Click here for the Moho Bouncing Ball demo scene
(If it opens as a text document, try [save link as ...] or [Save target as ...])

This is the scene as a Flash replay:
Clcik her efor the Bouncing Ball Flash replay

The beauty of the calcuation is it will work with multiple moving elements, with everything moving in proportional sync.

I'll leave the formula explanation here before it becomes too confusing. There are practical implementation issues for programmers but that is beyond this open discussion. The whole maths thing looks complicated. In practice its not and I hope all this work will eventually find it's way into the code.

Having a good fairing engine will allow the bouncing ball to look "right". More importantly, it will permit taht kind of Warners extreme animation action made so famous in Bugs Bunny, Road Runner and the rest of their crazy crew.

And I for one, like crazy extreme action animation.

Roll on Moho 5.4.

Rhoel.
Post Reply