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?
Best Answer
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.