半加算器・全加算器を組み合わせた論理回路が、2進数の四則演算を解いていく過程を光の信号として可視化するインタラクティブなビジュアライザです。
ダーク背景の回路図の上を、シアンに光るパルスが配線を伝い、ゲート(XOR / AND / OR / NOT)を点灯させながら答えにたどり着く様子を観察できます。信号が通過した配線は「1 = 明るい光 / 0 = 暗い光」で残るため、どの経路を通って結果が出たのかが一目で分かります。
ビルド不要・依存ライブラリなし。index.html をブラウザで開くだけで動きます。
- A・B に 0〜32 の数を入力
- タブで演算(加算 / 減算 / 乗算 / 除算)を選択
- 「▶ 計算開始」を押して、信号が回路を流れるのを眺める
速度スライダー(0.3〜4x)と一時停止ボタンで、桁上げの伝播をゆっくり追うこともできます。
| 演算 | 方式 | 見どころ |
|---|---|---|
| 加算 | リップルキャリー加算器(半加算器 ×1 + 全加算器 ×5) | 桁上げが bit0 から bit5 へ波のように伝播していく |
| 減算 | 2の補数 (A + ~B + 1) | B 入力直後の NOT ゲートと、定数「+1」のキャリー入力。最終桁上げで正負を判定 |
| 乗算 | シフト加算方式(6サイクル) | 積レジスタの最下位ビットが 1 のサイクルだけ加算器が発火し、右シフトを繰り返す |
| 除算 | 引き戻し法 / restoring division(6サイクル) | 減算器で R−B を試し、負なら引き戻して商ビット 0、正なら商ビット 1 |
乗算・除算はレジスタ(ビットセル)表示と動作ログ付きで、実際のハードウェアが順序回路として計算を進める流れを再現しています。
- 単一の HTML ファイル(Vanilla JS + SVG)、外部依存なし
- 回路はノード(ゲート・パッド・分岐点)と配線のグラフとして構築し、トポロジカルソートで評価
- 配線長に比例した伝播遅延をスケジューリングし、
stroke-dasharrayとパスに沿って動く光点でパルスを描画 - ゲート遅延・配線遅延の積み重ねにより、リップルキャリーの遅延が自然にアニメーションとして現れる
MIT