Cubic bezier curves - get Y for given X
Asked Answered
C

2

24

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.

Carlist answered 21/11, 2011 at 19:25 Comment(3)
Question also appears here: #7348509 Not sure which was first, but it may contain additional information.Trilingual
@scorb p0...p3 are defined in easing-function.Worriment
@scorb see Is it possible to express “t” variable from Cubic Bezier Curve equation? its for GLSL, the main idea is to convert input data to polynomial cubic and fit t so the resulting x,y matches desired state. In the example is computed distance to curve however you can easily check x instead.Mchugh
S
34

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.

Stephaniestephannie answered 21/11, 2011 at 20:38 Comment(6)
With a little help from some friends, I was able to kinda comprehend this. I rewrote two functions I got in another forum to accomplish what I needed: cl.ly/C1Nl (C#, may also not be pretty) Thanks for your help! :)Carlist
What is it t in this formula??Deirdredeism
@JhansiKiRani t is whatever you want it to be, as long as it's between 0 and 1.Carlist
So can we fix it to get x,y co-ordinate??Deirdredeism
t runs through every value from 0 to 1, where x(t=0)=X0, x(t=1)=X3. The question here is how to calculate t for for one particular x ? Note that x can have more than one t, like t=0.1 and t=0.6 might have the same x value of 0.4, but 2 different y values.Junko
What are P0, P1, P2, and P3 in this forumala. I have a start point, an end point, and two control points. How do they map to these points?Differentiate
L
1

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.

Legislator answered 12/4, 2021 at 11:29 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.