# How do I calculate the maximum velocity of a CSS Bezier curve?

I tried to do calculate if it's possible to get the top velocity of a co-ordinate point on a CSS Bezier curve. Below is my working process.

Calculate the top velocity point in a bezier curve (4 control points):

A Bezier curve can be described using a mathematical formula.

$$B(t) = (1−t)³P₀ + 3(1−t)²tP₁ + 3(1−t)t²P₂ + t³P₃$$

In CSS timing function, $$P₀$$ is $$(0, 0)$$ and represents the initial time and the initial state, $$P₃$$ is $$(1, 1)$$ and represents the final time and the final state. $$P$$ is a vector. In other words, we can put $$x$$ and $$y$$ instead of $$P$$ to get corresponding coordinates.

$$X = (1−t)³X₀ + 3(1−t)²tX₁ + 3(1−t)t²X₂ + t³X₃$$

$$Y = (1−t)³Y₀ + 3(1−t)²tY₁ + 3(1−t)t²Y₂ + t³Y₃$$

Since $$P₀$$ is $$(0, 0)$$ and $$P₃$$ is $$(1, 1)$$,

$$X = 3(1−t)²tX₁ + 3(1−t)t²X₂ + t³$$

$$Y = 3(1−t)²tY₁ + 3(1−t)t²Y₂ + t³$$

If I customise my curve to use $$P₁ (0.4, 0)$$ and $$P₃ (0.2, 1)$$,

$$P₁ = (0.4, 0) P₂ = (0.2, 1)$$

$$X = 1.6t³ - 1.8t² + 1.2t$$

$$Y = -2t³ + 3t²$$

Calculate the rate of change of $$Y$$,

$$dy/dt = -6t² + 6t$$

$$dy²/dt² = -12t + 6$$

$$-12t + 6 = 0$$

I get $$t = 0.5$$ Does that make sense?

The velocity is decided by both $$x'(t)$$ and $$y'(t)$$ as

$$V(t)=(x'(t), y'(t))$$

and the velocity's magnitude is $$||V(t)||=\sqrt{x'(t)^2+y'(t)^2}$$.

If you want to find the $$t$$ value corresponding to the maximum velocity, it is the same as finding the $$t$$ value where $$f(t)=(x'(t)^2+y'(t)^2)$$ is maximum. Therefore, you shall find the root of the polynomial $$f'(t)=x'(t)x''(t)+y'(t)y''(t)$$. Plugging in all the $$x'(t)$$, $$x''(t)$$, $$y'(t)$$ and $$y''(t)$$, we shall find that

$$f'(t)=118.08t^3-159.84t^2+60.48t-4.32$$,

which has 3 roots $$t_0=0.0924934$$, $$t_1=0.58488$$ and $$t_2=0.676285$$.

Please note that these 3 roots only correspond to the 3 points where the velocity attains local maximum or local minimum. Plugging $$t_0, t_1$$ and $$t_2$$ to $$f''(t)$$, we shall find that only $$t_1$$ results in a negative $$f''$$ and therefore, $$f(t)$$ has a local maximum at $$t=0.58488$$.

To find the global maximum within t=[0,1], we still need to compare the loacl maximum against the end values at $$t=0.0$$ and $$t=1.0$$ as

$$||V(t=0.0)||= 1.2$$,
$$||V(t=0.58488)||= 1.632338$$, and
$$||V(t=1.0)||= 2.4$$.

Therefore, your maximum speed occurs at $$t=1.0$$ with a local maximum at $$t=0.58488$$.

Assuming that a point is moving along the given Bezier segment from $$P_0$$ to $$P_3$$ and its movement is governed by some unspecified force according to expressions that define the position of the point at time $$t=[0,1]$$,

\begin{align} P(t)&=P_0(1-t)^3+3P_1(1-t)^2t+3P_2(1-t)t^2+P_3t^3 ,\\ P'(t)&=3(P_1-P_0)(1-t)^2+6(P_2-P_1)(1-t)t+3(P_3-P_2)t^2 ,\\ P''(t)&=6(P_0-2P_1+P_2)(1-t)+6(P_1-2P_2+P_3)t . \end{align}

Velocity of the point is a vector,

\begin{align} P'(t)&=(P'_x(t),P'_y(t)) . \end{align}

You have considered only $$P'_y(t)$$ part of the movement, hence the result is indeed the moment of time when the velocity in $$y$$ direction is maximal (btw, you should get $$t=\tfrac12$$, not $$t=2$$).

If you need to find the maximum of the absolute value of velocity vector $$||P'(t)||$$ for $$t=[0,1]$$, then you have to use

\begin{align} ||P'(t)||&=\sqrt{(P_x'(t))^2+(P_y'(t))^2} \tag{1}\label{1} . \end{align}

For example, in case when $$P_0=(0,0)$$, $$P_1=(0.4,0)$$, $$P_2=(0.2,1)$$, $$P_3=(1,1)$$, expression \eqref{1} becomes

\begin{align} ||P'(t)||=s(t) &= \sqrt{(1.2(1-t)^2-1.2t+3.6t^2)^2+(6t-6t^2)^2} \\ &= \sqrt{59.04t^4-106.56t^3+60.48t^2-8.64t+1.44} , \end{align}

It is straightforward to find that zeros of $$s'(t)$$ are the three roots of

\begin{align} 236.16t^3-319.68t^2+120.96t-8.64&=0 , \end{align}

approximately $$t_1=0.09249340673$$. $$t_2=0.5848801739$$. and $$t_3=0.6762849560$$, but the global maximum of $$||P'(t)||$$ on $$t=[0,1]$$ is reached at $$t=1$$.

-12t + 6 = 0 is correct, but its solution is t = 1/2 which makes sense. Note that the location of maximal slope $$dy/dx$$ doesn't coincide with the location of maximal y-velocity $$\ dy/dt\$$ because in the example of yours the x-velocity $$\ dx/dt\$$ is non-constant.

• Thanks! Didn't know how I make such silly division mistake. Yes it's 0.5 But what do you mean by dx/dt is non-constant? and dy/dx doesn't coincide with the location of maximal dy/dt? – Vennsoh Oct 30 '18 at 18:51
• @Vennsoh In the first image of g.kov's answer the red horizontal vectors vary in magnitude showing how dx/dt is non-constant. The maximal dy/dx is the most vertical green arrow and the maximal dy/dt is the longest blue arrow. They occur at different values of t (the latter at t=1/2 as you found in the OP). – Coolwater Oct 31 '18 at 8:44