Evan Hahn (dot com)

Circles 1K

In short: I made a trippy circle-drawing thing and it fits in under 1 kilobyte.

I was bored and wanted to spend only a few hours working on a jellybean-sized project, and then I figured I'd try to make jellybean-sized code. So I grabbed the page from the JS1k contest and got started.

Three hours and about 1000 bytes later, I made some pretty circles. Go give it a try!

I used a lot of tricks to cram all of this stuff in under 1024 bytes:

  • Most variables were globals, because that avoids the use of var. I wanted to have some indication of globals versus "local" variables. My convention: global variables were lowercase, local variables were uppercase.
  • I used m as a shorthand for Math and t as a shortcut for setTimeout.
  • I used myDomElement.style.cssText to do most of the styling, rather than things like myDomElement.style.padding = '20px'.
  • I used onclick rather than adding event listeners.

There a bunch of other tricks, and you can see them in the unminified source. Enjoy!

Posted on .