圖表設計及目的
這份工具旨在幫助一些不理解傅立葉轉換的同學，透過這個轉換視覺化的過程與結果，可以得到視覺化結論：
- 頻譜特徵: 能夠視覺化清晰地展示這些「頻譜指紋」，方波主要由奇次諧波構成，鋸齒波包含所有整數次諧波，而真實世界的聲音（如動物）頻譜通常更複雜，可能集中在某些特定頻段。
- 能量分佈: 視覺化讓人一眼看出哪些頻率是訊號的主要組成部分（振幅大的），哪些是次要的（振幅小的）。例如，某個動物聲音可能主要能量集中在2-4Hz範圍（此處僅為示意，實際基頻取決於數據時間窗口）。
- 資料特性探索: 繪製或亂數產生的波形，傅立葉分析可以展示其潛在的週期性或主要頻率成分，即使肉眼在時域圖上不易察覺。
設計過程主要考量的是揭示傅立葉分析的原理與結果：「任何複雜週期訊號（時域）如何被分解為一系列不同頻率、振幅和相位的簡單正弦/餘弦波（頻域）」，設計對應以下任務：
- 觀察: 可以透過資料來源選擇預設/真實世界訊號或自行觀察原始波形。
- 分解與理解: 底部圖表將原始訊號分解成各頻率分量波形，再加上Epicycle 動畫（向量疊加）視覺化展示了這些頻率分量如何「疊加」還原出原始波形，連結時域與頻域。
- 量化與比較: 右側表格提供精確轉換後的振幅，方便使用者量化比較不同資料來源對比不同頻率(基頻)分量的重要性。
關於原始/分解波型圖和Epicycle動畫，是展現Mark & Channel的趨勢性(Rectilinear)以及週期性(Radial)。
- 原始/分解波形圖: 以Line標示連續的時間序列訊號，原始波型X軸為時間 (Time)、Y軸為振幅 (Amplitude)；分解波型用分類色 & 垂直空間分隔標示不同頻率 (Frequency) 的波形，一樣是X軸為時間 (Time)、Y軸為振幅 (Amplitude)。
- Epicycle 動畫: 以頻率分量的振幅 + 相位 + 時間演進區分向量（白色）最終合成點（紅色）；將原始訊號分解成各頻率分量波形，透過向量疊加視覺化展示這些頻率分量如何「疊加」還原出原始波形，連結時域與頻域。
透過多視圖設計，包含原始波形、分解波形、係數表格、向量疊加動畫，讓同學從不同角度理解傅立葉轉換；再利用類極座標來表示時間(頻率)與振幅，並用顏色做為區隔，幫助同學在不同視圖間建立聯繫。
圖表解釋
上方圖表 (選擇/繪製波形):
- 透過「資料來源」下拉選單可以選擇預設的波形（如各種動物聲音、方波、鋸齒波或亂數波形）或是「自己畫」來繪製任意波形。
- 選擇波形或繪製完成後會進行傅立葉轉換計算。
- 點擊播放時，會看到一系列旋轉的向量，結合的向量紅點會相似於原本波形 ( 取決於你選擇的範圍，如選擇區間越少會損失越多細節 )，按暫停波型擊會暫停滾動。
- 點擊重製，會清除所有繪圖和計算結果。
下方圖表 (傅立葉分解):
- 顯示原始波形分解後得到的各個頻率分量波形。
- 透過上方的「顯示頻率範圍」選擇要觀察的頻率區間。
- 波形的顏色與右側表格中對應頻率的顏色標示一致（最多可選擇50個諧波，因為100個會當掉）。
右側表格 (傅立葉係數):
- 列出經過程是計算每個諧波的傅立葉係數，包含直流分量（頻率 0 ）、各頻率餘弦（Cos）和正弦（Sin）的振幅。
- 在「類型」欄位中，當前選擇的顯示頻率範圍會附加顏色方塊，方便與下方傅立葉分解波型對照。
資料來源: https://cis.whoi.edu/science/B/whalesounds/index.cfm