Rui Software

ブラウザで動くエピサイクル（フーリエ変換）可視化ツールをHTML単一ファイル（HTML/CSS/JS完結）で実装してください。

【DFT（離散フーリエ変換）】
N 個の複素数点列 {x_n + i*y_n} に対して以下を計算する。
  X[k] = (1/N) * Σ(n=0..N-1) (x_n + i*y_n) * e^(-2πi*k*n/N)
各成分 k は振幅 |X[k]|、位相 arg(X[k])、周波数 k を持つ。
結果を振幅の降順にソートし、大きい成分から順に使用する。

【エピサイクルアニメーション】
- animTime を 0 から 1 に進め、1 を超えたら折り返す
- 各成分 k の角度 = freq * animTime * 2π + phase
- 各ステップで前の先端を原点に、半径 amp*scale の円と腕を描く
- 腕の先端座標を tracePoints に追加し折れ線で軌跡を描く
- requestAnimationFrame でループ。背景を半透明で塗ると残像になる

【形状プリセット】
セレクトボックスで以下を切り替えられる。各形状を 256 点サンプリングして DFT に渡す。
- 円: cos(t), sin(t)
- 星: 角度 π/5 ごとに r=1/0.4 を交互に切り替えた極座標
- ハート: sin³(t), -(0.8125cos(t) - 0.3125cos(2t) - 0.125cos(3t) - 0.0625cos(4t))
- 四角: 4辺を t で均等分割した折れ線
- リサージュ: sin(3t+π/4), sin(2t)

【手描きモード】
- ユーザーがキャンバス上でドラッグした座標を収集する
- 指を離したタイミングで累積距離による均等リサンプリングを行い 256 点にする
- リサンプリング後に DFT を実行してアニメーションを開始する

【コントロール】
- 項数スライダー（1〜N）: 使用する DFT 成分の数を変更する
- 速度スライダー（1〜10）: animTime の増分を変更する
- 再生/停止ボタン
- クリアボタン: 手描きモードに戻す

【スタイル】
- キャンバス背景は黒（#0a0f0c）
- エピサイクルの円は薄い緑（rgba）、腕は半透明緑
- 軌跡は緑（#2e8b57）、先端ドットは黄色（#f0c040）
- 背景を rgba(10,15,12,0.3) で毎フレーム塗ると残像エフェクトになる

【制約】
- 外部ライブラリ不使用
- グローバル汚染防止のため即時関数（IIFE）で全体を囲む
- HTML/CSS/JS をすべて1ファイルに収める