AlgoViz - アルゴリズムビジュアライザ

追記(2026-10-07)：ビジュアライザを27個追加しました。変更点は末尾の「2026年9月までの更新」と AlgoViz にビジュアライザを27個追加しました を参照してください。以下は2026年2月の公開時(v1.0)の内容です。

AlgoViz - Brainfuck

Brainfuckの実行をリアルタイムで可視化するビジュアライザ兼エディタです。

技術構成

• フロントエンド: React (Vite)
• インタープリタ: C++ → WebAssembly (Emscripten)

主な機能

• コード編集・実行 / 一時停止 / ステップ実行 / ステップバック
• テープのセル値・文字・アドレス・ポインタ位置をリアルタイム表示
• 実行速度変更（インターバル: 0〜1秒）
• ポインタ自動追従とカメラ手動制御
• コードの保存
• ヘルプ（文法・キーボードショートカット）

AlgoVizについて

VisuAlgoの完全日本語版+αを目標に、様々なアルゴリズム・データ構造・機械の動作を可視化するWebアプリとして継続開発予定。

2026年9月までの更新

Brainfuck だけだった AlgoViz に、ビジュアライザを27個追加しました。1ページ1アルゴリズムで、Brainfuck と合わせて28ページです。

追加したビジュアライザ

• グラフ: 幅優先探索 (BFS) / 深さ優先探索 (DFS) / ダイクストラ法 / プリム法 / クラスカル法
• 木: 二分探索木 / AVL 木 / B木 / ヒープ / trie / ハフマン木 の構築、ヒープソート
• 配列: バブル / 選択 / 挿入 / シェーカー / クイック / マージ / バケット / 基数ソート、線形探索 / 二分探索
• データ構造: スタック / キュー / デック / Union-Find（経路圧縮と union by size は外して比べられる）
• オートマトン: 決定性有限オートマトン (DFA)

技術構成（更新後）

• フロントエンド: React (Vite) + PixiJS
• ロジック: C++ → WebAssembly (Emscripten、emscripten/emsdk:5.0.1 に固定)
• 配置: 一般のグラフは MDS → Stress Majorization → 凸包パッキング、木は Reingold-Tilford、配列は一列

設計方針

• AlgoViz が保証するのは「アルゴリズムが動く様子を1手ずつ見せること」だけ。 解説文・用語の定義・計算量は外部の資料に任せ、ページにはヘルプ（操作方法）と凡例（色や数字の意味）だけを置く
• 1ページ1アルゴリズム。 モードを切り替えるプルダウンは置かない
• 論理は C++、見た目は JS。 JS 側は視覚データだけを受け取って描画し、それが BFS なのかオートマトンなのかを知らない。迷ったら「別の描画方法に差し替えても必要か」で決める

その他の変更

• ダークモードに対応
• スマホでピンチ操作による拡大・縮小ができるようにした
• Brainfuck のセルの値を mod 128 / 256 で切り替えられるようにし、EOF を 0 から -1 に変更
• Brainfuck の「一気に実行」で、停止しないプログラムを渡すとタブが固まっていたのを、5000万ステップで打ち切るように修正
• ハフマン木・trie・DFA は char 単位で処理しているため、マルチバイト文字には未対応