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).
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
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
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.
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 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.
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
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).
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  can be transformed into a set of two at most cubic polynomials shown below (how to calculate coefficients are shown in my paper)
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
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.
where it is inverse of function.
And this simple formula  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.
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.
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.
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.
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.
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  and .
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  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 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.