音譜可視化:在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箇中的分段取值，
光滑度就是各個○之間的聯繫緊密長度．當然（波形圖中的週期長度和光滑度也可以這樣解釋．．．）
然後還有一個與波形圖不同的參數就是圓的基本直徑．所以通過改變這些參數我們就可以做出美麗的可視化圖形啦！