本記事ではバブルソートの可視化についてのプログラムを紹介しています。
JavaScriptを使っています。
バブルソートとはソートアルゴリズムの一つで、隣り合う要素の大小を比較しながら整列させるものです。
YouTuberに動画もアップしてあるのでそちらもご覧ください↓
バブルソートの可視化についてのプログラム
DEMO
まずこちらが完成品。
Start ボタンを押すとソートが始まり、並び替えが終わったら経過時間が表示されます。
今回の例ではエレメント数が８００、つまり８００個の棒を昇順に並び変えています。
本記事のコードはYouTubeのThe Coding Train というチャンネルの “Coding Challenge #114: Bubble Sort Visualization” という動画で紹介されているものに、シャッフル・スタートボタンと時間経過をはかるものを追加しただけのものです。
HTMLファイルの作成
以下のような html ファイルを作成します。
CSS ファイルはこんな感じ。
JavaScript ファイルの作成
JavaScript ファイルは下記のように書いています。
Shuffle ボタンが押されたら、shuffle() 関数を呼び出し、 lapseTime_sec や timeVlaue の値をリセットし、ランダムな長さの棒をエレメントの数分表示しています。
ctx.clearRect() で画面のリセットをしています。
ctx.moveTo() で線の起点を決め、 ctx.lineTo() で線の終わりの点を決めています。
Start ボタンが押されたらソートが始まります。
ソートを行っている間は、Shuffle, Start のボタンは disable を ture にすることでクリックが出来ないようにしています。
そして、performance.now() で始まりの時間を記録しています。
ソートが終わったら、performance.now() で終わりの時間を記録し、endTime – startTime で経過時間を求めています。
そして、isSorted を ture にしています。
- GitHubのコード
以上、バブルソートの可視化についてのプログラムでした。
(選択ソート気味っぽいかも)
参考資料
- YouTube動画 The Coding Train : Coding Challenge #114: Bubble Sort Visualization
- 苦しんで覚えるC言語 / バブルソート
コメント