Cubic bezier get $y$ as a function of $x$ (not $t$)

Question

I'm trying to write a program to display curves.

I have 4 control points $ A, B, C $ and $ D $ and a value for $x$. From that, I want to find the value for $y$.

Where I've gotten so far

We can use De Casteljau's formula to describe a cubic bezier:

$$ P = (1-t)^3A+3(1-t)^2tB + 3(1-t)t^2C+t^2D $$

Every point is a vector so

$$ x = (1-t)^3ax+3(1-t)^2tbx + 3(1-t)t^2cx+t^2dx $$

If I solve this for $t$ I should be able to then plug that $t$ value into $$ y = (1-t)^3ay+3(1-t)^2tby + 3(1-t)t^2cy+t^2dy $$ To get my desired y value.

The problem is that I haven't found a way to solve this equation for t. I plugged it into wolfram alpha but it seems to be only an approximation.

Is there a more precise / simpler way to achieve what I want?

EDIT: https://github.com/gre/bezier-easing

Answer 1

I"ll point you to another poster who seems to have started down the same road here, who seems not-so-happy with their decision.

I also found a good search term for what you want (where $x$ is time) is "easing curves", and the MDN documentation about the CSS easing-functions has some good details. The key thing I see there is that you can apply some easy-to-verify restrictions on your control points and you can be guaranteed to not have the "$x$ moving back and forth" problem. If you could get your hands on that code you'd be golden.

There seems to be a Javascript implementation here, and they talk about having to do a lot of clever work for the $x \leftrightarrow t$ problem that you are facing. They also claim that their code is used by React (!!) and Apple (!!!), so I'll suggest that this is one of those problems where your time is better spent getting someone else's code into your project than re-implementing it yourself. The underlying math question is still interesting, and follow that up if you're curious, but I wouldn't bother if I just wanted my project to move forward.

Answer 2

Wolfram gives you the exact expressions, the same that Cardano would give. They can involve complex numbers. It is possible to implement them in a simpler form, by using intermediate variables.

Beware that depending on the positions of the control points, the value of $t$ might not be unique.

An alternative solution is to sample $t$ roughly, find an interval that contains your $x$ and use a few iterations of regula falsi.

---

Drawing the parametric curve $(x(t),y(t))$ is million times easier.