Find value Y on cubic Bézier given value X

Question

Okay, I know that this has been asked here a lot, but I've read through ~10 other questions exactly like this one, and none of them have provided me with any useful information. In fact, 3 of the answers that I found were straight up inaccurate!

Anyway, my question is very simple (for me it's confusing, but it's probably a walk in the park for you guys), how do I find value Y on a cubic Bézier, given value X?

I have been previously using a time property of sorts to iterate over my bezier, but that gives improper results. I found some people suggest that I should be solving for t given X, but I have no idea how I would go about doing that or if that's even the best solution.

Let's say I have the following cubic bezier: (0,1,0.5,0.5,0.5,0.5,1,0) If I use t to find a point along said bezier, I receive non-linear results when incrementing t linearly. This is a huge problem for me and one that has been stumping me for quite some time.

What I need to do is use X in this case, where I can increase X from 0 to 1 linearly, and use that to sample for a given Y position on my curve, and I believe that this will solve my problem.

Can anybody explain to me how this would be done? Currently the only values that I have to work with are the anchor points + the control points of my bezier, I have no other information about it.

Answer 1

I think what you need is covered in the answers to this question, or here or here.

A 2D Bézier curve is controlled by four 2D control points, say $\mathbf{P}_0$, $\mathbf{P}_1$, $\mathbf{P}_2$, $\mathbf{P}_3$. Its equation is $$ \mathbf{P}(t) = (1-t)^3\mathbf{P}_0 + 3t(1-t)^2\mathbf{P}_1 + 3t^2(1-t)\mathbf{P}_2 + t^3\mathbf{P}_3 \tag{1}\label{eq1} $$ Writing $x$ and $y$ coordinates separately, the curve is $$ x(t) = (1-t)^3 x_0 + 3t(1-t)^2 x_1 + 3t^2(1-t) x_2 + t^3 x_3 \tag{2}\label{eq2} $$ $$ y(t) = (1-t)^3 y_0 + 3t(1-t)^2 y_1 + 3t^2(1-t) y_2 + t^3 y_3 \tag{3}\label{eq3} $$ where $\mathbf{P}_i = (x_i,y_i)$ for $i=0,1,2,3$.

So, suppose you have a given $x$ value, say $x=k$, and you want to calculate the corresponding $y$ value. The first problem is that there might be more than one corresponding $y$ value, but let’s ignore that issue, for now.

To get the $y$ value, you need two steps:

(A) Find $t$ such that $(1-t)^3 x_0 + 3t(1-t)^2 x_1 + 3t^2(1-t) x_2 + t^3 x_3 =k$.

(B) Substitute this $t$ value into equation (2) to find $y(t)$.

Step (A) is the difficult part, because you will need to solve a cubic equation to do this, which requires either nasty unstable formulas or numerical methods like Newton-Raphson.