debuggable

 
Contact Us
 

Visual Sorting - Some Javascript fun I had last night

Posted on 26/1/07 by Felix Geisendörfer

Hey folks,

last night was one of those rare occupations where I decided to do a school assignment. Now, don't get me wrong, I'm definitely not one of the "school sucks - it's boring" people who have very little passion for acedemics. In fact, quite the opposite is true - I love to learn new things and I get exited about the work of great writers, composers, physicists, philosophers, etc. However the school that I go to is full of teachers who seem to be totally passionless about their profession. It's simply no fun if you ask a question and the teacher answers you: "I don't know, this is not part of the curriculum". So if it wasn't for the Diploma to get me into a good University, I would have probably tried to quit regular school a while back in order to teach myself.

Anyway, this was just some ranting I felt like sharing and somewhere in June I'll be finally done with this daily waste of time. Back to that school assignment I did: It was a project in my computer science class and we were given about 1 semester of time to finish it. So of course I didn't get started on it until last night. Now my initial motivation for doing it was that it would make up a significant percentage of points in that class, and my ego couldn't become friends with doing poorly in a computer class. So I started doing some research on the topic I picked: "Visualizing of sorting algorithms". Being spoiled by working with high level programming languages for most of my life I couldn't recall that I had ever needed to implement such an algorithm myself before. Well, it turned out to be less of an issue since Wikipedia had enough material on the topic, including some sample code that I could simply port to the language of my choice. In this case I decided to go with JavaScript. Now as I started to gather ideas and writing some code, the entire thing became more and more interesting. I was able to fully test my JavaScript object orientation skills and there were tons of tricky issues to overcome. I ended up getting so involved in the entire thing that I didn't get to bed before 05:30am (I usually get up at that time). But much to my surprise I felt great after waking up only ~3 hours later this morning - it seems like some good old inspired late night coding is still one of the best ways to raise your energy level ; ).

But enough talk, the result of my work can be seen here: Visual Sorting Demo. It's all in German, but the text is of no importance anyway. What is important however is that this requires JavaScript 1.7 which is only available in Firefox 2.0 right now (afaik). I decided to give this new JS version a try because it has very cool new features (such as Generators), and I can worry less about compatibility as this doesn't need to run for everybody. I've learned a lot of things while writing this code, including how to do the jQuery trick of turning a given object into an Array and I hope I'll have some time to write in more detail about this in future.

For those of you who are too lazy to read the text and click at the link (you know who your are ^^) or people without FF 2.0, here is a screenshot that should give you a good idea of what the result looks like:

Sorting Visualiziation

So anyway, I just felt like sharing the results of this little project and maybe somebody finds it interesting ; ).

-- Felix Geisendörfer aka the_undefined

 
&nsbp;

You can skip to the end and add a comment.

shuron said on Jan 26, 2007:

"I ended up getting so involved in the entire thing that I didn’t get to bed before 05:30am (I usually get up at that time). But much to my surprise I felt great after waking up only ~3 hours later this morning - it seems like some good old inspired late night coding is still one of the best ways to raise your energy level ; )."
he he You are truly hacker! Say what IDE do you user for coding Javascript? I now that is maybe strange question, but what IDE do you use?

P.S. Your Javascript sorting Algorithms are pretty cool! ;)

Dennis said on Jan 27, 2007:

hehe, *g* I think if you had started earlier to develop this project you had find a method to make it runable in Opera *ggggg* :P

MfG
Dennis

Felix Geisendörfer said on Jan 27, 2007:

shuron: For JavaScript and all my other light-weight editing needs, I use an editor called Notepad++. It has code highlighting for tons of languages and a good amount of other useful functionality. However it's Windows only : /.

As far as a good JS IDE goes: I've tried out Aptana before and think it's pretty cool. However, it's a little to resource hungry for me to use it on a constant basis.

TommyO  said on Jan 29, 2007:

Felix,

Wow, this sounds like my high-school AP Comp Sci days. It was Pascal way back when, and the class was so mundane and trivial. I didn't do a single homework, which were worth 1 grade-point a piece. Enough to take me from a perfect score to a barely-passing grade. Luckily about once a month we could submit answers to some national programming contest for extra credit. I ended up with the highest grade in the class just for a few all-nighters that were more fun and rewarding than months of brainless homework.

That's the last time I wrote my own sorting functions using known algorithms :) We didn't have Wikipedia, so it wasn't as complete as yours. Nor as pretty: just a bunch of stack dumps showing change.

OK, done feeling old. Nice work!

- TommyO

Jippi said on Feb 06, 2007:

Doesnt load in IE7 :P Just white page

Felix Geisendörfer said on Feb 08, 2007:

Jippi: Hm, why is that? Oh maybe it's related to IE's poor support for JS 1.7 as mentioned above ... : P.

This post is too old. We do not allow comments here anymore in order to fight spam. If you have real feedback or questions for the post, please contact us.