Visualizing bubble sort in 5 minutes using HTML5 canvas API

Photo by Andriyko Podilnyk on Unsplash

For most developers, bubble sort is one of the first algorithms we learn. Therefore, visualizing it can be highly satisfying and feels a bit like meeting an old friend after a long time.

This article will take you through visualizing the bubble sort algorithm using HTML5 canvas API.

If you would like to jump straight to the results and have a look at the code, here is a codepen.

In the meantime, below is a little sneak peek of what we are going to accomplish here.

outcome

Let’s start by creating a project, then serve it using devServer in vscode.

Add two files, index.html and script.js.

initial setup

Now lets jump right ahead and start coding

The first thing we will need, is an unsorted array to sort.
Let’s write a helper function for creating shuffled arrays.

Cool. Now, we will write a simple implementation of the bubble sort algorithm.

Next, we'll get our canvas and create a context.

So we got all the basics covered, and now it’s up to us to decide how to visualize the array.
The most straightforward way is to just draw a rectangle corresponding to each array element, and set the height according to that element value (the higher the value the higher the rectangle will be).

Here is a representation of our custom rectangle.

Let’s test that everything is working as expected, by drawing our shuffled array.

Multiply each height param by 5 to get a nice scale, so each pixel will equal 5 pixels.

We can make the height and width of the rectangle dynamic, by making it span the full height and width of the screen.

Try doing this yourself.

Here is a working example for the lazy ones (notice the calcMembersHeightScale and calcMembersWidth functions).

If all goes well, you should see something similar to the following in your browser.

expected result

Now, let’s go back to our sorting function. What are the actions and states we care about? compare, swap, and sort.

Let’s add a custom action dictionary.

Change our bubble sort function to accept an onAction callback, and call it when an action is made in our bubble sort with the appropriate action.

We are almost done so hang in there!

What should we do in each action?

Give the members a different color based on the action, and “move” them if necessary - which will just be swapping their values.

Now let’s create an action map, according to our known actions.

We seem to have all of the parts needed in order to visualize this nifty little thing!

Let’s give it a try.

bubbleSort(randomArray, (action) => {
  actionsMap[action.type](action, arrayMembers);
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  drawAll();
});

I’ll be damned! it seems like we got only the fully sorted state!

How can we solve this? we need to time our painting somehow.

Let’s add two variables, speed which will determine how much time will pass between each step, and tick to count each call to our onAction callback.

A couple of things you should notice in the above example:

• Clearing the canvas on each iteration.
• Resetting the color property for all of our rectangles on each iteration.

Now putting it all together, we should end up with something like this.

And there you have it, we just visualized this cool algorithm in 5 minutes!

here are some more visualizations I created.

Hope you enjoyed this little blog post, don’t forget to clap and do a victory dance!