JavaScript Challenge #1 (Wait, weekly?)

Written By Christopher Pitt, on Wednesday, July 25th 2012, 5:06am

The purpose of MooTools is not simply to bring syntactic sugar to JavaScript development but also to make you better at JavaScript. Often in forums and on Stack Overflow, the question will arise; “how do I do [insert UI widget] with [insert popular library]”.

The problem with these kinds of questions is that they often speak of the over-dependence on a certain framework (such as MooTools or jQuery) without a proper understanding of how JavaScript works or how to structure code well.

It is with this in mind that we want to set some challenges in plain old JavaScript (which are probably good programming challenges for any language) that will flex your grey matter.

This week’s challenge is to find an elegant solution to generating elements in a spiral pattern. Consider the following diagram…

Your solution can be procedural or recursive, but in either case you will be dealing with a shrinking grid of possible locations for elements. The colours do not have to be in the result - they are only used to indicate the pattern.

Hint: Try defining variables for columns and rows so that the shape can change but the positioning and order remain the same.

Try also to minimize your use of any one particular set of libraries or modules, but rather use as much vanilla JavaScript in your solution as possible.

Post your solutions in the form of links to jsfiddle, tinker or jsbin (in the comment section) and we’ll update this post with a link to a review post detailing solutions that we think tackle the problem in ways worthy of mention.

We hope to make it a weekly thing, so be on the lookout for more challenges to follow!

EDIT [2012/08/01]: We are closing comments and reviewing submissions. We will follow this post up with a review of our favourites and what they teach us about the task and JavaScript development in general.

EDIT [2012/08/08]: We have posted the review post to for these submissions.

38 Responses to “JavaScript Challenge #1 (Wait, weekly?)”

  1. Arian says:

    This is my solution: http://jsfiddle.net/QXsvw/5/

  2. Christopher Pitt says:
  3. Senyai says:

    Should it be table or divs with absolute position or floating elements?

  4. chrisp says:

    Senyai: Either approach will work. The important thing is how you get the pattern to work… :)

  5. timwienk says:
  6. Carlos C Soto says:
  7. Giulia says:
  8. Matthew F. says:

    OK, I’m gonna be late for work… here’s mine:

    http://jsfiddle.net/KXfWK/1/

  9. Lucas Corbeaux says:

    My (twisted) solution : http://jsfiddle.net/G5RuR/

  10. fakedarren says:
  11. Mickele Moriconi says:

    Mine with table: http://jsfiddle.net/5jTSW/

  12. Shaun Grady says:

    My 29-line solution, now with 100% more CSS3! http://jsfiddle.net/PRWvu/

  13. Matthew F. says:

    I made a slight adjustment to mine:

    http://jsfiddle.net/KXfWK/2/

    It now inserts the elements so that document order matches the div number. This would illustrate a scenario where you would want a screen reader user to encounter the text in numerically increasing order, to make the content logically understandable. So if you read it in VoiceOver, the numbers should still be read in increasing order despite their twisted appearance.

  14. Klaas Moerman says:
  15. Shaun Grady says:

    Same algorithm, different reveal animation: http://jsfiddle.net/PRWvu/2/

  16. Christopher Pitt says:

    Some excellent solutions here, keep them coming! :)

  17. Mickele Moriconi says:

    CoffeeScript + Canvas: http://jsfiddle.net/THrr6/

  18. Mickele Moriconi says:

    CoffeeScript + Canvas: http://jsfiddle.net/THrr6/1/ (leftover fixed)

  19. Arian says:

    My second version: https://tinker.io/024e3/4

  20. Mitch says:

    http://jsfiddle.net/walkingeyerobot/bSc8q/

    css3 transforms seem cool. so does tail recursion.

  21. Klaas Moerman says:

    Second version, with visual rendering of the spiral instead of coordinates only. http://jsfiddle.net/3AHk6/

  22. Pete says:

    Not sure if I lose points for using jQuery:

    http://jsfiddle.net/tq6Zf/ http://jsfiddle.net/tq6Zf/embedded/result/

    Compact and full of JavaScript goodness!

  23. Senyai says:

    That’s it http://jsfiddle.net/t2gFk/2/. Hmm. I get Duplicate comment detected; it looks as though you’ve already said that! and I do not see my comment :(

  24. bram says:

    http://jsfiddle.net/braml/U7VRR/

    i tried to do it with a single loop without absolute positioning but in the end i cheated a bit by also using a recursive function though…

  25. Lionel Garcia says:

    Toke me a while, and here it is: https://tinker.io/97a85

  26. Lionel Garcia says:

    And here is the short version: https://tinker.io/8cc5d

  27. Bladimir Ardiles says:

    and here is my solution :-) http://jsfiddle.net/bladicito/MaYNv/

  28. kentaromiura says:

    Pfff, you’re all newbies (except for Arian, he is a step torward greatness), you can’t compete with my 100% vanilla js solution.

    Just be warned, is targeted to awesome browser only (the one supporting document.querySelectorAll and linear gradient… easy workaround-able, but I just don’t want to show off :P) and also you need to turn your audio on, otherwise it will not work as expected.

    http://jsfiddle.net/kentaromiura/KtPw5/2/

    Ps. I doubt anyone could take my comment seriously, but I want to stress that I’m just joking, every solution posted until now are great, and I’m really proud to see all this fun and effort from the community. Thank you all ;)

  29. Mitch says:

    http://jsfiddle.net/walkingeyerobot/bSc8q/13/

    Now with 100% more animation! Now you can see that without the transforms, it’s really just a bunch of divs all in a neat little line.

  30. blackbird says:

    This is an Excellent post, thank you all for posting your solution.

  31. Wijnand de Ridder says:
  32. Arian says:

    @Wijnand de Ridder: use setTimeout(algoritme, 30) instead of setTimeout("algoritme()",30); (see mdn)

  33. Wijnand de Ridder says:

    Thanks…

    changed it: http://jsfiddle.net/Wijnand/E5huP/

    Thanks/Bedankt!

  34. David Chanfin says:

    My very simple one(recursive, with colors) : http://jsfiddle.net/EsHDt/5/

  35. Gonçalo Morais says:

    Here’s my take on this: http://jsfiddle.net/gnclmorais/d3vrd/ As requested, 100% vanilla JavaScript.

    Bonus: spiral pattern also works starting downward, not also rightward.

  36. Lionel Garcia says:
  37. Matt Powell says:
  38. Dimcho says:

    Hi, MT Team.

    Here is my ‘vanilla JavaScript’ solution: http://jsfiddle.net/Dimcho/d6FAF/

    BR