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.

Community
  • 1
  • 1
Peter W.
  • 2,323
  • 4
  • 22
  • 42
  • Question also appears here: http://stackoverflow.com/questions/7348009/y-coordinate-for-a-given-x-cubic-bezier Not sure which was first, but it may contain additional information. – mredig Jun 04 '14 at 12:54
  • @scorb p0...p3 are defined in [easing-function](https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function). – Andrew Morton Apr 05 '21 at 16:21
  • @scorb see [Is it possible to express “t” variable from Cubic Bezier Curve equation?](https://stackoverflow.com/a/60113617/2521214) 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. – Spektre Apr 06 '21 at 07:30

2 Answers2

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.

JohnPS
  • 2,518
  • 19
  • 17
  • 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: http://cl.ly/C1Nl (C#, may also not be pretty) Thanks for your help! :) – Peter W. Nov 22 '11 at 18:07
  • What is it t in this formula?? – SweetWisher ツ Sep 04 '13 at 04:20
  • @JhansiKiRani t is whatever you want it to be, as long as it's between 0 and 1. – Peter W. Sep 07 '13 at 22:04
  • So can we fix it to get x,y co-ordinate?? – SweetWisher ツ Sep 08 '13 at 04:57
  • 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. – Peter Huber Feb 17 '21 at 03:24
  • 1
    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? – Scorb Apr 05 '21 at 16:12
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.

Ayoub Gharbi
  • 301
  • 2
  • 7