Equation for nice curve

Question

I am not very good at math but im trying to come up with a function to make curves for a computer app UI. I have a friend guiding me with the math though. Below there are 2 gifs showing the behaviour I'm looking for and what I've managed to achieve so far.

https://i.stack.imgur.com/jDOvA.jpg

The idea is to have a line and let the user set a value between $-1$ and $1$ and modify the curvature of the straight line joining the two fixed points. I'm using the following equation $y = x^p$, where $p$ measures the curvature.

My curve behaves weird and the left side is not as smooth as the right. Both sides have a bias towards the starting point. The target behaviour is more balanced and smooth. I'm looking for suggestions on which curves that have a behaviour closer to the desired result and use $p$ the same for the diminishing left curve as well as the one to the right. Also it must be normalised in some way so that the returning value is always between $0$ and $1$.

Answer 1

One thing you can try is you can assume your curve is a parabola passing through the two points $(0, 0)$ and $(a, a)$ for some $a \gt 0 $. The next thing you need is to select a point of the form $(b , a - b )$ which lies on the diagonal line $y = a - x$ This point will serve as the point where tangents to the parabola at $(0,0)$ and $(a, a)$ meet.

That's all you need. The variable $a$ is fixed, while $b$ is variable. Now you can generate the parabola points as follows:

For $t \in [0, 1] $,

$p(t) = (1 - t)^2 (0, 0) + 2 t (1 - t) (b, a- b) + t^2 (a, a) = 2 t (1 - t) (b, a- b) + t^2 (a, a) $

This is known as the quadratic Bezier curve.

The following animation shows the result

Answer 2

The parabola (quadratic Bézier) solution might serve your needs, but it won’t give you very “sharp” curves that get close to the corners of your rectangle. To get a sharper curve, you need to use a rational quadratic Bézier curve. This is very similar to the regular quadratic curve (the parabola), but it has an added parameter $w$ called a “weight”.

If $A=(0,0)$, $B=(0,1)$, $C=(1,1)$, then the curves are $$ P(t)= \frac{(1-t)^2A +2wt(1-t)B + t^2C} {(1-t)^2+2wt(1-t)+ t^2} \quad \text{for } \;0 \le t \le 1 $$ If $w=0$, you get the straight line between $A$ and $C$. If $w=1$ you get a parabola, and as $w$ gets larger, the curve gets pulled more towards $B$.

These curves all bend towards the point $B=(0,1)$. To get curves that bend towards the point $(1,0)$, use $B=(1,0)$ in the curve equation above.

There’s a demo here. In the demo, you can leave $w_1$ and $w_3$ set to $1$, and his $w_2$ is what I called $w$ in my equations above. You really only need one weight, not three.