So I'm working on a program that graphs a bezier curve by manipulating the control points. This curve represents the velocity of something over time; I also want the option manipulate it all in terms of acceleration in respect to that velocity. My initial thought was to take the derivative of the bezier curve function and plot that with the same control points.
In my program it works, however I think the math doesn't really do what I want. This nice article has helped me on the math so far, but the problem I'm facing is that the derivative curve is simply "off."
The graphs below are velocity on the Y axis and time on the X axis.
Here's what the graph looks like with my bezier function:
Now, the derivative of that looks like this…
I'm not sure if my math is off, or if that's simply what the derivative of the bezier function actually does. But, what I really want to do is take my bezier curve and draw the rate of change over the same domain. However, the derivative seems to take it out of the domain (when you see my graphs below you'll see how the derivative changes the scope).
What can I do to extrapolate the data I'm looking for from this curve (turning velocity over time with a bezier function into acceleration over time)?
Here's the code where I'm drawing the point of the graph (it is calculating the curve from 0 to 1 and drawing a point there). I subract an extra 1 with n (the number of control points) as I calculate in an extra 1 at some point in the code above to be more efficient elsewhere:
Bezier function:
position $+=$ linearCombination$(n – 1, z) \cdot$ Mathf.Pow$((1.0f – t), n – 1 – z) \cdot$ Mathf.Pow$(t, z) \cdot$ controls[$z$].position;
Derivative:
position $+=$ linearCombination$( n – 2, z ) \cdot$ Mathf.Pow$(1.0f – t, n – 2 – z) \cdot$ Mathf.Pow $(t, z) \cdot (n – 1) \cdot$ (controls[$z + 1$].position – controls[$z$].position );
Best Answer
It depends what you're graphing.
The buttons on the left of your image say "xCurve, yCurve, zCurve", and this suggests that you have a 3D curve, and you are graphing one of the coordinates ($x$) versus a time parameter, $t$.
If so, the graph of the derivative is certainly wrong. It should have the value $0$ when the abscissa (the horizontal axis value, the $t$-value) is around 17 or 53.
On the other hand, your graphs don't look like "$x$ versus $t$" graphs, they look like "$(x,y)$ versus $t$" graphs. If this is the case, then your results might well be correct (though undesirable). See below for details.
Let's start from the beginning with a nice simple notation:
Suppose $P(t)$ is a cubic Bezier, with control points $A$, $B$, $C$, $D$. Then its equation is:
$$P(t) = (1-t)^3A + 3t(1-t)^2B + 3t^2(1-t)C + t^3D \quad (0 \le t \le 1) $$
Then the derivative curve is a quadratic (degree 2) curve, and its control points are $3(B-A)$, $3(C-B)$, $3(D-C)$, so it's equation is:
$$Q(t) = 3(1-t)^2(B-A) + 6t(1-t)(C-B) + 3t^2(D-C) \quad (0 \le t \le 1) $$
All of this applies regardless of whether $A$, $B$, $C$, $D$ are $x$ values or $(x,y)$ values.
If you want to draw "$x$ versus $t$" graphs, then drawing $P$ and $Q$ together on the same graph should be straightforward.
If you want to draw "$(x,y)$ versus $t$" graphs, then putting both $P$ and $Q$ on the same graph is more problematic. Suppose the control points $A$, $B$, $C$, $D$ were a great distance from the origin, but fairly close to each other. Then $B-A$, $C-B$, $D-C$ would be small, so the $Q$ curve would be close to the origin -- far away from the $P$ curve. In your case, it looks like (roughly) $A = (0,0)$ and $B=(32,12)$, so the first control point of the derivative curve $Q$ is $3(B-A) = (96,36)$, which is off the charts. Your derivative graph is clipped, so the end-points of the curve are not visible, which makes it harder to say whether or not it's correct. At least it looks like a parabola, though, which is correct (Bezier curves of degree 2 are parabolas).
These notes might help. Section 2.5 discusses derivatives, and there's a picture showing how the derivative curve relates to the original one (for the xy-vs-t case). Section 2.12 talks about the x-vs-t type of curve (which is variously referred to as a real-valued, explicit, or non-parametric Bezier curve).