音谱可视化:在canvas上做的手脚

波形图的衍生

在了解了web audo API的功能之后，我就开始探究可视化图形有什么可以改进的地方了，比如一开始的波形图：

正如上一篇所讲的那样，这里运用的是canvas里的巴塞尔曲线来描绘的，那么描绘巴塞尔曲线的函数参数是什么呢？

ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
moveTo()函数表示的是曲线的起始点，而quadraticCurveTo()函数的后两个参数就是描绘曲线结束的点，那么quadraticCurveTo()的前两个参数就是能够有效的表示曲率(但是其值并非为曲率)，暂称为伪曲率吧，为了更好的理解，于是再把图上一遍：

绘制一条二次巴塞尔曲线
所以可以知道moveTo()的坐标为p0，quadraticCurveTo()的坐标为p1和p2．
结合以上特点，我增加了５个参数来改变可视化的图形：分别为
１．周期长度，周期越长，波数越短，
２．频率降级，有些直接从数组中或得的频率值过大需要倍数降低
３．光滑度，主要是为了美观的设计，防止各个频率之间的值过于离散，采用的方法是从周围的频率中取平均值
４．伪曲率，这个就主要是通过改变p2的坐标数来做到的
５．线宽，ctx.lineWidth=8;
所以通过改变这些值，我得到了一些不可思议的图：
　
在这里主要因素是改变了伪曲率，然后通过其他参数的调整来美化．继续增大伪曲率的话，就得到了下面的图形，它的线段几乎已经是水平的了，颜色的浓淡可以表示不同数值下的频率个数．最外的线表示频率值的最大数．
　

之后我又将图形改变为了圆形，参数还是５个：

这里的参数也包含上一篇的周期长度，频率降级，光滑度和线宽．在这里：
周期长度就是频率值在总的1024个中的分段取值，
光滑度就是各个○之间的联系紧密长度．当然（波形图中的周期长度和光滑度也可以这样解释．．．）
然后还有一个与波形图不同的参数就是圆的基本直径．所以通过改变这些参数我们就可以做出美丽的可视化图形啦！