
Rainbow Sort Visualisations - lolo_
http://ljs.io/projects/rainbow/
======
allochthon
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.

~~~
wollw
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://wollw.github.io/Cellular-Polymaton)

[http://m.youtube.com/watch?v=N_smOznDDJs](http://m.youtube.com/watch?v=N_smOznDDJs)

[http://m.youtube.com/watch?v=vbtvAQLDcrs](http://m.youtube.com/watch?v=vbtvAQLDcrs)

~~~
lolo_
Wow nice, love your work!

~~~
wollw
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.

------
bpierre
Reminds me of this:
[https://www.youtube.com/watch?v=kPRA0W1kECg](https://www.youtube.com/watch?v=kPRA0W1kECg)

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

~~~
blueblob
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?

~~~
peff
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...](https://github.com/git/git/commit/8b8dfd5132ce91f632b5303c39cda2dfe30790f1)

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

~~~
lolo_
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 :)

~~~
GhotiFish
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.

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

~~~
GhotiFish
strange downvotes:

the statement is true and informative:
[https://github.com/polarmobile/coffeescript-style-
guide#tabs...](https://github.com/polarmobile/coffeescript-style-
guide#tabs_or_spaces)

to someone who was just learning about coffeescript.

------
saw-lau
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).

~~~
lolo_
Thanks :)

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

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

~~~
lolo_
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](https://github.com/lorenzo-stoakes/Rainbow-
Sort/issues) :)

~~~
batmansbelt
Add bogo sort and gnome sort.

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

~~~
izzydata
Insert Sort, Heap sort.

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

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

------
primitivesuave
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?

~~~
lolo_
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/...](https://github.com/lorenzo-stoakes/Rainbow-
Sort/blob/master/main.coffee#L19).

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!

~~~
primitivesuave
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-...](https://www.dropbox.com/s/0pjmjllmqh1x4ap/Screenshot%202014-02-24%2013.41.48.png)

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

------
y0ghur7_xxx
remids me of this: [http://www.sorting-algorithms.com/](http://www.sorting-
algorithms.com/)

not as nice, but shows different algorithms and their speed

------
greggman
Nice. Sorry for the self promotion but seemed appropriate

[http://greggman.github.io/doodles/sort.html](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](https://github.com/greggman/doodles)
for details

------
joshu
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](http://corte.si/%2Fposts/code/sortvis-
fruitsalad/index.html)

------
mh_yam
I almost got a seizure x(

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

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

------
TophWells
Reminded me of
[https://www.youtube.com/watch?v=kPRA0W1kECg](https://www.youtube.com/watch?v=kPRA0W1kECg)

Only more colourful and interactive.

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

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

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

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

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

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

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

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

