プログラミングでバブルソートの可視化【JavaScript】

JavaScript
スポンサーリンク

本記事ではバブルソートの可視化についてのプログラムを紹介しています。

 

JavaScriptを使っています。

 

バブルソートとはソートアルゴリズムの一つで、隣り合う要素の大小を比較しながら整列させるものです。

 

YouTuberに動画もアップしてあるのでそちらもご覧ください↓

 

【早送り】プログラミングでバブルソートの可視化 / JavaScript
スポンサーリンク

バブルソートの可視化についてのプログラム

DEMO

まずこちらが完成品。

 

Start ボタンを押すとソートが始まり、並び替えが終わったら経過時間が表示されます。

今回の例ではエレメント数が800、つまり800個の棒を昇順に並び変えています。

 

本記事のコードはYouTubeのThe Coding Train というチャンネルの “Coding Challenge #114: Bubble Sort Visualization” という動画で紹介されているものに、シャッフル・スタートボタンと時間経過をはかるものを追加しただけのものです。

 

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 にしています。

 

 

以上、バブルソートの可視化についてのプログラムでした。

 

(選択ソート気味っぽいかも)

 

【猿でもできるソート】プログラミングでボゴソートを可視化
ソートアルゴリズムの一つ、ボゴソートをプログラミングで可視化したものを実装しました。JavaScriptで猿でもできるソートやランダムソートとも呼ばれるボゴソートを視覚化するプログラム。

 

【JavaScript】プログラミングでクイックソートの可視化
プログラミングでクイックソートの可視化をしたものを実装。JavaScript を使ってソートアルゴリズムの1つであるクイックソートの視覚化のプログラムを書きました。

参考資料

 

コメント