Pairwise AutoAnimate Sorting Visulization

Simple list animations with AutoAnimate?

After recently hearig about AutoAnimate I figured I'd give it a try to visualize the sorting of my lists.

Sorting

For those unaware, my Pairwise Sorter allows user to dump a list of items into it, and it will ask the minimum number of comparisons - presenting the user two items and having them rank them - to fully sort the list.

For those who can will recognize this as a binary-based sort, but for those that don't this visulation would greatly help convery it, hence the desire for it.

First to generate all the states of the sorder to visualize, I needed to keep track of the current order, and the state of the current comparision - which contained the current index, and both minimum and maximum indexes that would be attempted next.

After generating these states and passing them to the client, the mutation of HTML was needed - and as the AutoAnimate library worked by animating additions, removals, and position changes in HTML elements, I couln't simply throw out all the existing HTML elements are create them all new.

It took a bit to essentially reimplement any UI-frameworks key-based HTMLElement caching strategy, but it was working, and with the - as advertised - one line addition of AutoAnimate, the list was being smoothly animated!

Index Coloring

While this conveyed items appearcing, it didn't convey the binary-nature of the sorting, so for each element in the list I added a ::before text that I would style based on if that index was being considered as an insertion place for the current element.

This allowed at the beginning of each new item the number of green elements to be divided in half every comparision.