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.sstatic.net/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$.
Best Answer
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