2次元フーリエ変換と周波数フィルタをTypeScriptで実装する【画像処理100本ノック】

概要

Q.32〜35では、2次元離散フーリエ変換で画像を周波数成分へ分解し、周波数領域でローパス、ハイパス、バンドパスフィルタを適用します。

各周波数(u, v)に対して全画素(x, y)を走査し、実部と虚部を求めます。

const angle = -2 * Math.PI * (x * u / width + y * v / height);
real += value * Math.cos(angle);
imag += value * Math.sin(angle);

逆変換では角度の符号を反転し、画素数で割って空間画像へ戻します。この実装は仕組みを追いやすい一方で計算量が大きく、画像サイズによっては完了まで時間がかかります。

低周波成分は画像全体の緩やかな明るさの変化、高周波成分は輪郭や細かな模様に対応します。実装ではスペクトルをシフトし、低周波が画像中央へ来るようにしてから円形のマスクを作ります。

フィルタ処理そのものは、通過させない周波数の実部と虚部を0にする処理です。その後に逆DFTを行うと、周波数マスクの効果を空間画像として確認できます。

ガウシアンフィルタによるぼかしは、周波数領域では高周波を弱める処理と考えられます。 Sobelなどのエッジ検出は高周波を強調します。空間領域と周波数領域の結果を比較すると、別々に見えるフィルタが同じ性質を扱っていることが分かります。

2次元DFTを定義どおり二重に計算すると、入力と出力の座標をそれぞれ走査するため計算量は O(W²H²)になります。学習用の小さな画像では式を追いやすい一方、実用サイズではFFTを使う必要があります。

周波数成分は実部と虚部の2配列、または{ re, im }の配列として保持します。振幅を表示するときは sqrt(re² + im²)を求めますが、値の範囲が広いためlog(1 + magnitude)で圧縮すると低い成分も見やすくなります。

実数画像のスペクトルは共役対称になります。中心移動後の表示が左右・上下で不自然に非対称なら、指数の符号、座標、実部と虚部の更新を確認する手掛かりになります。

矩形や円で周波数を急に0へ切ると、空間画像では輪郭付近に波紋状のリンギングが出ます。カットオフ付近を滑らかに減衰させるマスクと比較すると、周波数応答の鋭さと空間的な副作用のトレードオフを確認できます。