こんにちは、Karouです。今回は、ソートアルゴリズムの動きを音と映像でリアルタイムに体感できるWebアプリ「Sorting Cinema」を作った話をします。
きっかけは「ソートの動き、音にしたら面白くない？」
ソートアルゴリズムの可視化はYouTubeなどでもよく見かけます。バーがぐにゃぐにゃ動いて、最後にきれいに揃う——あれ、見ていて気持ちいいですよね。
でも、見るだけじゃもったいない。比較やスワップのたびに音が鳴ったら？アルゴリズムごとに違うリズムが生まれたら？そんな発想から「Sorting Cinema」の開発が始まりました。コンセプトは「Beat Grid Fusion」——ソートの確定的なロジックと音楽のライブパフォーマンスを融合させるというものです。
25種類のソートアルゴリズム
Sorting Cinemaには、5カテゴリ・25種類のソートアルゴリズムを搭載しています。
搭載アルゴリズム一覧
- 比較ソート（11種）：バブル、選択、挿入、マージ、クイック、ヒープ、シェル、カクテル、ノーム、コム、Timソート
- 非比較ソート（3種）：カウント、基数、バケットソート
- 並列向け（2種）：奇偶ソート、ビトニックソート
- 独特な構造（2種）：パンケーキソート、ストゥージソート
- ジョークソート（3種）：ボゴソート、スリープソート、スローソート
遅いアルゴリズム（ボゴソートなど）は要素数を自動制限する安全機構付き。ブラウザがフリーズする心配はありません。
3つのモード
🎬 シネマモード
メインのモードです。アルゴリズムを選んで再生すると、バーの動きに合わせて音が鳴ります。要素数（10〜100）、再生速度（11段階）、音階（ペンタトニック、メジャー、ブルース、琉球音階など8種類）を自由に組み合わせられます。
ステップ実行機能を使えば、1操作ずつ進めながら「今なにが起きているか」をリアルタイムの解説テキスト付きで追うことも可能。ドラッグ&ドロップで配列を手動で並べ替えてから実行することもできます。
🏁 レースモード
2〜4つのアルゴリズムを選んで、同じ配列を同時にソートさせるレース。並べて動かすと、アルゴリズムごとの「性格」の違いが一目瞭然です。クイックソートの大胆な分割、バブルソートの地道な交換——操作回数とともに順位が表示されます。
🧩 クイズモード
ソートの動きを見て「これは何ソート？」を当てるクイズ。4択で出題され、ソートが終わる前に回答することもできます。同じカテゴリのアルゴリズムが選択肢に並ぶので、見分ける力が鍛えられます。
音の仕組み — 3層のオーディオレイヤー
Tone.jsを使い、3つの音のレイヤーを重ねています。
- メロディ：配列の値をペンタトニックなどの音階にマッピング。比較・スワップのたびに対応する音が鳴る。オクターブ3〜6の48音を使い、100要素の配列でも音が被らない
- コード進行：バックグラウンドでメジャー/マイナーのトライアドが進行。ソートの進捗に応じてコードが変化する
- ドラムビート：比較→ハイハット、スワップ→スネア、要素確定→キック。アルゴリズムの動きがそのままリズムパターンになる
クイックソートは激しいビートを刻み、挿入ソートは穏やかなメロディを奏でる。同じアプリなのに、アルゴリズムを変えるだけで全く違う「曲」が流れてくるのが面白いところです。
その他の機能
- 4種のビジュアル：バー、サークル、カラーヒートマップ、スキャッターの4つの表示モード
- URL共有：アルゴリズム・要素数・音階・速度などの設定をURLパラメータに含めて共有可能。Xへのシェアボタン付き
- 多言語対応：日本語・英語の2言語に対応
- 配列プリセット：ほぼ整列済み、逆順、山型、谷型、重複多数の5パターン
技術スタック
React 19 + Vite 8で構築し、Tone.jsでオーディオを制御。Firebase Hostingでデプロイしています。requestAnimationFrameループで60fpsの描画を維持しつつ、React.lazyによるコード分割でメインバンドルを275KBまで削減しました。
ソートアルゴリズムを「見る」だけでなく「聴く」ことで、アルゴリズムの振る舞いが直感的に理解できます。ぜひヘッドフォンをつけて体験してみてください。