Is there an explicit form for cubic Bézier curves?

Question

(See edits at the bottom)

I'm trying to use Bézier curves as an animation tool. Here's an image of what I'm talking about:

Basically, the value axis can represent anything that can be animated (position, scaling, color, basically any numerical value). The Bézier curve is used to control the speed at which the value is changing as well as it start and ending value and time. In this graphic, the animated value would slowly accelerate to a constant speed, then decelerate and stop.

The problem is, that Bézier curve is defined with parametric equations.

$f_x(t):=(1-t)^3p_{1x} + 3t(1-t)^2p_{2x} + 3t^2(1-t)p_{3x} + t^3p_{4x}$

$f_y(t):=(1-t)^3p_{1y} + 3t(1-t)^2p_{2y} + 3t^2(1-t)p_{3y} + t^3p_{4y}$

What I need is a representation of that same Bézier curve, but defined as value = g(time), that is, y = g(x).

I've tried solving for t in the x equation and substituting it in the y equation, but that 3rd degree is giving me some difficulty. I also tried integrating the derivative of the Bézier curve (dy/dx) with respect to t, but no luck.

Any ideas?

Note : "Undefined" situations are avoided by preventing the tangent control points from going outside the hull horizontally, preventing any overlap in the time axis.

EDIT : I have found two possible solutions. One uses Decasteljau's algorithm to approximate the $s$ parameter from the $t$ parameter, $s$ being the parameter of the parametric curve and $t$ being the time parameter. Here (at the bottom).

The other, from what I can understand of it, recreates a third degree polynomial equation matching the curve by solving a system of linear equation. Here. I understand the idea, but I'm not sure of the implementation. Any help?

Answer 1

Assuming the intended meaning of $p1x$, etc. was as Ross believed, you should be able to solve for t explicitly in either equation using the formula at http://en.wikipedia.org/wiki/Cubic_equation#General_formula_of_roots. Of course, this is a bulky solution and you would need to identify which solution is real (though there should be only 1 assuming that the curve can be represented as $y = g(x)$).

Answer 2

Notice that if you happen to have $p_{1y}=0$, $p_{2y}=1/3$, $p_{3y}=2/3$ and $p_{4y}=1$, so that $f_y(t)=t$, then the graph you are after is actually of the inverse function of $f_x(t)$, which is going to be a mess and inevitable as complicated as the usual formula for the roots of a cubic polynomial.

That shows that the general formula necessarily has to be complicated. I doubt there is anything useful to be done...

Answer 3

Any implicit Cartesian equation you'll attempt to derive from the Bézier curve is necessarily complicated because the explicit solution for the cubic equation is complicated, as explained by other answers; if you desperately need a $y=f(x)$ for manipulations, you're probably better off constructing a (piecewise) Hermite interpolant, which assumes you have an appropriate number of derivatives available in addition to function values.

For the cubic case, one only needs two triples $(x_i,y_i,y_i^\prime)$ and $(x_{i+1},y_{i+1},y_{i+1}^\prime)$ available; then, there is a unique cubic $p_3(x)$ that satisfies the conditions $p_3(x_i)=y_i$ and $p_3^\prime(x_i)=y_i^\prime$ (and similarly for the other triple). If, say, you have $y_i$ as position values and $y_i^\prime$ as velocity values, you're all set. If you additionally have second derivative values, you can construct a quintic, but since that sort is rarely needed/wanted, a cubic usually suffices.

Note that cubic splines are but a special case of cubic Hermite interpolation; the additional thing is that continuity conditions (the agreement of first and second derivative values at certain points) are implemented.

Answer 4

I tried the two solutions I've linked to the original question (Solution 1 and Solution 2). Here are my results.

Solution 1

The idea is to recreate the curve with a third degree polynomial, by matching the value at P1 and P4 and their respective slope. This polynomial can be solve using a system of linear equations. The only problem is that it's possible to create an infinite slope at P1 or P4 with the Bezier curve, which is impossible to recreate with the polynomial. I've also tried using a 5th degree polynomial (matching value, first derivative and second derivative) without success, because it has the same problem.

Solution 2

This solution is pretty simple, but a bit hacky. The idea is to use the De Casteljau algorithm to search for a t (parameter of the Bézier curve) that matches a given x variable (x-axis). The algorithm is simple :

1. Split the curve in half
2. Is the x of the split point is approximatively equal to the searched x? If yes, return t
3. Else, if the searched x is greater that the x of the split point, repeat the algorithm with the segment on the right, else on the left.

Once you have the t, you can obtain the y value using the Bézier function $f_y(t)$ in my original post.

So, yeah, working, but a bit hacky.

Answer 5

The basic required function is $y = 3x^2 - 2x^3$.

This is a smooth "ramp" that rises from $y=0$ at $x= 0$ to $y = 1$ at $x=1$.

You can then shift it and scale it to suite your needs.

This is a real-valued Bezier curve that has "control points" $\left(0, 0\right), \left(\frac{1}{3}, 0\right), \left(\frac{2}{3}, 1\right), \left(1, 1\right)$.