An animated visualization of sorting algorithms.
- Bubble Sort
- Comb Sort
- Heap Sort
- Insertion Sort
- Selection Sort
- Shell Sort
- Merge Sort
- Counting Sort
The animation object contains the frames which hold the indices of the elements to be highlighted and/or swapped.
The frames are essentially the stored "steps" of the algorithm.
animation = { "frames":[ { "elements":[], "highlights":[0, 1] }, { "elements":[0, 1], "highlights":[0, 1] } . . ] }The animation object is created in a sorting algorithm.
Particular events are stored as frames of the animation.
class Algorithms { static bubble(e, order) { let elements = e; let solution = new Animation(); let swapped = false; for (let i = 0; i < elements.length; ++i) { swapped = false; for (let j = 0; j < elements.length - 1; ++j) { solution.addFrame(new Frame([], [j, j + 1])); // Record to-be-highlighted elements if (order == "desc" ? elements[j] < elements[j + 1] : elements[j] > elements[j + 1]) { swapped = true; const temp = elements[j]; elements[j] = elements[j + 1]; elements[j + 1] = temp; solution.addFrame(new Frame([j, j + 1], [j, j + 1])); // Record to-be-swapped & to-be-highlighted elements } } if (!swapped) { break; } } return solution; } }The animation is played by a function that highlights the current elements in a frame and/or swaps them.
- Refine Swap Animation
- Algorithm Comparison
- Custom Sort Order (Ascending or Descending)
- Algorithm Details