フーリエ変換をJavaScriptで実装。
2015/4/4
全ての波形を正弦波に分解してしまうフーリエ変換。つまり全ての波が正弦波の合成結果だという宇宙の神秘。数学的なことは理解できないけれど、計算式はシンプルなのでJavaScriptで実装してこの目で確かめてみた。
まあ1次元の波が正弦波の足し算で作れることは納得できるのだけれど、2次元の波(画像)が正弦波(縞模様)の足し算で作れることはいまだに腑に落ちない。縦横どちらか一方ならうまく組み合わせられても、両方同時に合わせられるものだろうか? 直感的には縦をうまく合わせたら今度は横が崩れるということになりそうなんだけど...
1次元離散フーリエ変換。
まず1次元離散フーリエ変換。周波数・位相・振幅の違う2つの成分波を足して合成波を作る。 これをフーリエ変換にかけると、元の成分波が抽出できているのが分かる。
プログラム
実行結果
ここに結果が表示される。
2次元離散フーリエ変換・逆変換。
次に2次元離散フーリエ変換と逆変換。
左の画像は読み込んだ画像をモノクロ化したもの。中央の画像は離散フーリエ変換の結果で、絶対値をグレースケール化して輝度を適当に調整(100倍)。右の画像は逆変換で再画像化する領域だが、中央画像をマウスでクリックorドラッグしてマスクした成分(青色)のみを再変換する。
応答速度が遅いので解像度は40×40に落としている。変換ループが4重なので、解像度をn倍にするとnの4乗倍の計算時間がかかる。
プログラム
実行結果
元画像
離散フーリエ変換
逆変換
画像URL
- 画像は任意のURLを指定できる。
- テストモードは縞模様の確認用で、中央画像のクリックによるマスク設定を1点だけにする。
参考になったリンク。
-
プログラムの国のフーリエ変換
フーリエ変換の原理を理解するヒント。
-
フーリエ変換と画像圧縮
音と画像、波の重ね合わせからフーリエ変換までわかりやすく図説。