JS1K 2012 Entry – Heart Strings

Spider Web heart

I submitted my first ever JS1K competition entry. Really, my first javascript or any kind of programing contest entry. And I’ll admit that it was quite a challenge too. It was like a putting together a jigsaw puzzle that you have extra pieces to. For my entry,  I decided to take something that I worked on previously and rework it into something that fit the theme and into the 1024 byte limit. The theme for this year was love, so what I did was reworked the spider webs explorations that I had previously worked on into a heart shape and simplified it a bit. I also stripped out anything that wasn’t pure javascript. In the process, I was able to reduce my demo from 25K (not including the processing and toxiclibs js libraries) down to 1022 bytes.

When you do something like this, you have to make some heart-breaking feature cuts though. Of course, physics and animation was the first thing to go. Then I slowly removed some of randomization and visual error checking rules that I had in place. This got it down for a few kb, but still needed some major reworking. I ended up restarting from scratch and thought through the best way to put it all together before getting a few other eyes on it to see how else I could squeeze it down to a slim 1K.

Some of this may be obvious, but here are some tips for slimming down your code for JS1K:

  • There are a lot of js minifyers out there. The one that worked best for me was google’s closure compiler
  • declaring variables are very different and very forgiving in javascript. Not only can you declare multiple variables on one line, you don’t even technically have to declare variables before they’re used. In the end, that’s what saved me. A note of caution: If you decide not to declare your variables, a js minifier won’t be able to rename/shorten them, so you have to do that process manually.
  • When manually shortening variables and function names, comment the hell out of it.
  • Processing proved again to be a great environment for prototyping my ideas. I would suggest doing that first to see if there’s any math and basic drawing that needs to be figured out first, if possible.
  • Math and any common Math functions can be shortened at the beginning of your code as
    var M=Math, N=M.random, C=M.cos, S=M.sin, Pw=M.pow // and so on
  • Instead of Math.floor, you can use ~~
    Math.floor(i/10)

    is the same as

    ~~(i/10)
  • Ternary style if/else statements to define variables saves you a good amount of bytes. Use whenever you can.
  • Looking at what other kinds of optimisations have been done for JS1K in the past was also helpful, including blog entries by Román Cortés, Skilldrick, and nooshu.

You can view my JS1K entry here.

Greg Kepler is an interactive developer at the Barbarian Group. He started as a design student graduating from RIT with a degree in New Media Design and Imaging in 2004 and fell in love with Flash. He worked for 4 years as a designer, developer, and interactive studio manager at Iomedia and moved on to the Barbarian Group in 2010 as an interactive developer where he tries to get his hands dirty with whatever technologies he can.