## Wednesday, May 8, 2013

### Bounce timing / easing function

Working on our next game the graphic designer designed one of the animations in such a way that I needed to write special timing function. There is big block falling from top of the screen, that bounces several times and stays still. I wanted to enrich my engine with function that will not only do this job, but will be also useful in future. I ended with flexible function that produces bounces based on given parameters and on the next lines I will describe it step by step.

#### Parameters & result

I will start with brief gallery of achieved results. The function takes four parameters:
•  duration of whole effect in seconds,
•  number of bounces (actually how much times the floor is touched),
•  elasticity,
•  whether to start the first bounce from floor or from top
You can call the function with all four parameters set but if you want for example bounce three times and stay still then you can omit elasticity (set to -1) and the function will calculate it for you. On the following pictures is what I am exactly writing about - I am asking to produce such a curve that it should take 3 seconds and 3 bounces and then the bouncing object will stay still. In first case I want to start it from top (for example something may fall from off screen region into visible area) and in the second case I want to make it jump from bottom:

In the first of following two I am saying, that I want 3 seconds again, elasticity 0.5 and start from top. I do not know how many bounces is necessary to leave the object on floor. But the function calculates for me it is 8 of them and calculates the speed of move to squeeze it into 3 seconds.
In the second I am setting the elasticity over 1 so I will overshot 0.0-1.0 output range and so I have to define the number of bounces else the function would try to squeeze infinite number of bounces into three seconds. It ends itself only when zero height is reached or when requested number of bounces is met.

Look at the header file below. You will see we are defining some variables, constants and functions. The constants will limit our function to 10 bounces as well as it defines epsilon error value that will be explained during implementation.
The variables holds the ones needed for whole function - as its duration, number of bounces, elasticity, calculated acceleration and so on. And it also holds values specific for every single bounce - its duration, initial velocity and height. Yes, the resulting function faces itself for programmer as single function but it is inside series of individual consecutive bounces.
The functions are simple getters (imagine you are calling with unknown number of bounces in initialization; you can ask then how many of them was calculated) and functions that set and return the height based on duration progress.

One remark: the function is taken from my cross-platform engine (you can read other posts regarding it on this blog) so do not get confused with specific namespaces. Rewrite them with yours or delete it.

#ifndef TIMINGBOUNCE_H_
#define TIMINGBOUNCE_H_

#include "../../System/system.h"

namespace SBC
{
namespace Engine
{

class TimingBounce
{
public:
static const u32 BOUNCES_MAX = 10;
static const f32 EPSILON;
static const f32 INTERNAL_HEIGHT;

public:
TimingBounce();
virtual ~TimingBounce();

public:
void initialize(f32 aDuration, s32 aBounces, f32 aElasticity = -1.0f, bool aHalveFirstBounce = true);
f32 getActual();

// getters
f32 getDuration();
f32 getDurationProgress();
s32 getBounces();
f32 getElasticity();
f32 getAcceleration();

private:
// duration of function
f32 mDuration;
// actual position in duration
f32 mDurationProgress;

// number of bounces
s32 mBounces;
// elasticity - how high is next amplitude
f32 mElasticity;
// acceleration for requested parameters
f32 mAcceleration;
// start from peek or from bottom
bool mHalveFirstBounce;

// duration of particular bounces
f32 mBounceDuration[BOUNCES_MAX];
// height of particular bounces
f32 mBounceHeight[BOUNCES_MAX];
// bounce velocity
f32 mBouceVelocity[BOUNCES_MAX];
};

} /* namespace Engine */
} /* namespace SBC */
#endif /* TIMINGBOUNCE_H_ */


#### Implementation

Next follows the implementation. It is cut into pieces and described and explained step by step:

We simply start with defining some of the constants. The EPSILON is error member and is set to 1, which is in most cases 1 pixel on the screen. The INTERNAL_HEIGHT is defined as 1000. The function inside calculates the height of bounces in range 0-1000 and this is then normalized into 0-1 before vales are returned to client.

Constructor simply sets initial values. Actually undefined elasticity (-1.0f) and zero number of bounces are together invalid parameters.

#include "TimingBounce.h"

#undef LOG_TAG
#define LOG_TAG  "TimingBounce"

namespace SBC
{
namespace Engine
{

using namespace SBC::System::MathUtils;

const f32 TimingBounce::EPSILON = 1.0f;
const f32 TimingBounce::INTERNAL_HEIGHT = 1000.0f;

//------------------------------------------------------------------------
TimingBounce::TimingBounce()
{
mDuration = 0.0f;
mDurationProgress = 0.0f;
mBounces = 0;
mElasticity = -1.0f;
mAcceleration = 0.0f;
mHalveFirstBounce = false;
}

//------------------------------------------------------------------------
TimingBounce::~TimingBounce()
{
}


Now comes the initialize function where most of the fun takes place:

//------------------------------------------------------------------------
void TimingBounce::initialize(f32 aDuration, s32 aBounces, f32 aElasticity, bool aHalveFirstBounce)
{
// check parameters validity
if (aBounces <= 0 && aElasticity < 0.0f)
{
LOGE("Invalid parameters (aBounces = %i, aElasticity = %f)", aBounces, aElasticity);
return;
}
else if (aDuration < 0.0f)
{
LOGE("Duration cannot be less than zero");
return;
}


First we check whether input parameters are correct. Either one of aBounces or elasticity must be defined (bounces higher than zero and / or elasticity also higher than 0).

 // calculate missing parameters
// if defined bounces but not elasticity
if (aBounces > 0 && aElasticity < 0.0f)
{
aElasticity = Math::pow(EPSILON / INTERNAL_HEIGHT, 1.0f / aBounces);

}
// if defined elasticity but not bounces
else if (aElasticity > 0.0f && aBounces <= 0)
{
if (aElasticity >= 1.0f)
{
LOGE("Elasticity must be less than 1");
return;
}

// EPSILON = aElasticity ^ aBounces ... aBounces = log_aElasticity EPSILON = ln EPSILON / ln aElasticity
aBounces = Math::log(EPSILON / INTERNAL_HEIGHT) / Math::log(aElasticity);
}


If we know the number of bounces and elasticity is unknown we have to calculate it. It will have such a value that after requested number of bounces the potential next bounce would had its height less or equal to EPSILON. It comes from calculation:

$\mathit{elasticity}={\mathit{\left(EPSILON}/\text{INTERNAL_HEIGHT)}}^{1/\mathit{bounces}}$

In second case the unknown are the bounces so the calculation is:

$\mathit{bounces}=\frac{\mathrm{log}\left(\text{EPSILON}/\text{INTERNAL_HEIGHT}\right)}{\mathrm{log}\left(\mathit{elasticity}\right)}$

Now when we know the parameters we can save it:

 // store parameters
mDurationProgress = 0.0f;
mBounces = aBounces;
mElasticity = aElasticity;
mHalveFirstBounce = aHalveFirstBounce;


But with the parameter above we still do not know how much time the function will take. We request some time but we do not know the speed. So, we have to calculate it. As the whole function is not a single function but internally it is sequence of functions we will choose some random speed to calculate how much time each bounce takes and calculate the total time
Each bounce takes 2 times the result of:

$\mathit{height}=\frac{1}{2}\mathit{acceleration}\ast {\mathit{time}}^{2}$

$\mathit{time}=\sqrt{\frac{2\ast \mathit{height}}{\mathit{acceleration}}}$

Two times because we have to reach the top of bounce and then the same time it takes to fall down.

 // get "some" acceleration and calculate time for bounces
f32 acceleration = INTERNAL_HEIGHT / 1000.0f;
f32 totalDuration = 0.0f;
f32 height = INTERNAL_HEIGHT;
for (s32 i = 0; i < mBounces; i++)
{
// s = 1/2 a * t^2 ... 2s / a = t^2 ... sqrt(2s / a) = t
f32 duration = Math::sqrt(2 * height / acceleration) * 2;

if (mHalveFirstBounce && i == 0)
duration /= 2;

mBounceDuration[i] = duration;
mBounceHeight[i] = height;

totalDuration += duration;
height *= mElasticity;
}


Let's say that the total duration resulted in 340 seconds with some initial velocity. This is more than 100 times more than we requested. But as we have the time ratio between the bounces we can adjust it to our requested time:

 // adjust total duration to fit requested duration
mDuration = 0.0f;
for (s32 i = 0; i < mBounces; i++)
{
f32 duration = mBounceDuration[i] * aDuration / totalDuration;
mBounceDuration[i] = duration;
// sum up to avoid imprecision
mDuration += duration;
}


Now, when we are in requested time limit, we have to calculate the acceleration that will help us to achieve it (again the same formula is used but the unknown is the acceleration this time):

 // calculate new acceleration
f32 firstHalfBounceDuration = mHalveFirstBounce ? mBounceDuration : mBounceDuration / 2;
// s = 1/2 a * t^2 ... 2s / t^2 = a
mAcceleration = (2.0f * INTERNAL_HEIGHT) / (firstHalfBounceDuration * firstHalfBounceDuration);


Finally we can calculate the parameters for each bounce:

 // calculate initial bounce velocities
for (s32 i = 0; i < mBounces; i++)
{
// v = v0 + at ... on the top of bounce the v equals zero => v0 = -at
// if bounce starts halved (on top) than its initial velocity is zero
// halve duration of each bounce (as it contains the way up and down)
if (i == 0 && aHalveFirstBounce)
mBouceVelocity[i] = 0.0f;
else
mBouceVelocity[i] = mBounceDuration[i] / 2.0f * mAcceleration;
}

// change the sign of acceleration to point downwards
mAcceleration = -mAcceleration;


The debug output is now commented out:

 // debug output
/*
LOGD("Bounces: %i, Elasticity: %f, Acceleration: %f, Duration: %f, HalveFirstBounce %s",
mBounces, mElasticity, mAcceleration, mDuration, mHalveFirstBounce ? "true" : "false");
for (s32 i = 0; i < mBounces; i++)
{
LOGD("Bounce %i: height = %f, duration = %f, velocity = %f",
i, mBounceHeight[i], mBounceDuration[i], mBouceVelocity[i]);
}
*/
}


The function is initialized now so we can start using it. There are three function - one tracks current position within requested time and is called tick(). Its parameter is time elapsed from last frame so you can feed it with your game loop timing steps. The second takes the value for current position and the last one returns value from any requested position. this one is the most important one and it is the place where things happens:

//------------------------------------------------------------------------
{

// return actual value
return getAt(mDurationProgress);
}

//------------------------------------------------------------------------
f32 TimingBounce::getActual()
{
return getAt(mDurationProgress);
}

//------------------------------------------------------------------------
{
// check time bounds
if (aDurationProgress < 0.0f)
else if (aDurationProgress > mDuration)


After check of bounds we have to find index of the bounce we are currently in:

 s32 index = 0;
f32 totalDuration = 0.0f;

// get index to particular bounce
while(index < mBounces && aDurationProgress > totalDuration + mBounceDuration[index])
{
totalDuration += mBounceDuration[index];
++ index;
}

// get duration within bounce (if not the first one)


and then we can calculate the height in range 0 - INTERNAL_HEIGHT and normalize it to 0-1:

 f32 height = 0.0f;
if (index == 0 && mHalveFirstBounce)
{
// height = height + 1/2 * mAcceleration * aDurationProgress^2
height = INTERNAL_HEIGHT + mAcceleration * (aDurationProgress * aDurationProgress) / 2.0f;

}
else
{
// height = mBounceVelocity * aDurationProgress + 1/2 * mAcceleration * aDurationProgress^2
// height = aDurationProgress * (mBounceVelocity + 1/2 * mAcceleration * aDurationProgress)
height = aDurationProgress * (mBouceVelocity[index] + (mAcceleration * aDurationProgress) / 2.0f);
}

return height / INTERNAL_HEIGHT;
}


For completeness here are also getter functions:

//------------------------------------------------------------------------
f32 TimingBounce::getDuration()
{
return mDuration;
}

//------------------------------------------------------------------------
f32 TimingBounce::getDurationProgress()
{
return mDurationProgress;
}

//------------------------------------------------------------------------
s32 TimingBounce::getBounces()
{
return mBounces;
}

//------------------------------------------------------------------------
f32 TimingBounce::getElasticity()
{
return mElasticity;
}

//------------------------------------------------------------------------
f32 TimingBounce::getAcceleration()
{
return mAcceleration;
}

} /* namespace Engine */
} /* namespace SBC */


#### Usage

To demonstrate the use our bouncing function all you have to do for example is something like this (this will produce the output you have seen on the first graph):

 TimingBounce b;
b.initialize(3.0f, 3, -1.0f, true);

for (f32 i = 0.0f; i < 3.0f; i = i + 0.01f)
LOGD("height: %f", b.tick(0.01f));


#### Conclusion

So, we created bouncing function that is flexible enough. It also hides all its details (series of functions) inside and the user just initializes it with desired values. You can download the source here.