HTML5 の Canvas で sort を可視化してみた

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

プログラミングを学び始めた頃を思い出そうという!!っとことでソートに関するサンプルをつくってみました.

HTML5 の Canvas を使って sort を可視化してみました.

丁度プログラミングを始めたばかりの方だとかはソートアルゴリズムの勉強前にこういった見た目でどうなっているのか 見ておくだけでも学ぶ効率が上がるのではないかなぁ~と思ってたりします.

HTML5 の canvas と JavaScript があればこういったサンプルもあっという間に作ることができます! いやぁ~面白いです!!

thumb

Sample

下記は今回制作したサンプルへのリンクです.

Visual Sort

ナビゲーションにあるソート名を選択することで, その名前に応じたソートが実行され右側に対応するコードが表示されます.

Download

Reference

参考にさせていただいたサイトです.

気が向いたら, 他のソートも追加していこうと思います.

ちなみに, 個人的には Bidirectional Bubble Sort が一番好きです.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT