Rainbow Sort Visualisations | Hacker News Reader

Rainbow Sort Visualisations

ljs.io

170 pointslolo_51 comments

Really nice. The examples suggest to me that a lot of algorithms would be more accessible to people if they could be visually represented in some way. The timing is important -- the slowness of the bubble sort compared to the quickness of the quick sort gives one an immediate sense of why one would generally want the latter over the former.

Often it has to do with speed of implementation and a data set that is small enough for negligible difference. There is also an issue of whether the algorithm keeps duplicate ordering intact.

This is a fantastic set of visualisations that was posted on here before at some point - http://www.cs.usfca.edu/~galles/visualization/Algorithms.htm...

I'm more interested in the visual aesthetic, but I've built a few sculptures[1] visualizing algorithms. It's something I'm hoping to expand on when I have more time and resources. I'd write a bit more about them, but I'm on my phone getting ready for work.

[1] http://wollw.github.io/Cellular-Polymaton

http://m.youtube.com/watch?v=N_smOznDDJs

http://m.youtube.com/watch?v=vbtvAQLDcrs

Wow nice, love your work!

Thanks.

I guess I should expand on my previous comment...

Despite what that github page says about not having any reason for making these sculptures, I'm currently thinking of them as a way to highlight the kinds of concepts and technology that our computer-saturated world relies on to operate. Of course the obvious audience is people who already have an understanding of computer science, but by making them aesthetically pleasing I hope to expose people who aren't interested in algorithms to some of the algorithms that influence or make up the technology they rely on. They're intended to be shown in a gallery space, but now that I have space to show in they're more than 500 miles away from me; hopefully I'll put a show together later this year.

Reminds me of this: https://www.youtube.com/watch?v=kPRA0W1kECg

Dude, don't tempt me to add sound :P

Sound is cool at first but then gets way annoying. I had never heard of radix sort, 0 comparisons.

Are you planning on adding more sorting algorithms like mergesort?

Yeah, I am kidding - don't worry I won't, I can imagine that getting pretty irritating :P

I did this as a quick hack on a whim about a year ago (was a visualisation I wanted to see but couldn't find one quite like this), I am pleasantly surprised by the positivity on this (I kinda posted it on a whim), so I think I will probably hack on it again :-)

It's tempting to code up a whole bunch of sorting algorithms, merge and heap sort are definitely high on the list.

Radix sort is one of those tricks that doesn't help often, but every once in a while can produce spectacular results. Here it is showing a 4x speedup on a particular operation in git:

https://github.com/git/git/commit/8b8dfd5132ce91f632b5303c39...

I've played with sound as well with sort visualizations - it has been disappointing and more irritating than enlightening, but maybe there's a proper angle on it somebody will find that adds to the understanding of the algorithm.

And as the others have said - your rainbow viz is really nice, in a lot of ways :)

I find this visual+audio version both entertaining and genuinely useful as tracking changes in multiple sounds at the same time that quickly, combined with the visual process gives more tangibility to the algorithm. Plus the punchline was unexpected and fits well to a "credits" part.

I will always remember 'Sorting out Sorting'.

Should exist on the web somewhere if you havn't seen it.

I'm seeing waaaay too much stuff happen all at once for quicksort. Frankly, most visualizations give you an inkling as to the logic behind an algorithm, but quicksort just sort of pops the field into the correct order in a blur.

Another classic sorting algorithm to visualize is heapsort.

Try turning down the block size (the value that defaults to 20), that will make it far slower - try 5.

I know that isn't too obvious, but this was something of a quick hack :)

Yeah, the problem is it just sort of "happens" without me being able to understand what's going on behind the scenes. For instance, all of a sudden half the screen is slightly more sorted, but I have no clue what went into getting it that way, even though it took more time to do so.

Yeah, I think I need to review this code + make it 'fairer' or at least somewhat smoother. The positive reaction here has motivated me to hack on this project again!

I looked through the code, I see why quicksort is such a blur now, and I don't see an obvious way to fix it. Since you are in a sense, benchmarking these algorithms.

One way to do it might be to allow the user to set the timeout in your defer function.

Setting the timeout to 1 second lets the user observe each run of your algorithms. You can see the partitioning behaviour a bit better like that.

Side note: this code is pretty. I should learn coffeescript.

I really need to jump back into the code, not looked at it for a while and take a look at improving how 'fairly' it benchmarks the algorithms. That's an interesting suggestion, will experiment with it.

Thanks for your kind comment on the code qual :) personally I only see the faults, for one I am sure I could improve perf... year-old code is often that way however! :)

I tried to implement shell sort in your system. Shell sort is much like quick sort in that it kind of divides and conquers. (you can see my horrid first timer work here: https://github.com/Ghoughpteighbteau/Rainbow-Sort )

My estimation is that you need to refactor the algorithms such that they hold their state inside a closure, and break after a set number of swaps. Say every 300 swaps they break and the canvas updates. This kind of background processing is such a pain in javascript.

Yes, but it should use two spaces for indentation, not a tab; according to coffeescript guidelines.

strange downvotes:

the statement is true and informative: https://github.com/polarmobile/coffeescript-style-guide#tabs...

to someone who was just learning about coffeescript.

Where I work we use tabs; has carried over to my personal projects some. Personally I prefer spaces ;-)

I didn't try 5, but at 2 or 1 my browser (Firefox) just hung until it was done and spit out the final image :(. Really neat idea, though :).

I love this as a visualisation. It would be great to provide links to the algorithms (if they were there, I didn't find them).

Thanks :)

Full source code is available at https://github.com/lorenzo-stoakes/Rainbow-Sort, no guarantees as to quality... all (4 :P) algorithms are there.

This is awesome. One thing I'd love to see is the ability to slow it down without decreasing the block size.

Thanks :D

This was just a quick hack a year or so ago, am open to enhancing it though - feel free to post any suggestions over at https://github.com/lorenzo-stoakes/Rainbow-Sort/issues :)

Add bogo sort and gnome sort.

All suggestions, even for these highly efficient sort algorithms, are welcome ;-)

Insert Sort, Heap sort.

Insert[ion] sort is already in there, heap sort is definitely high on the list!

Interestingly, I just migrated my Sorting Visualizer off of GAE this weekend. Its kind of similar - more customizable, much less attractive: http://aarondufour.com/

This is excellent and a great teaching tool. I tried putting something like this together a while back as a Java applet for one of my classes but couldn't get the color ordering function to work correctly. Did you use HSB?

Thanks! That's very kind of you :)

Yeah indeed, well, hsl with varying hue and set saturation + luminescence - see https://github.com/lorenzo-stoakes/Rainbow-Sort/blob/master/....

I experimented with RGB and it really didn't work, HS(B/L) work a million times better. Took a bit of trial and error!

Thanks for the link, you're absolutely right that RGB doesn't work. I modified my original one dimensional sort to make it look like your 2D one, and got this:

https://www.dropbox.com/s/0pjmjllmqh1x4ap/Screenshot%202014-...

I'm going to experiment with HSL and see if I can get it to work. Thanks again!

remids me of this: http://www.sorting-algorithms.com/

not as nice, but shows different algorithms and their speed

Nice. Sorry for the self promotion but seemed appropriate

http://greggman.github.io/doodles/sort.html

click one for a larger version

PS: My method of cycle counting may not make any sense.

See https://github.com/greggman/doodles for details

The first demo of bubble sort made me think the bottom row was being sorted and then the rows above were just the previously sorted row.

I like Aldo's visualizations a bit better: http://corte.si/%2Fposts/code/sortvis-fruitsalad/index.html

I almost got a seizure x(

Indeed, there should be a warning in the title. This can cause seizures.

Damn, I'm really sorry about that - I didn't think of that issue - perhaps a mod could add a warning of some kind?

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

Only more colourful and interactive.

"what's this 20 do?" "I'll set it to 1 and see what happens" "oh" "." "." "." "no"

Ha yeah, sorry about that! Quick hack, etc. etc.

Very cool! I second all the suggestions of adding more sorting algorithms. I might just try to recreate this myself in Processing.js...

Cool, bubble sort at (1) froze my tab.

Yeah, I will probably work on fixing that :) quick hack, etc. etc.

How many times do we need to re-implement sorting?

Why do we educate students to re-implement sorting again?

Because sometimes it's important to understand what your computer is doing for you.

Reply on news.ycombinator.com