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