The problem of editing curves was solved a long time ago. Pretty much since the very beginning of computer interfaces Bézier curves won the competition for most convenient curve on the computer. It is easy to draw and it is easy to edit. Well, not very intuitive, even for experienced designers, but nevertheless. 99 out of 100 cases, when you edit a curve on your computer, you interact with the Bézier curve, most likely a cubic variant. I am not here to change that.
However, sometimes a curve is simply a representation of some function that you are not controlling and as result can not be represented as a cubic Bézier. Of course there is always an opportunity to approximate the curve, but even this is not always an option. Sometimes you don’t even know what are internals of the given function. You plotting the function points and they look like a curve.
This is where the actual problem rises. How to edit this curve? How to adjust it ever so slightly at particular points?
Recently I came across a problem like this and while I’ve chosen the most simple solution, there were some interesting variants that I feel like a crime not to share.
Let’s define what success looks like. Users should be able to grab some (any?) point on the curve and drag it around, while the curve is still passing through this point as well as some surrounding points. So, there should be some sort of a bump on the curve.
If we could have a function that already has a precise bump at a precise position then we could simply add those two functions together and get the new edited curve as a result.
There are at least two different ways of how we can add those functions. Simple sum of two explicit functions could be a suitable solution for many cases. For now let’s focus on the shape of the “bump”.
There are multiple bell shaped curves known to mathematicians. We, mere mortals, don’t really need to dive deep into this amazing world. Most of them look the same anyway. However, there are six curves that I would consider if you are looking for different types of bells and different ways of controlling them.
The most standard Gaussian bell curve depends on three parameters: height of the bump \(a\), shift on x-axis \(b\) and spread of the bell, \(c\).
This is a variation of the Gaussian curve, only with emphasis on radius of the curvature of the curve in the topmost point. The formula is rearranged to be dependent on the radius. This way we can keep it constant.
If we want to only have two parameters, which could be an important limitation, then we could make \(r=2a\). This setup will scale the bump as much vertically as horisontally, but this is the price that you have to pay for a small amount of parameters.
Don’t be scared by the name. This bell shaped curve is similar to the third variation of Gaussian curve, but has slightly wider “skirt”. It is also dependent only on two parameters.
This curve has a different profile that, to my opinion, looks closest to the actual bell. Just like Gaussian curve #1, it depends on three parameters, \(a\), \(b\) and \(c\).
This is the curve with the most parameters. There are \(a\) and \(b\) that control position of the bump apex, \(c\) that controls the spread of the bump and \(h\) that controls the steepness of the sides of the bump. When \(h<0\), the bump turns into a dent.
Varying different bump types you can get the editing of the curve to behave the way you want. There is one catch however, when you add those functions together, the bump will go vertically upwards. What if you want the bump to be perpendicular to the curve, for example if your curve is our beloved cubic Bézier.
Bézier curves are not simple functions, but rather parametric function, meaning it has two different functions for \(x\) and for \(y\). The Hypotrochoid you saw at the beginning is also a parametric function. Let’s look at how we can make our bump to pop in the perpendicular direction.
In the case of the Bézier curve we have four points that describe the curve. Let’s define their coordinates as \(x_1,x_2,x_3,x_4\) and \(y_1,y_2,y_3,y_4\). In this case their functions will have the following form:
$$x(t)=(1-t)^3x_1+3(1-t)^2tx_2+3(1-t)t^2x_3+t^3x_4,\\y(t)=(1-t)^3y_1+3(1-t)^2ty_2+3(1-t)t^2y_3+t^3y_4.$$The tangent to a curve at any given point is simply a derivative: \(\frac{y'(t)}{x'(t)}\). The perpendicular will be \(-\frac{x'(t)}{y'(t)}\). We need the function of the speed of the curve:
$$v(t)=\sqrt{\left(x'(t)\right)^2 + \left(y'(t)\right)^2}.$$We need to accommodate our function for speed otherwise the width of our bump will be different depending on position. This way first Gaussian function will become
$$f(x)=ae^{\frac{-(x-b)^2}{2\left(\frac{c}{v(x)}\right)^2}}.$$The final parametric function of original function plus the bump will look like this:
Of course if you have simple function, it always could easily be converted into parametric one, by stating that \(x(t)=t\) and \(y(t)=f(t).\)
This should be enough to choose the right bump to apply to the function in question you have. Are there more options? Absolutely. (You can look into the direction of Conchoid of de Sluze for example.) The world is your oyster. Mix and match and come up with some lovely curves.