1 Comment

A* Path Finding Algorithm Visualization

Here's a fun little project I've been working on recently. First, just try it out below and then I'll blab a bit. You just click two 'nodes' and watch as the algorithm attempts to find the shortest path between the two points. Here's a link if you want to see a fullscreen version.

I'd been researching path finding algorithms, particularly A* which is pretty much the de facto standard shortest path algorithm when you know where your target is (otherwise, check out Dijkstra's algorithm), and I found myself trying to form a mental picture of how the algorithm worked. This is pretty standard for me - I can read a bunch of pseudo code over and over, but complex algorithms don't usually click for me until I can visually picture how they work in my head. 

So, I started throwing this thing together - I'd only planned to spend a few hours on it, but I got a little carried away. The code is basically a whole bunch of divs, some CSS animations, and jQuery - no D3, though if I do any more of these I'll probably look in that direction. There are plenty of other path finding visualizations on the web, but they tend to be super fast and/or just show the final result of the algorithm on a grid-based map. I wanted to slow things down so I could really watch the algorithm in action and see how it works, which paths it attempts to traverse, how often it reaches dead-ends, etc.  

Now, I can say without a shadow of a doubt, I really understand this algorithm!

This was a super fun and educational exercise so I'd like to do more of them in the future. Here's a link to the github repo for anyone who's interested. Thanks for reading!

1 Comment


CoffeeScript: Why Bother?

I’ll be honest. I had no desire to learn CoffeeScript - but I'll get back to that in a minute. I’m currently a student in an immersive programming school (hackreactor.com) and I've spent every waking moment of the past three weeks learning the deep, dark secrets of JavaScript - the good, the bad and the ugly.

And there’s a fair bit of ugly, but I’m not complaining. A lot of that ugly appeals to me. Advanced JavaScript can start looking pretty scary when you start passing functions around, properly maintaining your ‘this’ references, sorting through parens and curly braces and semicolons... Yet, somehow, I’ve managed to get to a place where I can live amongst all that scary stuff fairly comfortably (with a great deal of help from the staff and fellow students here at Hack Reactor, of course).

So, why, after putting so much TLC into my JavaScript chops, would I want to live in a world where all of that scary stuff is tucked away and hidden from me? Why bother with CoffeeScript at all?

In short, because I think it’s making me a better programmer. 

I’m still not completely sold on using CoffeeScript for all my personal projects, but after spending a couple days building a small backbone app with it I’ve definitely discovered a few reasons to keep it in the toolbox:

  1. Studying the JavaScript that CoffeeScript compiles into often yields interesting insights into the quirks of JavaScript. I find myself really thinking about what Jeremy Ashkenas (the dude who created it) was trying to accomplish with the various decisions he made in it’s implementation.
  2. Looking at terse, pretty CoffeeScript reminds me of the ideals I should always be striving for when writing code - clear, efficient, and readable by human beings. It takes a little more work to approach that ideal in JavaScript, but it’s totally possible.
  3. Learning new programming languages, in general, makes you a better programmer, right? You're exposed to new ideas, you get a chance to break old habits, etc. Learning  programming languages also takes time - time that most of us would rather spend being productive in a language we're comfy with. CoffeeScript is an opportunity to kinda sorta learn a new language AND continue being productive in your language of choice (if that language happens to be JavaScript). 
  4. Attempting to write CoffeeScript has been a fun exercise in testing my ‘faith’ in the code I’m writing. Programming efficiently requires a certain amount of faith in the APIs/modules/frameworks you’re working with - you just don’t have time to look under every rock and figure out how everything works. My first couple hours with CoffeeScript entailed writing a few lines of code, saving it, immediately looking at the JavaScript output and more often than not thinking, “Whoa, that totally worked!” Maybe just slightly more often than not if I’m being completely honest, but still... In any case, eventually you have to resist the temptation to look at your compiled code constantly and start believing that your code will work.
  5. It really does look pretty. It's just so neat and tidy. I wanted to dislike it, but after a day and half it won me over. If the Gods of ECMAScript decided that the next, next version of JavaScript was going to look and behave exactly like CoffeeScript I wouldn't complain. 

So that's my list. If you’ve been resisting giving CoffeeScript a shot I’d definitely recommend putting your reservations aside and investing a couple hours in it. At the very least, visit coffeescript.org, skim the overview, hit the TRY COFFEESCRIPT button in the nav bar and just experiment a bit. I think you'll get something out of it.