My JS1K 2012 demo: Heart Petals

JS1K is a competition where you have to create a cool demo with less than 1 kilobyte of code.

This year, I entered the competition for the first time with a demo named: “Heart Petals”. The theme is “Love”, hence the cheesy title.

Here’s what it looks like:

And here are some tricks I’ve used to reduce the code size:

  • Use unicode chars to draw shapes. The hearts are not images. They are drawn with the unicode char 0x2764. That’s only one char (2 bytes in UTF8?). Certainly less than a lengthy SVG path or a crazy equation.
  • Use byte saving techniques. Did you know that 0| is equivalent to Math.floor() ? I didn’t. Also, assign long function names to one letter vars.
  • Optimize your algorithm. Don’t write unnecessary steps.
  • Use magic. If a shorter but approximate version does the trick: it’s probably good enough.
  • Use a minifier. Just before submitting the code, I simply compressed the code further with uglify.js.

At the end, my code is far less than 1K. I could have added more features. I probably have no chances to win, but the experience was funny. You should check the other demos out: http://js1k.com/2012-love/demos. And why not submit yours?