3
$\begingroup$

I am implementing cubic Bézier equation to my project for smooth animation. I'm being stuck at how to calculate progress at a time. I found an equation in this answer and it's really close to what I am finding. Here is the equation:

$$ y = u_0(1-x)^3 + 3u_1(1-x)^2x + 3u_2(1-x)x^2 + u_3x^3 $$ As my understanding, $x$ represent for the time and $y$ represent for the progress. But what is $u_0, u_1, u_2, u_3$? I know a Bézier curve is defined by a set of 4 points $P_0, P_1, P_2, P_3$. But i can not figure out the relation of 4 points $P$ and 4 constant $u$.

Example in the answer above, an ease-in curve has $u_0=0$, $u_1=0.05$, $u_2=0.25$, $u_3=1$ but if we use the point it should be $P_0=(0,0); P_1=(0.42,0); P_2=(1,1); P_3=(1,1); $ (you can see it here).

I want to know how to get the constant $u$ base on the point $P$.

Any help would be appreciated. Many thanks!

Edit: When i fixed $P_0=(0,0), P_3=(1,1)$ is there any equation that take $P_1, P_2$ as the parameter like the css cubic-bezier function?

$\endgroup$
  • 1
    $\begingroup$ I like your love towards cubic-bezier as I love implementing in CSS $\endgroup$ – Ravi Prakash Dec 18 '17 at 11:15
6
+100
$\begingroup$

A 2D Bézier curve is controlled by four 2D control points, say $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$. Its equation is $$ \mathbf{P}(t) = (1-t)^3\mathbf{P}_0 + 3t(1-t)^2\mathbf{P}_1 + 3t^2(1-t)\mathbf{P}_2 + t^3\mathbf{P}_3 \tag{1}\label{eq1} $$ This is a "parametric" equation -- given a parameter value $t$ (which you can regard as time), this formula gives you a 2D point $\mathbf{P}(t)$. Writing $x$ and $y$ coordinates separately, the curve is $$ x(t) = (1-t)^3 x_0 + 3t(1-t)^2 x_1 + 3t^2(1-t) x_2 + t^3 x_3 \tag{2}\label{eq2} $$ $$ y(t) = (1-t)^3 y_0 + 3t(1-t)^2 y_1 + 3t^2(1-t) y_2 + t^3 y_3 \tag{3}\label{eq3} $$ where $\mathbf{P}_i = (x_i,y_i)$ for $i=0,1,2,3$. This is the type of Bézier curve found in typical drawing programs or graphics packages. It's good for animating a point moving in 2D, but not very good for controlling movement in 1D.

Another approach would be to use an equation like \eqref{eq1} above to describe $y$ as a function of $x$: $$ y(x) = (1-x)^3 y_0 + 3x(1-x)^2 y_1 + 3x^2(1-x)y_2 + x^3y_3 \tag{4}\label{eq4} $$ We might call this a "functional" Bézier curve, as opposed to a parametric one. Here, we don't have four control points, we have four control values, $y_0$, $y_1$, $y_2$, $y_3$. The functional form is less general, but it's quite suitable for use in animation: it gives you the "progress" $y(x)$ corresponding to a given time $x$.

So, how are the functional Bézier curve and the parametric one related? The answer is that the functional one is a special case of the parametric one. Suppose we substitute $x_0=0$, $x_1 = \tfrac13$, $x_2 = \tfrac23$, $x_3 = 1$ into equation \eqref{eq2} above. Then we get $$ x(t) = (1-t)^3 (0) + 3t(1-t)^2 (\tfrac13) + 3t^2(1-t) (\tfrac23) + t^3 (1) = t $$ So $x=t$, and equation \eqref{eq3} from above becomes $$ y(t) = y(x) = (1-x)^3 y_0 + 3x(1-x)^2 y_1 + 3x^2(1-x)y_2 + x^3y_3 $$ which is the same as equation \eqref{eq4}. So, in short, to get a Bézier function with control values $y_0$, $y_1$, $y_2$, $y_3$, we just need to construct a 2D Bézier curve with control points $\mathbf{P}_0 = (0,y_0)$, $\mathbf{P}_1 = (\tfrac13,y_1)$, $\mathbf{P}_2 = (\tfrac23,y_2)$, $\mathbf{P}_3 = (1,y_3)$.

For example, if you have the control values you mentioned: $u_0=0$, $u_1=0.05$, $u_2=0.25$, $u_3=1$, then the corresponding 2D control points are $(0,0)$, $(\tfrac13, 0.05)$, $(\tfrac23, 0.25)$, $(1,1)$.

enter image description here

Conversely, suppose you have four control points $\mathbf{P}_0 = (0,0)$, $\mathbf{P}_1 = (x_1,y_1)$, $\mathbf{P}_2 = (x_2,y_2)$, $\mathbf{P}_3 = (1,1)$ describing a 2D Bézier curve, and you want to find the corresponding Bézier function. In general, this is not possible. In fact, it's only possible if $x_1 = \tfrac13$ and $x_2 = \tfrac23$. And, in that case, the Bézier function defined by the control values $0, y_1, y_2, 1$ will give you the desired shape.

This causes lots of problems. Like here and here. People design a 2D Bézier curve, and then they want to use it as a function (i.e. they want to get the $y$ value corresponding to a given $x$). This is generally not possible (or, at least, it's not easy). If you want to control animation in 1D, I think you should use a function, not a 2D Bézier curve.

For example, suppose you try to find a function corresponding to the 2D curve with control points $\mathbf{P}_0 = (0,0)$, $\mathbf{P}_1 = (1,0)$, $\mathbf{P}_2 = (0,1)$, $\mathbf{P}_3 = (1,1)$. This curve looks like this:

enter image description here

You can't possibly represent this curve as the graph of a polynomial function (of any degree) because it has vertical slope at $x=\tfrac12$, which would never happen with a polynomial. If you want to use this curve for 1D animation, then you need to be able to calculate the $y$ value for a given $x$. In general, you will need to solve cubic equations to do this, which requires either nasty unstable formulas or numerical methods like Newton-Raphson. This particular example is very special because the relevant cubic is easy to solve, giving us: $$ y = \frac{1}{48}(36 - 24x) + \frac34 (2x-1)^{1/3} $$ But this is highly unusual; the solution of a cubic equation is typically a huge mess.

$\endgroup$
  • $\begingroup$ Thank you for your answer. It helped me so much. I see in your answer that we need to fix the x-cordinate of 4 points to map it to the function but in the cubic-bezier.com the $P_0=(0,0), P_3=(1,1)$ and the input is $P_1(x_1, y_1), P_2(x_2, y_2)$. It is same as css cubic-bezier function. Is there any way that we can achieve it? $\endgroup$ – Duannx Dec 19 '17 at 2:27
  • $\begingroup$ I'm not sure what you're asking. But I'm guessing that it might be the issue I discuss in the new paragraph at the end of my answer. $\endgroup$ – bubba Dec 19 '17 at 8:07
  • $\begingroup$ It is what i am asking about. Css has a cubic-bezier() function what have $P_0=(0,0), P_1=(x_1, y_1), P_2=(x_2, y_2), P_3=(1,1)$ and some how it can use $P_1$ and $P_2$ as the input to control the animation. $\endgroup$ – Duannx Dec 19 '17 at 8:33
  • $\begingroup$ After all, i can use the function with the control value $(0, y_1, y_2, 1)$ to control animation but it is better if i can make my function like the css way. $\endgroup$ – Duannx Dec 19 '17 at 8:39
  • $\begingroup$ Yes, but there are two different things: the function with control values $0,y_1,y_2,1$, and the 2D Bezier curve with control points $(0,0), (x_1,y_1), (x_2,y_2), (1,1)$. The two graphs won't be the same unless $x_1 = \tfrac13$ and $x_2 = \tfrac23$. $\endgroup$ – bubba Dec 19 '17 at 8:49
1
$\begingroup$

The animation in your second link has only one variable as a function of time. If you want to move a point on the computer screen you'll need to specify two variables, the $x$ and $y$ coordinates, as functions of time. This can be done with a single equation if you write the $(x,y)$ position as a vector. In this case the coefficients $u_i$ in your equation need to be 2-dimensional vectors, and these are identical with the control points $P_i$. This is explained in the Wikipedia article: https://en.wikipedia.org/wiki/B%C3%A9zier_curve

$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.