Interactive Algorithm Visualizer

Aug 4, 2026knoxiboy

EditReport

Interactive Algorithm Visualizer

Explore sorting and searching algorithms visually. Use Play, Pause, Step Forward, and Step Backward to trace each comparison and swap at your own pace. Adjust the array size and animation speed with the sliders.

Controls

Control	Description
▶ Play	Run the animation continuously
⏸ Pause	Stop at the current step
⏭ Step Fwd	Advance one step
⏮ Step Back	Revert one step
Array Size	Resize and regenerate a random array
Speed	Control milliseconds per animation frame

Color Legend

Color	Meaning
🔵 Blue	Default / unsorted element
🟡 Yellow	Elements currently being compared
🔴 Red	Elements being swapped
🟢 Green	Elements confirmed in final sorted position
🟣 Purple	Current binary search range
🟩 Emerald	Found target element

Live Sandbox

🧮 Algorithm Visualizer — Bubble Sort

Bubble SortQuick SortMerge SortBinary Search (sorted)

Array Size: 8Speed: 300ms

45

12

89

34

67

23

90

11

Default Comparing Swapping Sorted

Algorithms Included

Bubble Sort

Time Complexity: $O(n^2)$ average and worst case, $O(n)$ best case (already sorted)
Space Complexity: $O(1)$ — in-place

Repeatedly compares adjacent elements and swaps them if out of order. The largest unsorted element "bubbles" to the end with each pass.

Dry Run (array: [4, 3, 2, 1]):

Pass	Step	Comparison	Swap?	Array State
1	1	[4, 3]	✅	[3, 4, 2, 1]
1	2	[4, 2]	✅	[3, 2, 4, 1]
1	3	[4, 1]	✅	[3, 2, 1, 4]
2	1	[3, 2]	✅	[2, 3, 1, 4]
2	2	[3, 1]	✅	[2, 1, 3, 4]
3	1	[2, 1]	✅	[1, 2, 3, 4]

---

Quick Sort

Time Complexity: $O(n \log n)$ average, $O(n^2)$ worst case
Space Complexity: $O(\log n)$ average stack depth

Partitions the array around a pivot element. Elements smaller than the pivot go left; larger go right. Recursively sorts sub-arrays.

---

Merge Sort

Time Complexity: $O(n \log n)$ — guaranteed
Space Complexity: $O(n)$ auxiliary

Divides the array into halves, recursively sorts each half, then merges the sorted halves in linear time.

---

Binary Search

Time Complexity: $O(\log n)$ — requires sorted input
Space Complexity: $O(1)$

Repeatedly halves the search range by comparing the target with the middle element. Purple bars indicate the active search window; emerald marks the found element.