JS1k: Smaller is Better!

First published: Read time: 2 mins

Every once in a while something really grabs my interest. Since being introduced to Mr doob and remembering back to the amazing demos you used to get on various Amiga software (cough..); the demoscene has got me thinking about all the cool new possibilities for Web Developers. You can easily use JavaScript and the canvas tag and go visualisation crazy. Now when you mix in another factor: set a limit to the size of the code you can use; then it becomes really interesting!

Peter van der Zee has created a competition called JS1k, where the aim is to see what you can achieve using JavaScript and a canvas tag with a strict limit of 1024 bytes (1k). To put that in perspective, your average web page is 507K, so there isn’t a lot of room for manoeuvre! Saying that though, you will be surprised with what you can achieve with only 1024 bytes. Take a look at some of the accepted submissions and prepare to be amazed.

I’ve submitted my own entry which you can view here, it hasn’t been updated to the latest version yet but I’m sure it will be soon.

Particles changing colour depending on their proximity to different coloured circles.
My entry into JS1k. Looks simple but was a challenge to come under the 1k limit

Compared to some of the entries my demo looks a tad boring, but I really enjoyed putting it together. Condensing a script that was originally over 3.5k down to 1024 bytes was a real challenge. The last 20 bytes in particular were a pain in the backside! In version 0.2 I hit 1024 bytes exactly as I hadn’t realised you also have to style the demo page slightly if you use a black background. I think I may be able to shave a couple more bytes off, but I’m really coming close to the limit. The resulting code isn’t pretty and in no way readable, but it works! Take a look for yourself with a “view source” on the demo page.

According to Peter the competition is open until the 10th September, so I may just create a new demo and see how I get on. On a side note, JavaScript wizard p01 has dabbled with even smaller code limits of 512, 256 and 128 bytes. The results of which you can see here. Impressive stuff! I’m looking forward to seeing his entry into the competition.

Update: After a few optimisations and a run through the closure compiler I managed to get the demo down to 957 bytes.