4
$\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$
4
  • $\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, 2015 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$
    – user65203
    Mar 6, 2015 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, 2015 at 13:54
  • $\begingroup$ @YvesDaoust yeah I got it wrong $\endgroup$
    – Spail
    Mar 6, 2015 at 14:23

1 Answer 1

Reset to default
3
$\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$
6
  • $\begingroup$ Yeah, looks like that's what I need. Thanks! $\endgroup$
    – Spail
    Mar 6, 2015 at 14:28
  • $\begingroup$ Why... do you multiply by $0$ at the beginning? And by $1$ at the end??? $\endgroup$
    – Ky -
    Oct 21, 2018 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, 2018 at 10:53
  • $\begingroup$ Oh, thanks! So, if mine are different, which $0$ and which $1$ do I substitute? $\endgroup$
    – Ky -
    Oct 21, 2018 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, 2018 at 14:18

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .