# Calculating values for cubic Bezier curve

I'm trying to use cubic bezier curves for some non-linear animations in my iOS app. Let's say I'm animating position of some element on the screen. I'm using this curve from cubic-bezier.com for animation, so control points are:

$P_0 = (0, 0), P_1 = (0.2, 0.5), P_2 = (0.5, 0.9), P_3 = (1, 1)$

I need to calculate bezier value for some point in time, for example for $t = \frac12$. I know that the equation of the curve is:

$P(t) = (1-t)^3P_0 + 3t(1-t)^2P_1 + 3t^2(1-t)P_2 + t^3P_3$

and for $t = \frac12$ the equation is:

$P(\tfrac12) = \tfrac18 P_0 + \tfrac38 P_1 + \tfrac38 P_2 + \tfrac18 P_3$

But what values should I use in this equation? If I use x-coordinates of control points then I get this:

$P(\tfrac12) = \tfrac18 * 0 + \tfrac38 * 0.2 + \tfrac38 * 0.5 + \tfrac18 * 1 = 0.3855$

Obviously this is not the value I need, cause, judging by the look of this bezier curve, value for $t = \frac12$ should be something like 0.77 or 0.78. What am I doing wrong?

• Are you only computing the $x$-coordinate? If you calculate the $y$-coordinate, you get $0.65$ which might be close to what you're observing. How do you get the value for $t=1/2$? Remember that $t=1/2$ does not correspond to the value at $x=1/2$. – Michael Burr Mar 6 '15 at 13:33
• "value for $t=1/2$ should be something like $0.77$ or $0.78$": no. $t=1/2$ is about the middle of the curve, where obviously $x<\frac12$. You make a confusion between an explicit equation $(x,y(x))$ and a parametric equation $(x(t),y(t))$. – Yves Daoust Mar 6 '15 at 13:45
• I think you are using a parametric curve, in that both $x,y$ are cubic functions of $t$. While $P_0,P_3$ represent values of the function at the endpoints, the "control points" $P_1,P_2$ are related to slopes at the endpoints rather than to coordinate values. – hardmath Mar 6 '15 at 13:54
• @YvesDaoust yeah I got it wrong – Spail Mar 6 '15 at 14:23

I think that I understand your confusion. Let me know if this works.

For a Bezier curve defined as you did, you have a parametric form:

$$x(t)=(1-t)^3\cdot 0+3t(1-t)^2\cdot .2+3t^2(1-t)\cdot.5+t^3\cdot 1$$

and

$$y(t)=(1-t)^3\cdot 0+3t(1-t)^2\cdot .5+3t^2(1-t)\cdot.9+t^3\cdot 1$$

When you plug in $t=1/2$, you get the point $(0.3875,0.65)$, which is not the point that you're looking for.

I think that you're interested in the case where $x=\frac{1}{2}$. Using Maple, I solved $x(t)=\frac{1}{2}$, and found that this happens when $t\approx0.60969549401666900$.

Plugging this $t$ value into $y(t)$ results in $\approx0.7576964125$, which, I think, is the value you're looking for.

• Yeah, looks like that's what I need. Thanks! – Spail Mar 6 '15 at 14:28
• Why... do you multiply by $0$ at the beginning? And by $1$ at the end??? – Ben C. Leggiero Oct 21 '18 at 3:32
• @Ben In the OP, $P_0=(0,0)$ and $P_1=(1,1)$. That's the $0$ and $1$. – Michael Burr Oct 21 '18 at 10:53
• Oh, thanks! So, if mine are different, which $0$ and which $1$ do I substitute? – Ben C. Leggiero Oct 21 '18 at 13:47
• @Ben You need to plug in the control points as your coefficients. You might want to open a separate question... – Michael Burr Oct 21 '18 at 14:18