JavaScript Challenge #4 (Space, the final grassy gnoll)

Written By Christopher Pitt, on Wednesday, August 15th 2012, 6:01am

Back in the old days, there was an operating system named after transparent, glass-filled wall apertures numbering in mid-90’s. This operating system was designed to run on computers with CRT screens, which actually needed software to upset the patterns of light they generated, called screensavers.

This operating system had just such software, in a number of different variations. One of these created the “illusion” that the observer was travelling through space, passing stars. This is the subject of this week’s challenge.

Refer to the following diagram…

…not very helpful.

The idea is that “stars” appear in the center and move to the bounds of the viewport. However you choose to create this effect is up to you.

Hint: you can achieve the effect using elements, canvas or SVG but so long as they move outward you are on the right track. What we’re interested in is how efficiently this can be coded and how little yours leaks! Try spicing things up by adding interactivity or variation of any description.

You can make your solutions as intricate or as basic as you wish!

As before; 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.

Good luck!

EDIT [2012/08/22]: 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.

9 Responses to “JavaScript Challenge #4 (Space, the final grassy gnoll)”

  1. Shaun Grady says:

    Powered by CSS3 (ain’t it great?):

    Fullscreen: Fiddle:

  2. Shaun Grady says:

    Actually mod, can you remove that post please? It leaks more than I hoped, thanks.

  3. Shaun Grady says:

    Nevermind, I fixed it… sorry for the extra posts.

  4. Brian Nickel says:

    My first go, using the canvas.

    It’s running fast enough but I’m worried about the memory profile. I’m not burning through temporary objects (that I know of) but GC happens every couple seconds seemingly inversely proportional to the number of stars.

  5. Chidge says:

    A Vanilla JS implementation:

  6. Pete says:

    My contribution:

    Not much to see there. I’m using vanilla JS; the code is pretty short (65 lines) and seems to run pretty quickly (runs fine on my iPhone). I make use of prototypal inheritance, which should earn some extra style points. I also drop in some wizardry involving logical and bitwise ORs. Also, Chrome is showing no memory leakage at all.

    Sometimes it’s the little things that count? :-)

  7. SJ says:

    Here’s a low-tech plain old elements example:

    With a small change to the css there can be the same number of stars but half the elements!

  8. Pete says:

    After getting some sleep, I improved the look a bit by adding a randomized acceleration vector and tweaking some other variables. Also fixed a bug where stars would occasionally not get moved because I was iterating the wrong direction through the array (n00b mistake!).

  9. Brian Nickel says:

    Version 2 with some configurability.

    Stars have subtle variation in size, brightness, and hue.

    It looks like the sawtooth pattern of garbage collection is common across all the canvas-based solutions so far so it’s probably attributable to canvas API itself.