Bubble Sort

Bubble Sort is a basic sorting algorithm, often called the simplest. It's also known as "sinking sort" and was one of the first such algorithms ever developed.

The algorithm follows an intuitive procedure:

  1. Compare the first two elements of the array
  2. If the first is larger than the second, swap them
  3. Repeat with the second and third elements until the last element is reached
  4. Repeat steps 1 to 3, iterating one element less close to the end of the array each time until you have reached the beginning

In simpler terms, the algorithm takes the largest remaining value to the end of the array for a subset of the array.

Bubble Sort is inefficient, requiring $O(n^2)$ time complexity in the average and worst cases. Modern sorting algorithms have largely replaced it.

Visualization

I used HTML5 Canvas to render the visualization. Each bar's height represents the magnitude of its value in the array.

The visual shows each step with a small delay so users can see what's really happening, and the bar that is currently moving is highlighted.

Instructions

The box labeled "Number of elements" determines how many numbers the array to be sorted will contain.

The array will be filled with values from 1 to the number you enter in the box, then shuffled so that it can be resorted.

Enter a value you wish to visualize and click "See it!" to begin the animation.

Use the speed slider to control how fast the animation moves.

Try it out!