I'm using Bézier easing interpolation to animate in my application. (Like this : https://developers.google.com/web/fundamentals/design-and-ux/animations/custom-easing)
I'm currently representing the graph using a simple Bezier with 4 control points (P0, P1, P2, P3) so on the x axis I got the time, and on the y axis I got the position (or value). Everything is normalized.
I would like now, to change the representation to have the velocity in the y axis. Basically going closer to a Motion Graph. I looked at many places and found I need to get the derivative of the cubic bézier i'm using.
It's mentionned there : https://pomax.github.io/bezierinfo/#derivatives, that a derivative of a bezier (particulary a cubic bezier) is composed of other beziers. Which is perfect to for me to be able to draw them. However, I cannot find a way to calculate those bezier control points. It's always a formula to get a point at a specified t. So I cannot draw my graph.
I would like to get a formula that got me a series of control points.
How can I achieve this ? Thanks !
Derivative of cubic Bezier curve with control points P0..P3 is quadratic Bezier curve with control points:
D0 = 3*(P1-P0)
D1 = 3*(P2-P1)
D2 = 3*(P3-P2)
Perhaps you want to use cubic curves everywhere - in this case make "power elevation":
PD0 = D0 = 3*(P1-P0)
PD1 = D0/3 + 2*D1/3 = (P1-P0) + 2*(P2-P1) = 2*P2 - P1 - P0
PD2 = 2*D1/3 + D2/3 = 2*(P2-P1) + (P3-P2) = P2 - 2*P1 + P3
PD3 = D2 = 3*(P3-P2)