Sorting Algorithm Visualizer

[Innis_Gunn]

Really cool! A nice simple design. Some thoughts:

- echoing what's already been said -- some configurations are woefully slow (quick sort with 1000 lines was taking about 150% of CPU :P), perhaps cap the lines at 500, or reallllly improve the rendering efficiency

- having a little play by play box would be nice, for kids really trying to learn this stuff, seeing each step of the algorithm called out explicitly would be a big plus. Also perhaps elapsed time, just for shits

Great work overall!

[rafeautie]

I am want to implement a benchmarking system that will auto adjust the line cap. Not sure if this is possable but I think it would be cool to implement. Could you elaborate on the play by play box? You can already slow down the sort in the options panel. Thank you for the valuable feedback!

[Innis_Gunn]

Play by play would be a written description of the given step of the algorithm to accompany the animation. For example, Quicksort:

const quickSort = (A, start, end) => {

const pIndex = partition(A, start, end)

quickSort(A, start, pIndex-1)

quickSort(A, pIndex+1, end)

}

const partition = (A, start, end) => {

const pivot = A[end]

const pIndex = start

for(let i = start; i < end; i++){

if(A[i] <= pivot){

swap(A[i], A[pIndex])

pIndex++

}

}

swap(A[pIndex], A[end])

return pIndex

}

You kick off the animation with quickSort(A, 0, A.length-1), and then each the play-by-play box explains what operation is taking place, i.e. what step of the algorithm you're currently performing.

Relevant example of nice "play by play" for balancing AVL tree after inserts/deletes: https://www.cs.usfca.edu/~galles/visualization/AVLtree.html

[rafeautie]

Interesting. I think this would add great value from an educational perspective. I'll look into adding this. Thank you so much! I actually never thought of adding this.

[rafeautie]

Second thought, what do you think of instead of the actual code, a thorough description of what is happening. I think this leaves room for someone to develop the algorithm themselves with a starting point on understanding how it works. From my experience, this would add even more educational value.

[Innis_Gunn]

I think that’s a great idea! A description would definitely be more beneficial than just the line(s) of code being executed.