30
$\begingroup$

(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:

Example of a Bézier curve

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?

  • 0
    Just some checks: Are $p1x$ and $p1y$ the coordinates of a point $p_1$ (and similar for the others)? Then it seems like what you are looking for is an equation $y=g(x)$ that represents the curve, is that right? I ask that because you have $x(t)$ and $y(t)$ which seems to be your f(time). By the way, to get a subscript in $\LaTeX$, you use the underline: $x_1$ or $p_{2y}$ (brackets for more than one character, and you can right-click and pick Show Source to see how it was done.)2011-03-14
  • 0
    @Ross, yes, exactly.2011-03-14
  • 0
    Then I don't have anything better than what Alex suggested. The implicit function theorem guarantees reasonable behavior for a short while, at least most of the time.2011-03-14
  • 2
    Any reason why you are not using [Hermite splines](http://en.wikipedia.org/wiki/Cubic_Hermite_spline) instead of Bézier curves for this? A Hermite spline *is* given in an explicit form; here it amounts to just setting $x = t$.2011-03-14
  • 1
    Just some unrelated interesting stuff: [LINK 1](http://math.stackexchange.com/q/12186/2736 "Yeah, I'm ashamed of cross site asking and all that, blah, blah, blah :)"), [LINK 2](http://gamedev.stackexchange.com/q/6009/3637 "Yeah, I'm ashamed of cross site asking and all that, blah, blah, blah :)"), [LINK 3](http://gamedev.stackexchange.com/q/5373/3637)2011-03-14
  • 0
    @Rahul, I'm not sure. The Hermite spline looks parametric to me. Also, if I set `x = t`, I will loose the `x` information of my control points. Or am I missing something?2011-03-14
  • 0
    Related. http://math.stackexchange.com/questions/6941/bezier-to-fx-polynomial-function2011-03-14
  • 0
    To reinforce the other suggestions: rather than doing the complicated parametric solves that have been outlined here you're _much_ better off changing your setup so that your single changing value is a function of time instead - that is, to piece together your curves from splines of the form $\text{value} = f(t)$. There are well-established ways of doing this from various forms of starting data, and this approach will be both cleaner and more robust in the long run.2013-04-03
  • 0
    Depending on the application, this may not be feasible, but you can do a linear calculation of t based on the desired x. Then essentially compute the actual x and continue to move the value t (similar to a binary sort) until the value of x is within some tolerance. Depending on the curvature, it could take as many as 10 computations to arrive at the correct value.2015-06-13

8 Answers 8