Em princípio, o que você procura é um Envelope, para modificar a onda principal. Para simplificar as coisas, você pode criar uma função que pegue um valor linear, e transforme numa curva.
Veja um exemplo bem simples:
function Easing( i ) {
i *= 2;
if (i<1) return 1/(2-i)-.5;
return 1.5-1/i;
};
Se alimentar esta fórmula linearmente com um valor de 0
a 1
, receberá de volta um valor também de 0
a 1
, só que não linear.
O que você precisa fazer, no caso é pegar a amplitude da onda principal, e multiplicar pelo resultado da fórmula.
Segue um exemplo bem básico de uso. O código extenso é para desenhar o canvas, mas o que interessa é apenas a aplicação da fórmula:
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>
Teste também no CODEPEN.
Lembre-se de que o próprio jQuery tem funções de easing
, que já fazem coisa parecida. Normalmente são usadas para animações, mas nada impede de aplicar em gráficos:
https://jqueryui.com/easing/
Neste site tem uma série de fórmulas que podem te interessar:
http://www.gizma.com/easing/