Motivation
Sorting problem are classic introductory topic for any first-year computer science. The algorithms are little bit intimidated at the first place, but they introduce a variety of interesting concepts to guide students to think like programmers for better problem-solving.
My goal here is to create a tool to visualize sorting algorithms. I hope a clear visualization can aid student to understand these algorithms. There are a lot of website for visualizing algorithms. In fact, I already made a website for that purpose. Most of them are just standalone websites. However, my challenge is to integrate the visualization within the blog post.
As mention on the previous blog, I use the MDX format compose the blog posts. MDX allow us to inject the JSX elements inside the markdown files. For the implementation, I choose Svelte to embed interactivity within the blog post because its simplicity.
Features
The visualizer supports these features below
- Set the number of elements in the array (from 10 to 100 elements)
- Choose your algorithms
- Bubble sort
- Selection sort
- Insertion sort
- Merge sort
- Quicksort
- Heap sort
- Change the sorting speed (even when the animation is running)
- Play, pause and resume the animation
Tools I use
- Svelte for frontend UI
- For animating the sorting process, I use function generator to create a generator function. The generator function will yield the current state of the array after each step of the sorting process.