Tag Archives: curve

I have just finished a bezier timing algorithm, and I’ll give a small description here.

I will be using the bezier values a linear stepping value in a loop… layman’s terms: a counter that counts up evenly, 0,1,2,3 or 0,2,4,6, etc.

There are methods to do this in the iPhone SDK but I already wrote half of the code, and it wasn’t much effort to complete.  Plus, I looked up the CAMediaTimingFunction class, and it seemed too complicated just for what I wanted (just an in-and-out structure).

So all I did is this: create a 100-element array.

.. and it gets a bit complicated, so here’s the code to build the array:

float t;
int i;
CGPoint bpoints[1000];
CGPoint bypoints[100];
for (i = 0; i < 1000; i++) {
 t = i / 1000.0f;
 bpoints[i].x = (1-t)*(1-t)*(1-t)* 0  + 3*(1-t)*(1-t)*t*0.5 + 3*(1-t)*t*t* 0.5 + t*t*t*1.0;
 bpoints[i].y = (1-t)*(1-t)*(1-t)* 0  + 3*(1-t)*(1-t)*t*0.05 + 3*(1-t)*t*t* 0.95 + t*t*t*1.0;
}
for ( transitionTimeStep =0; transitionTimeStep < 100; transitionTimeStep++) {
 float closest = 1.1;
 int closestI = -1;
 // Find the index in bpoints where .x is the closest to the transitionTimestep percent
 for (int x = 0; x < 1000; x++) {
  if ( fabs( bpoints[x].x - ( transitionTimeStep /100.0f)) < closest) {
   closest = fabs( bpoints[x].x - ( transitionTimeStep /100.0f));
   closestI = x;
  }
 }
 bypoints[transitionTimeStep] = bpoints[closestI].y;
}

The first loop creates a high-resolution set of points on a quadratic bezier curve (see Wikipedia’s page for Bezier curves) where the 4 points are between 0.0 and 1.0.  The points (0,1,2,3) have the following x,y coordinates:

• 0,0
• 0.5, 0.05
• 0.5, 0.95
• 1.0, 1.0

If a person even multiplied these values by 100 and then used a program like Adobe Illustrator, the curve would look something vaguely like a capitol letter S.  Rather, it’s actually more like a forward-slash /  and little curves at the top and bottom .

So I collect the high-resolution points of the line, and then loop through my time-step array.  For every element in the time-step array, I examine every x-coordinate value of the bpoints array.  If the value is closest to the current time-step index value, then I save the bpoints array y-coordinate value.

Yes, this seems very complicated now, but when I was doing it, it seemed very easy.  I guess sometimes I just get on a roll and create complicated stuff.

Also, I know there are better ways to do this, but I only want a look-up table and when I see it in live operation before typing this post, it works beautifully.

An important note!  The bpoint array is VERY important.  It is not good to simply create an exact-resolution array and fill it with values.  I did that at first, and found that there were too many indexes being dropped, that when the timing animation was run, there was a lot of choppy movement, like if the smooth slope of the curve was suddenly turned into a staircase of jagged edges.

So, creating the higher-resolution array first and then scanning it for the closest x value was the logical solution.  Perhaps I could have done it with a 200 element array, but I didn’t try it.

The process only takes a split-second, and it’s only done once at the beginning of the program.

That’s all, take care everyone.