Algorithm Visualizer

An interactive visualizer for sorting and pathfinding algorithms, built from scratch with HTML, CSS, and JavaScript.

Live demo: https://galactixen.github.io/algorithm-visualizer/

What it does

Sorting

• Bubble Sort, Insertion Sort, Merge Sort, Quick Sort
• Animates comparisons and all the swaps step by step instead of just showing the final result
• Tracks all the comparisons, swaps, and time so you can actually compare algorithms against each other on the same array
• Adjustable speed, pause/resume, random array generation

Pathfinding

• BFS, DFS, Dijkstra, A*
• Click to place start/end nodes, click and drag to draw walls
• Random maze generator
• Animates the search expanding outward, then highlights the final path once it's found
• Shows visited node count, time, and the algorithm's time complexity

How it works

Both sorting and pathfinding use JavaScript generator functions (function* / yield) so the algorithms can pause after every comparison, swap, or visited node instead of running right away instantly. A separate "driver" function calls .next() on the generator on a timer, redraws the entire canvas, and repeats, which is what actually creates the animation we see.

Running locally

Clone the repo and open index.html in your browser. There is no build step required.

Tech stack

HTML5 Canvas, vanilla JavaScript, CSS. Deployed with GitHub Pages.