Vue.jsでソートアルゴリズムを可視化してみた

Vue.jsでソートアルゴリズムを可視化してみた

2020年5月30日
Facebook にシェア
Pocket

概要

数字を大きい順に並び替えるみたいなことを、いかに効率よく少ない計算量でできるかみたいなことをやるソートアルゴリズムですが、変わっていくさまを見てみたいと思い可視化してみました。

リンク↓
https://ychof.com/posts/sort/

遅延を自由に変えれるので、自分の好きな速度で鑑賞できます(笑)
一応スマホでも見れます(chromeがおすすめ。safariだと、1msの概念がchromeより遅いためゆっくりな速度でしか鑑賞できない可能性あり。)

↓クリックでGIF再生できます

ソース↓
https://github.com/yamamoto7/algorithm–viewer

説明

こんなソート0.1秒以下で終わるところを、要所要所に遅延を挿入することで可視化しています。計算が発生しているところでも、遅延が入っていたり入っていなかったりしているためアルゴリズムの性能を正しく表せていません。

YouTubeで↓みたいなアルゴリズムを可視化したみたいな動画が好きでよく見ています。
今回作ったのはそれのパクリです。