Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cubic bezier curves - get Y for given X

Tags:

I have a cubic bezier curve where the first and last points are given (namely P0(0,0) and P3(1,1)). The other two points are defined like this: cubic-bezier(0.25, 0.1, 0.25, 1.0) (X1, Y1, X2, Y2, also those values must not be smaller or larger than 0 or 1, respectively)
Now what would I have to do to get the Y coordinate for a given X, assuming there's only one? (I know that under certain circumstances there can be multiple values, but let's just put them aside. I'm not doing rocket science over here, I just want to be able to get Y multiple times per second to do transitions)

I managed to dig up this: y coordinate for a given x cubic bezier, but I don't understand what xTarget stands for.
Oh, also this is no homework whatsoever, I'm just a bit annoyed at the fact that there's no comprehensible stuff about cubic bezier curves on the internet.

like image 916
Peter W. Avatar asked Nov 21 '11 19:11

Peter W.


People also ask

Which is the equation of the cubic Bezier curve?

In general, a cubic Bezier curve is parametrically defined as(2.68)Pt=1tt2t31000−33003−630−13−31V0V1V2V3,0≤t≤1where V0, V1, V2, V3 are the control points of the Bezier curve.

What is a cubic Bezier curve?

A Cubic Bezier curve is defined by four points P0, P1, P2, and P3. P0 and P3 are the start and the end of the curve and, in CSS these points are fixed as the coordinates are ratios. P0 is (0, 0) and represents the initial time and the initial state, P3 is (1, 1) and represents the final time and the final state.

What is cubic Bézier easing?

A cubic Bézier easing function is a type of easing function defined by four real numbers that specify the two control points, P1 and P2 , of a cubic Bézier curve whose end points P0 and P3 are fixed at (0, 0) and (1, 1) respectively. The x coordinates of P1 and P2 are restricted to the range [0, 1].

What is the significance of Bézier () function?

The cubic-bezier() functional notation defines a cubic Bézier curve. As these curves are continuous, they are often used to smooth down the start and end of the interpolation and are therefore sometimes called easing functions. A cubic Bézier curve is defined by four points P0, P1, P2, and P3.


2 Answers

If you have

P0 = (X0,Y0) P1 = (X1,Y1) P2 = (X2,Y2) P3 = (X3,Y3) 

Then for any t in [0,1] you get a point on the curve given by the coordinates

X(t) = (1-t)^3 * X0 + 3*(1-t)^2 * t * X1 + 3*(1-t) * t^2 * X2 + t^3 * X3 Y(t) = (1-t)^3 * Y0 + 3*(1-t)^2 * t * Y1 + 3*(1-t) * t^2 * Y2 + t^3 * Y3 

If you are given an x value, then you need to find which t values in [0,1] correspond to that point on the curve, then use those t values to find the y coordinate.

In the X(t) equation above, set the left side to your x value and plug in X0, X1, X2, X3. This leaves you with a cubic polynomial with variable t. You solve this for t, then plug that t value into the Y(t) equation to get the y coordinate.

Solving the cubic polynomial is tricky but can be done by carefully using one of the methods to solve a cubic polynomial.

like image 138
JohnPS Avatar answered Sep 21 '22 12:09

JohnPS


examples of Cubic bezier curve

P0 is your first point in the curve where t=0 P3 is your last point in the curve where t=1 P1 and P2 are your control points.

like image 24
Ayoub Gharbi Avatar answered Sep 21 '22 12:09

Ayoub Gharbi