Dtjytyk

I am working on a piece of code where I am translating some points along a function, for easing an animation. For example, I have a cubic easing function of f(t) = t^3. However, I want the easing function to return a ratio of where to adjust the point in relation to a linear ease. So instead of having the cubic function above move from (0, 0) to (1, 1), it would move from (0, 1) to (1, 1). In other terms, the line y = x that intersects the curve at the edges should instead be y = 1

So, to put it into pictures, (in case I'm not wording it appropriately) I want to go from this:

to this (edited graph to show what I'm envisioning):

Is there a reasonable way to calculate this?

Let $f(t)$ be a function defined on the interval $(0,1)$. Then the line segment from $(0,f(0))$ to $(1,f(1))$ should end up as the line segment from $(0,1)$ to $(0,1)$. First shift everything up/down by $1-f(0)$ so that the line segment starts at the origin $(0,0)$. That is, apply the translation
$$T_1(x,y)=(x,y-f(0)).$$
Next, rotate the plane about the origin so that the other endpoint, which is now at
$$T_1(1,f(1))=(1,f(1)-f(0)),$$
ends up on the $x$-axis. This can be done by the applying rotation map
$$R(x,y):=begin{pmatrix}
costheta&-sintheta\
sintheta&hphantom{-}costheta
end{pmatrix}
begin{pmatrix}x\yend{pmatrix}
=(xcostheta-ysintheta,xsintheta+ycostheta),$$
where $theta=-arctan(f(1))$.
Now we can scale the whole picture so that the line segment becomes $1$ long; apply
$$S(x,y)=left(frac{x}{|sintheta+(f(1)-f(0))costheta|},frac{y}{|sintheta+(f(1)-f(0))costheta|}right).$$
Finally, shift everything up by $1$, which is simply
$$T_2(x,y)=(x,y+1).$$
Putting everything together yields the transformation
begin{eqnarray*}
F(x,y)&=&(T_2circ Scirc Rcirc T_1)(x,y)\
&=&left(frac{xcostheta-(y-f(0))sintheta}{|sintheta+(f(1)-f(0))costheta|},frac{xsintheta+(y-f(0))costheta}{|sintheta+(f(1)-f(0))costheta|}+1right).
end{eqnarray*}
This means that if your original function was $y=f(x)$, now your function is given by the implicit equation
$$frac{xsintheta+(y-f(0))costheta}{|sintheta+(f(1)-f(0))costheta|}+1=fleft(frac{xcostheta-(y-f(0))sintheta}{|sintheta+(f(1)-f(0))costheta|}right).$$

So you are doing several operations:

1. You are rotating the figure $-45^circ$ around the origin


2. You are scaling the result from part 1 by multiplying with $1/sqrt 2$
   


3. You are translating the result from part 2 up by $1$
   

The best way to deal with these is separately. You have an array of $x$ points, originally $x_0=t$, and $y$ points, originally $y_0=t^3$. The rotation means that you need to calculate the arrays $x_1$ and $y_1$ given by
$$x_1=x_0cos45^circ+y_0sin 45^circ\y_1=-x_0sin 45^circ+y_0cos 45^circ$$
Then for scaling along $x$ you have:
$$x_2=frac{x_1}{sqrt 2}\y_2=y_1$$
Finally, moving it up means $$x_3=x_2\y_3=y_2+1$$

See if this does what you want.

$t^3 + (1-t)$ does the trick! It's not a rotation, instead I am just adding the amount that the linear upper bound $t$ is missing to get to $1$. Hope this helps!

Edit: If you wanted something symmetric about $t=frac{1}{2}$ instead, you could try the quadratic $at(t-1)+1$ where $a>0$.