Cubic bezier for easing?

Question

I would like to find out what Y is if X is a certain number from a cubic bezier curve to make a custom easing function, like it's done on this site: http://cubic-bezier.com/
Does anyone know a formula or a function to find Y if X is something of a cubic-bezier? (Coding in C#/XNA)

Answer 1

Lets look at two approaches:

1. Binary search - assuming the Bezier is set with values where there is one Y for each X, meaning that there is an injective function that receives an X and returns a Y then you can search for the correct t value that will return the x,y pair you are looking for.

2. Precomputation: Computing 1000 values for t between in the range [0 1] should only take an instant and you can place the results in 200 buckets. Afterwards, you could easily get a tiny set of relevant x,y pairs by simply picking the relevant bucket from the array.

Lets explore this in more depth (this is the formula):

To do a binary search, we'll assume that you create a specialized function h(t) that commputes the x value for a given t and returns it.

We are looking for the y value where x=a for some a so we need to find the correct t such that h(t) (nearly) equals x.

h(t) : return (1 - t)^3 * x0 + 3(1 - t)^2t * x1 + 3(1 - t)t^2 * x2 + t^3 * x3;

//Util
sign(z) : (z >= 0)? 1 : -1;
abs(z) : z * sign(z);

//binary search :
lookup(a) : 
  t = 0.5;
  step = 0.5;
  precision = 0.0001;
  While(abs(h(t) - a) > precision) :
    step /= 2.0;
    t += sign(a - h(t)) * step;

I did not check the code for faults so you"re welcome to look for errors.

Other method:

Calculate the Y and X values for a 1000 values of t (in advance). Put the results into buckets in an array of length N. x is between [0 1] so place all results between M/N and (M + 1)/N in the list in index M in the bucket array. You can later use a (fast) lookup to find the x,y pair you want (by radix/range). Binary search (and Newton Raphson) are you friends when you want to quickly answer complex mathematical questions with the use of a computer. You can still use the binary search to increase precision after the look up by searching between the two closest values.

A quick recap: you store the x,y pairs in linked-lists within an array of buckets by creating lists of x,y pairs where the values of x(s) that are between [m/n (m+1)/n] are all stored in the mth index (i.e. in listarray[m]).