Velocity motion graph from bezier easing

Question

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 !

The end of the section gives you exactly this information, as super simple procedure. If you have a cubic curve with points p0, p1, p2, and p3 in your original curve, your derivative is the quadratic curve with points d0 = 3*(p1-p0), d1 = 3 * (p2 - p1) and d2 = 3 * (p3 - p2). Plot that quadratic curve using the same t from 0 to 1, and there's your velocity graph. — Mike 'Pomax' Kamermans

MBo MBo · Accepted Answer · 2021-02-19T18:10:29

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)

Velocity motion graph from bezier easing

1 Answers