Bezier Curve as Easing Function

I recently wrote with two other authors an article called “Bézier Curve as a Generalization of the Easing Function in Computer Animation” and was accepted for COMPUTER GRAPHICS INTERNATIONAL 2020.

In this text, I want to deal with some misconceptions which I found when I was studying this problem. Let me first introduce two concepts which will be necessary to understand those misconceptions and finally deal with this topic (from my side at least).

First keyframe animation method.

The keyframe animation method is one of the animation methods used in productions. Its roots can be found in traditional hand-drawn animation. The keyframe method is commonly used in all major video production applications and all video game engines. In computer animation, unlike traditional animation, the concept of the keyframe method can be a little bit misleading. It should rather be called a method of key parameters, as the artist only animates those parameters which she or he chooses. These parameters can include more than just object properties such as position, rotation, or scale, but also other parameters such as the material properties of the objects (like color, transparency, etc.).

From a mathematical point of view, a keyframe is an ordered pair (x, y), where the variable x represents a frame number (which is easy translated for a time in animation) and a y represents animated parameter value. The intermediate values between the keyframes are calculated by a computer algorithm which is usually an interpolation function. The slope of the interpolation function determines the rate at which the value of the parameter changes between keyframes. A steep slope indicates that value changes rapidly, and a slight slope indicates that the value changes slowly. In the keyframe method, any function can be used as an interpolation function. With two restrictions. The first function must be deterministic (of course non-deterministic or chaotic/noise function are sometimes in use but the majority of applications in use are only deterministic functions). The second must be presented in the form of a mathematical formula to be ably interpreted by CPU. There is an infinite number of interpolation functions. They can be categorized by their properties like:

·         Interpolation or approximation?

·         What is the computational complexity of the interpolation function?

·         What is the smoothness class of the curve?

·         How to control the shape of the curve?

I don’t want to go into the details because I don’t what this text be too long.

But one of the categorized was done by Robert Penner in his book “Programming Macromedia Flash MX”. These functions simulate the movement of objects at variable speeds. Easing functions are grouped into types with common features, such as smooth start, smooth stop, smooth start and stop. Penner’ Easing functions can be found for example in Qt or Windows Presentation Foundation libraries, or websites that use CSS animation.

Fig_1_ease_v6c.jpg

Of course, the set of Penner's functions is not the only way how easing functions can be categorized and not exhaust this topic.

Another very popular interpolation functions are polynomials or cubic Bézier curve.

Bézier curve

Bézier curve was originally developed for geometry modeling. First, it was developed by Paul de Casteljau, but Citroën which he was working for didn’t publish his study. The second one was Pierre Bézier (hence the name of the curve) which was working for Renault. That allows us to presume that this curve was developed to help with car designing.

james p o'shea

Text about the subject of Computer Graphics can’t be completed without mention the Utah teapot which was originally designed using Bézier surfaces, which are the 3D equivalent of 2D Bézier curves.

But not only in 3D graphics Bézier curves are using. Every glyph of TrueType Fonts is made of quadratic Bézier curve.


In general Bézier curve is defined as a set of n + 1 control points  and its parametric equation:

where is a Bernstein polynomial

In the keyframe animation method, I would like to focus on the cubic Bézier curve as an interpolation function. The Cubic Bézier curve is defined by 4 points  (called handles).

           [1]

In computer animation first and the last point defines start, and finish value and time of key parameter. Manipulating  handles the animator controls the shape of the curve, which translates in keyframe animation method to speed of change of an interpolated parameter.

This curve is very popular in keyframe animation because:

·         sufficiently easy to use for artists to create produces animations by interpolating variable-speed parameters.

·         changing the curve (thus changing the interpolation) is done, very intuitive, by manipulating only positions of  handles.

·         allows combining cubic Bézier curves with up to continuity of .

The equation [1] can be transformed into a set of two at most cubic polynomials shown below (how to calculate coefficients are shown in my paper)

        [2]

The main issue: Graph of the function vs Curve

When the introduction of the topic of this text we have behind as let us focus on the elephant in the room. As you can observe in the text there are a lot of mentions about two words, function (in sense of graph of the function), and curve. And those two words (their meanings) are used by a lot of people interchangeably.

But in mathematic those words (the idea behind them) are not the same. And in the context of keyframe animation, there are not too. In this text I what to show, teach, describe why.

Every graph of the function is a curve, but not every curve is a graph of the function.

What, what, what?? You can say. Let’s read the definition of the function “a function is a rule that associates each element of a set X, to a single element of a set Y”. I particularly bolded the word “single”. (And for those mathematic purists I what to say that I’m aware of multivalued functions, but this problem in this text is not set in complex analysis and topic of complex functions or Riemann’s Surfaces). By the way, a wonderful description of this topic can be found in the Youtube series Imaginary Numbers Are Real. A graph of a function f is the set of ordered pairs (x, y), where f(x) = y. In the common case where x and f(x) are real numbers, these pairs are Cartesian coordinates of points in two-dimensional space and thus form a subset of this plane.

And now the definition of the curve.

“A curve is the image of a continuous function from an interval to a topological space.”

I know by just reading those definitions it is hard to understand my point. So let’s see those definitions in action.

On the pictures below I show a few graphs of the functions.

 

And now some curves that will help prove my point.

 

Can you see the difference?

Yes, a graph of the function cannot have arcs or loops, spirals, or be closed. This is why they are a subset of curves.

But we hear, read, watch that curves can be interpolated. Yes of course we can do that. But what in the narrow problem of keyframe animation interpolation the curve means? And how this problem corresponds, in particular, to the cubic Bézier curve as an interpolation function, which is very common in animation editors?


To show my point lets take a cubic Bézier curve parametrization from above, what happens when we interpolate by “t” value? (In my observation a lot of people by mistake are taking this parameter as a time.)  The result is represented in the animation below by a moving blue dotted line.

As I mentioned at the beginning of this presentation in the keyframe animation method x-axis represents the passage of time. And this behavior is shown as a moving green dotted line. As we can see interpolation by “t” value isn’t the same as the “x” coordinate. This means that the parametrization of the cubic Bézier curve from above cannot be used directly as an interpolation function in the keyframe animation method.

So a new parametrization of the cubic Bézier curve is needed and we want to switch from a parametric description to a description of the function of one variable, where a time-dependent function or an easing function is used.

               [3]

where  it is inverse of  function.

And this simple formula [3] will make that switch possible. Now function C(x) is the new parameterization of the Bézier curve, which can be used as an easing function. In my article, we call function g as the internal function, and the function f the external function.

Fig3a.png Fig3b.png

With the cubic Bézier curve as an interpolation function, we must deal with the following problem. Depending on the position of the  handles of the cubic Bézier curve those curves shown on the slide are possible to make.

As I show earlier those kinds of trajectories cannot be described as a graph of the function. And this goes in pair with the context of the keyframe animation method where the x-axis is treated as time, and for example, cubic Bézier curves shown above, interpolating by “x” coordinate will imply "time looping". Which is of course are not allowed.

This fact is telling us that not all forms of cubic Bézier curves are allowed for as an easing function in keyframe animation, but only those that meet this condition.

              [4]

This condition guarantees that the internal function will be a strictly increasing function, which means that it will be invertible in the range that is important to this problem. By introducing this condition will make that a function C(x) will be correctly defined. Curves will not have arcs or       s.

To be precise also, a weaker condition is acceptable.

             [5]

For C(x) functions that meet this condition, it is permissible for one inflection point to be present in the presented range. But in this case, we are not dealing with the local extreme, because the condition of changing the sign of the first derivative of the function at the stationary point is not fulfilled.

 

Cubic Bézier curve as an interpolation function

Text Box: Figure 8 The allowed area for restriction on the coordinates x_P1(point P_1) and x_P2(point P_2)

In my paper, I describe the condition in which the inner function must fulfill to the cubic Bézier curve become a legal interpolation function.
Text Box: {█(x_p1=0,                                                for border part AB@&x_p2=1,                                                for border part BC@x_p2=  1/2 (x_p1+√(4x_p1-3x_p1^2 )),  for border part CD@x_p2=  1/2 (x_p1-√(4x_p1-3x_p1^2 )),  for border part DA)┤
Fig5.png

 For normalized cubic Bézier curve (normalized in the sense that  and  what is the range of variation of x-coordinates of handles  of the cubic Bézier curve to fulfill the condition shown earlier. Why only x-coordinate as I describe it in my paper only inner function g is influencing the x-coordinate of the cubic Bézier curve, and as shown earlier only the g function must fulfill the conditions [4] and [5].

I just what mentioned that applications that are using the Bézier curve as an interpolation function in their animation editors are too restrictive to the range of x-coordinates or use other tricks to limit the x-coordinate to be able to generate Bézier curves (Blender I love you, but please don’t cheat), which are legal interpolating functions.

Now when we have an equation [3] we can express a cubic Bézier curve as an easing function.

To determine the formula for the C(x) function,  it is necessary to find the inverse of g function which is at most a cubic polynomial. The equation of cubic polynomial needs to be resolved for the variable x. To accomplish it we need to solve the problem of finding the roots to at most a cubic polynomial. Of course, the problem of finding roots is limited only to real polynomials.

Depending on the coefficients of the inner function g cubic Bézier curve as an easing function does not have one family of equations but takes a form of 6 families of equations. And those families are shown below.

         

         

         

         

         

         

 

Those families are very different at first glimpse, but some similarities and common patterns can be found after getting a deeper look. How to determine the coefficients of alpha, beta, gamma, delta, l, and k can be found in my paper for each of the family of functions.

I would like to draw attention to the first variant as we can see this is an equation for at most cubic polynomial. This fact determines that every at most cubic polynomial can be presented as a cubic Bézier curve. This can be very useful because we can still artists friendly way (manipulating the positions of handles ) generate nonlinear interpolation functions. Of course, legal positions are limited to  and , so only the y-coordinate can be change and the x-coordinate is fixed for those points. And this approach can be found where the performance of interpolation is crucial, for example in UE4 or Unity curve editors (even if handles  are not necessary placed at proper x-coordinate).

By introducing this limitation now we can call generated interpolation functions as splines (for those interpolation function with continuity of  at the border of the curves).

How Bézier curve is interpolated currently in engines or graphics applications?

How engines or graphics applications are dealing with the interpolation cubic Bézier curve?

My research shows that they do in two different ways.

The first way is that they are using a two-step algorithm, the first step is to solve at most cubic polynomial. And finding roots are done in terms of radicals or numeric root-finding algorithm.

The second way is a sampling of the cubic Bézier curve in some defined frequency (e.g. 30 or 60 FPS). And values between samples are linear interpolated. This method while is minimalizing the performance overhead introduces memory overhead. Storing all those samples need a lot of space in memory.

But how to use knowledge from my paper to deal with this problem? This is a subject for another article.

Łukasz Izdebski
October 2020