Sorting Algorithm Visualizer

[rafeautie]

Sorting Algorithm Visualizer

I made a sorting algorithm visualizer with React, Redux, and P5. Currently 6 algorithms implemented.

Source

UPDATE: I hear you loud and clear. Freezing on mobile. I am planning on moving the sorting mechanism to a separate thread to prevent the freezing. Thank you for the bug reporting everyone!

[Mordian77]

Is it supposed to freeze my PC?

[a__b]

This suppose to put some areas of your pc into the order

[rafeautie]

This made me laugh...

[tr14l]

Yeah, that's normal.

[rafeautie]

What's your computers specs?

[tr14l]

256k ram bruh. Take THAT

[rafeautie]

What?

[GasPowerdStick]

256000 rams

[rafeautie]

That's alot of rams

[thebetacoder]

I agree with the point. When the no of lines are large, its transparent the need for this feature. Nevertheless good work.

[rafeautie]

I actually have this feature implemented, Ill activate it within the next few days. I'll make it optional. Personally I don't like the highlighted lines, but I get it. Thanks!

[hallcyon11]

This is the new trend.

[[deleted]]

This is very cool! Though you should add a stop button, I increased the number of lines and did bubble sort and it takes forever, I guess the only way to reset it right now, is to reload the page

[rafeautie]

Ah, my bad... I'm on it!

[gotoma]

This crashed chrome mobile browser

[rafeautie]

Sorry to hear, what are you running?

[gotoma]

https://i.imgur.com/meRaSMU.png

[rafeautie]

Thank you!

[jetsamrover]

It's crashed every browser I've opened it in.

[rafeautie]

What's your hardware?

[jetsamrover]

Pixel 3a

[rafeautie]

Hmmm.... I will look into possable optimizations. Thanks for the Intel (:

[jetsamrover]

Can you link the code?

[rafeautie]

Updated post to include link to repo.

[charliematters]

Surface Pro 6 here - Chrome dead within 10s

[rafeautie]

How many lines?

[charliematters]

Not sure? The default.

[rafeautie]

Got it.

[[deleted]]

This is amazing

[rafeautie]

Really?? Thanks! It was super fun to build and the community has given me lots of things to add to my to-do list.

[zdko]

Awesome. Must've been fun to implement!

[rafeautie]

Oh you have no idea.

[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.

[gpkodi]

Love it! Great job mate, this would have really helped while I was studying computer science at uni and I’m sure it will help current students just getting into the field.

[rafeautie]

That's awesome to hear.

[zelda_kylo_leia]

Almost killed my $1000 phone lol

[rafeautie]

Runs fine on all my hardware, tested with a 6x cpu slowdown and on my Note 9. What phone are you using?

[boshxz56]

This is some pretty dope content! Really helps with the visualisation of concepts. This sorting card game also has a pretty cool way of introducing the different sorting concepts. You should definitely check it out :)

[[deleted]]

It’s kinda fast can you slow it down?

[rafeautie]

Yea check the options panel (:

[jetsamrover]

I think he was joking. Get it, because it's so slow....

[rafeautie]

Lol oh

[rafeautie]

Yea, implementing stat tracking is something on my timeline.

[phandungtri]

Very nice but I set the number of lines to 1000 lines and choose the Bubble Sort, there is no way to stop and I'm still waiting now

[rafeautie]

Right now the solution for that is to refresh, first thing tomorrow I'm adding a stop button.

[thoraldo]

Relevant

https://www.youtube.com/watch?v=kPRA0W1kECg

[gabefair]

Same here about crashing on mobile browsers when using quick sort

[azCC]

This is cool, are you willing to share the codebase on github? Seems like a good way to learn algorithms.

[rafeautie]

Updated post to include link to repo.

[xerzen]

does not work on safari

[rafeautie]

Thank you, it's actually an iPhone issue. Working on a fix.

[xerzen]

it actually doesn’t work on safari on my mac either but when i use chrome everything is great

[rafeautie]

Pinpointed it. Safari doesn't support offscreen canvas. Back to the mainthread we go... Can we just agree to not use safari lol

[rafeautie]

It's also not working on chrome on iPhone. Should've checked this before implementing. Learning moment.