Bubble sort visualization

"The bubble sort algorithm is short and simple, but this comes at a price of low efficiency - an ideal subject for a beginning coder! Lower values 'bubble up' to the top if the array is displayed vertically - hence the name. In our case the array is horizontal, so they 'bubble left' instead. To make things a little more exciting, we'll assign a different color to each number and display the array after each pass."

"[13-14] fill the array with numbers: [0, 1, 2, 3...] [20-26] Shuffle the array. Because of the way we filled the array in [13-14], it is already sorted. To see the bubble sort in action, we have to destroy this order. To do this, we (pseudo-)randomly select two elements and exchange their values. We repeat this process shuffleLength times. [29-48] Actual sort and visualization: [30] We assume that no elements will have to be swapped, which means all the elements are already sorted."

The bubble sort algorithm repeatedly scans an array, comparing adjacent elements and swapping them when they are out of order until no swaps are needed. The example fills an array with sequential numbers and then performs randomized pairwise swaps a set number of times to shuffle the array before sorting. Visualization uses an HTML5 Canvas and assigns a distinct color to each number, showing the array after each pass so lower values move left. The implementation highlights the algorithm's simplicity and low efficiency and presents a one-dimensional version prior to a 2D extension.

Read at Slicker