How do I find a value (Y) given time (X) passing through a bezier-curve?

950 Views Asked by At

>> Visual picture of my problem <<

In the attached picture I have this bezier-curve (or easing curve), represented by 4 coordinates:

P0 (0, 0)
P1 (0.7, 0)
P2 (0.3, 1)
P3 (1, 1)

Given a specific time that can range between zero and one, I need to find the corresponding value that intersect the bezier-curve.

In this example, when time is equal to 0.6, I was able to find out that the corresponding value is approximately 0.7702, since I was able to measure it on the software I'm using (Illustrator). What I need though is a mathematical formula to calculate the corresponding value given any time.

I have no idea how -__-

1

There are 1 best solutions below

2
On

The $x$ equation is

$$x=t^3\cdot0+3t^2(1-t)\cdot0.7+3t(1-t)^2\cdot0.3+(1-t)^3\cdot1.$$

For a given $x$, you need to solve this cubic equation for $t$. You can do it for example using the analytic formulas.

http://www.wolframalpha.com/input/?i=solve+x%3Dt%5E3+0%2B3t%5E2(1-t)+0.7%2B3t(1-t)%5E2+0.3%2B(1-t)%5E3+1+for+t

When you have $t$, plug it in the $y$ equation.

Not so simple.