3
$\begingroup$

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?

$\endgroup$
  • $\begingroup$ 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$. $\endgroup$ – Michael Burr Mar 6 '15 at 13:33
  • 1
    $\begingroup$ "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))$. $\endgroup$ – Yves Daoust Mar 6 '15 at 13:45
  • $\begingroup$ 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. $\endgroup$ – hardmath Mar 6 '15 at 13:54
  • $\begingroup$ @YvesDaoust yeah I got it wrong $\endgroup$ – Spail Mar 6 '15 at 14:23
1
$\begingroup$

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.

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

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.