In principle, what you are looking for is an Envelope, to modify the main wave. To simplify things, you can create a function that takes a linear value, and turns it into a curve.
Here's a simple example:
function Easing( i ) {
i *= 2;
if (i<1) return 1/(2-i)-.5;
return 1.5-1/i;
};
If you feed this formula linearly with a value of 0 to 1 , you will also get back a value of 0 to 1 , only nonlinear.
What you need to do, in this case is to get the amplitude of the main wave, and multiply by the result of the formula.
Here is a very basic example of usage. The extensive code is to draw the canvas, but what matters is just the application of the formula:
function Easing( i ) {
i *= 2;
if (i<1) return 1/(2-i)-.5;
return 1.5-1/i;
};
//demonstração:
var canvas = document.getElementById("out");
var context = canvas.getContext("2d");
var width = canvas.width;
var height = canvas.height;
var data;
context.beginPath();
context.moveTo(0,height);
context.strokeStyle = 'red';
for(i=0; i<=100; i++)
{
data = i/100; //linear
context.lineTo(i/100*width,height-data*height);
context.stroke();
}
context.beginPath();
context.moveTo(0,height);
context.strokeStyle = 'blue';
for(i=0; i<100; i++)
{
data = Easing( i/100 ); //usando função
context.lineTo(i/100*width,height-data*height);
context.stroke();
}
#out {width:300px; height:200px; border:1px dotted #999}
<canvas id="out"></canvas>
Also check out CODEPEN .
Remember that jQuery itself has easing functions, which already do something similar. Usually used for animations, but nothing prevents you from applying to graphics:
link
This site has a number of formulas that might interest you:
link
