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


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}

enter image description here

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$.

enter image description here


-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.

  • $\begingroup$ 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? $\endgroup$ – Vennsoh Oct 30 '18 at 18:51
  • $\begingroup$ @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). $\endgroup$ – Coolwater Oct 31 '18 at 8:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.