You Are Here Home > C/C++

C/C++

Animation Curves and Tweening; Understanding Animation Curves

These equations are by Robert Penner, you can find a document here that explains this in much greater detail:
http://www.robertpenner.com/easing/

The correct linear tween function looks like this:

float linear_tween(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return t * end + (1.0f - t) * start;
}

t is the time since the start of animation started and it has to be between 0 and 1, start and end are the values that you want to interpolate between them…

To understand this equation you can so something very simple, assume start is 1 and end is 20, then at timestep 0 you will have:

0 * end + (1 – 0) * start => start

At time step 1 which is the end of your animation you get:

1 * end + (1 – 1) * start => end

And all the values between these are going to be interpolated linearly.

Now quadratic ease in function is where the changes in interpolated value are smaller in the beginning and larger at the end, how can we achieve this? We can do it by faking the time steps, if you we could somehow make it so that the time steps would look smaller to the linear tween function at the start of the animation and larger at the end, then we would achieve this, that way, in the beginning, the time steps look smaller so the function will change the value by just a little bit but at the end, the time steps look larger so the function will change the value by a larger amount.

The way to do this is very easy, the fact that the time step number is clamped to between 0 and 1 will help us in this case and this is the solution:

float quadratic_easein(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return linear_tween(t * t, start, end);
}

When we multiply the time step by itself the numbers that are less than one get smaller, for example if you are at the time step 1/10th of a second:

1/10 * 1/10 => 1/100
2/10 * 2/10 => 4/100 (3/100 change)
3/10 * 3/10 => 9/100 (5/100 change)
4/10 * 4/10 => 16/100 (7/100 change)

8/10 * 8/10 => 64/100
9/10 * 9/10 => 81/100 (17/100 change)

Now let’s look at quadratic_easeout:

float quadratic_easeout(float t, float start, float end)
{
    if (t > 1.0f) return end;
    return linear_tween(2 * t - t * t, start, end);
}

Deriving 2*t – t*t is very easy knowing the fact above; to do this we need to reverse what happens above so we can do something:

t = 1 – t;

Now 1/10 becomes 9/10 so when we do:

t = t * t

The numbers are going to change more at the beginning of the time step but the problem is that now we converted 1/10 to 9/10 and t*t will result in 81/100 and that’s the end of our time step and the animation will play backwards, to fix it we need to do:

t = 1 – t

One more time so then 81/100 becomes 19/100, now let’s simplify this:

1 – t => 1 – t * t => 1 – ((1 – t) * (1 – t)) => 1 – (1 – t – t + t * t) => 2 * t – t * t

I hope this helps :)

Animation Curves and Tweening; Understanding Animation Curves
Comments (1)   Filed under: C Programming,C/C++,Mac,Objective-C,OpenGL   Posted by: Hamid

SQLite And The Problem Of Storing Long Long Integers

Recently, I was trying to store a very large integer value in a SQLite column, it didn’t matter wether I used INTEGER or UNSIGNED BIG INT, SQLite rounded it for me and I was left with an integer value that wasn’t even close to what I needed.

So one solution was to just use a VARCHAR or TEXT or event a BLOB and insert the number with quotes around it but guess what? SQLite did it again!!!

It turns out that SQLite tries to convert your values to ints to give you some benefits with sorting and comparing etc. – in case you didn’t know you really wanted an int rather than a BLOB – and that happens here in one of it’s functions:

/*
** Try to convert a value into a numeric representation if we can
** do so without loss of information.  In other words, if the string
** looks like a number, convert it into a number.  If it does not
** look like a number, leave it alone.
*/
static void applyNumericAffinity(Mem *pRec){
  if( (pRec->flags & (MEM_Real|MEM_Int))==0 ){
    double rValue;
    i64 iValue;
    u8 enc = pRec->enc;
    if( (pRec->flags&MEM_Str)==0 ) return;
    if( sqlite3AtoF(pRec->z, &rValue, pRec->n, enc)==0 ) return;
    if( 0==sqlite3Atoi64(pRec->z, &iValue, pRec->n, enc) ){
      pRec->u.i = iValue;
      pRec->flags |= MEM_Int;
    }else{
      pRec->r = rValue;
      pRec->flags |= MEM_Real;
    }
  }
}

The solution to this issue is to prepend a 0 to your number and use a BLOB or TEXT type column and insert it like this: ’0THEVERYLARGENUMBER’

Don’t get me wrong, SQLite is a great library that I’ve been using, it’s very well tested and works great, it’s fast and thread safe, I specially like it’s licensee:

/*
** 2001 September 15
**
** The author disclaims copyright to this source code.  In place of
** a legal notice, here is a blessing:
**
**    May you do good and not evil.
**    May you find forgiveness for yourself and forgive others.
**    May you share freely, never taking more than you give.
**
*************************************************************************

I hope this helps…

SQLite And The Problem Of Storing Long Long Integers
Older Posts »