GUI版DFT by JSX

やはりグラフが必要

コマンドライン版のDFTがとりあえず完成したのを受け，次はGUI版だと意気込んでみたものの，なかなか時間が取れなくて公開が遅くなってしまいました．数値を表示するだけのDFTは，表示が寂しいとかそう言うレベルではなく，分析結果が全く分かりません．やはりグラフィック表示が必要です．

どこに時間が掛かっていたかと言うと，グラフ表示するための「仮想座標をサポートした描画領域」のクラスを作成したからです．こちらのクラスはまだ完成度が低く公開するには時期尚早ですが，githubには上げておきます．使い方の説明は，その内このブログで公開する予定です．

そんなこんなで，ようやく公開するに耐えるDFTアプリができました．今のところ，分析できる波形が「単純なsin波」「位相が30度ずれたsin波」「矩形波」のみです．もっと色々と機能をつけることもできますが，まずは公開を優先したのでご容赦ください．以下，デモです．分析したい波形のボタンをクリックすると，元波形と周波数成分が表示されます．

デモ

※Blog全体を表示している場合，エラーが出て動作しません．この投稿のみを表示すれば動作します．現在原因究明中．追加：JSXの仕組み上，複数のJSXプログラムを同一ページに配置できません．お手数ですが，この投稿のみを表示した状態でお試しください．追加：無理やり同一ページ内に複数のJSXプログラムを配置するための改造を行いました．

ボタンで元波形を選択してください
Please select an original wave by buttons

元波形
original wave

周波数成分（赤：実部，青：虚部）
Spectrum ( red: real part, blue: imaginary part )

ソースコード

ソースコードを以下に示します．

mainメソッドに，「元波形を表示するcanvasのid」「周波数成分を表示するcanvasのid」「sin(x)ボタンのid」「sin(x+30)ボタンのid」「矩形波ボタンのid」を渡してください．7行目から13行目で，与えられたidを元に，仮想座標をサポートするVCanvasの初期化などを行います．次に15行目でサンプル数（ここでは80）をpに代入します．

19行目から57行目はグラフィック表示のためのdftメソッドの定義です．内容は，描画領域のクリア（20, 21行目），軸などの描画（23〜29行目，40〜47行目），DFT（35〜38行目），グラフ描画（31〜33行目，49〜56行目）などです．

58行目から始まるsinメソッド，63行目から始まるsin2メソッド，68行目から始まるrectangleメソッドは，それぞれ波形を計算し配列waveに代入し，上記dftメソッドを実行します．これらは，その直後（74〜76行目）でそれぞれのボタンが押された際に実行されるメソッドです．無名関数で定義しても良かったのですが，確認のために一度変数に代入しています．

80行目以降のFGクラスはFunctionGeneratorクラスです．色々な波形を生成するメソッドを定義していく予定ですが，今のところ何もできないに等しいです．

GUIアプリを作ってみた感想

JSXを初めて見たときは，「Javaっぽい」と思ったのですが，実際にGUIアプリを組んでみると「Javaより数倍楽」ということに気づきました．描画領域に簡単にアクセスできて，ラッパークラスを簡単に定義できて，intとdoubleを厳密に区別しなくて済む＝numberクラスの存在がどれだけ幸せか計り知れません．一方JavaScriptとの比較では，メソッドや変数の型チェックが厳密であることの良さも実感できます．

公開したプログラムは，教材として利用することを想定しているので，他人がカスタマイズすることも考慮に入れています．ですので，ボタンを追加したり削ったりすることも考慮したいのですが，現状のJSXでは引き数の数が定義に基づいて固定されてしまっているので，可変長引数のサポートが望まれます．と言いつつ，Nylonに対応できれば，操作部と計算・表示部の独立性が高くなるので，早くNylon.jsxを開発したいと思います．

総合的に判断して，JSXは今後のシミュレータ教材開発言語として最適です．徐々にノウハウを貯め，ライブラリを充実させ，どんどん授業に使っていこうと思います．

注意事項：JSXのサンプルなどを見ると，クラス名にApplicationが使われることが多いのですが，ブログ上に複数のJSXプログラムを張り付けると，クラス名が重複してしまい動作しないことがあります．クラス名は面倒でも個別に付けたほうが良さそうです．JSXをコンパイルして作成されたJSは，全てグローバル変数JSXに紐付けられます．よって，複数のJSXプログラムを同一ページ内に配置するとコンフリクトし，最後に読み込んだスクリプトしか実行できなくなります．コンパイル後にJS内の「JSX」を別の単語に置換すれば良いものと思われますが，スマートな解決策を期待したいところです．

github上のソースコード

以下のリンクからGUI版DFTのソースコードを参照できます．バグがあったらこっそり教えていただけると助かります．

dft_gui.html：GUI版DFTのHTMLファイル．

dft_gui.jsx：GUI版DFTの中枢部．

vcanvas.jsx：仮想座標をサポートしたグラフィック描画クラス．まだメソッドが揃っていません．

dftlib.jsx：DFTに関するライブラリ．あまり独立したファイルにする意味が無いのは秘密．

dft_gui.js：dft_gui.jsxをコンパイルして作成されたJS．特に最適化オプションは付けていません．

追記

同一ページ内に複数のJSXプログラムを配置できないことについて追記しました．（2012/6/27）

ツイート