Project Description

• Visualize how sorting algorithms work with colored vertical bars

Color Meanings

• When a bar is blue, it is inactive. This means that bar is unsorted and is currently not being compared.
• When a bar is red, that means that it is being compared with the other red bar.
• When a bar is purple, that means that it is in its final sorted position.

Code Hierarchy

• All of the code related to the calculation and display is in ./src/SortingVisualizer
• All of the front end is contained in the React component SortingVisualizer
• All of the sorting algorithms are implemented and member functions of SortingVisualizer
• The animations are implemented as a member function of SortingVisualizer that gets called once a sorting algorithm has completed

Sorting Algorithms

• Each sorting algorithm is its own member function of SortingVisualizer
• A copy is made of the underlying state array array called tempArray
• During the sorting algorithm, all computation and editing is done on tempArray, not on array
• This is because setState, which would be needed to edit array, is asyncronous, and does not guarantee completion before the next line of code.
• You can read more about this here
• On every comparison, swap, or final sorted position, an object for animation gets pushed to the animation array
• For more information about how the animations work, look here

Animations

• Animations are stored in an array in the state of SortingVisualizer called animations
• This array gets populated during a given sort with a sequence of objects
• These objects are in the form {type: <type of animation>, indices: <indices of arrayBars that the animation applies to>}
• The types are as follows:
  • "compare", with the indices of bars being compared
  • "swap", with the indices of bars to be swapped
  • "sorted", with the indices of bars that are in their final sorted position
• The animations get displayed after the sorting terminated, by using SetTimeout() to show the animations synchronously
• The state variable array, which contains the underlying array that gets sorted, is edited during the swap animation
• This is because the bars get their height directly from array
• This means that the timeout has to be long enough for setState() to be guaranteed to be completed before the next call. Otherwise, the state may not be changed before the next swap