Everybody that has a fascination with computers and programming will have seen “demos”; programs intended to show off some cool graphics that are supposed to be the cutting edge of what’s possible in that specific language. I personally particularly like size-restricted demos, which do some really cool stuff in the least number of bytes possible. Most of such demos choose a power of 2 for the size limit, particularly as 256 bytes, 1Kb, 4Kb, or 64Kb.
I’ve been working on a browser demo, written in JavaScript and HTML, for quite a bit now. I’m hoping that at some point I can combine all the “scenes” I created into one coherent demo. Until then, here are two small 255 byte demos to have a look at:
- Ascii art Mandelbrot-set rotozoom (Thanks to bonz)
- Ascii art Julia-set rotozoom (Thanks to shr^Molecoola)
I got the idea for these from two other 256b JavaScript demos by bonz and shr respectively.
These have been tested with various browsers and seem to work on all but FireFox 2.
Update: using array indices instead of “.chatAt()” saves a few more bytes, which allows me to use innerHTML instead of innerText. This means the code renders correctly in Firefox. However, this feature is no available in MSIE unles you specify the right DTD, which would push the size over 256 bytes. Therefore, the below two work on Firefox, Chrome, Opera, Safari but not MSIE:
4 Comments to “256b JavaScript demos”
2008/09/04
These produce no output in my Firefox 3.0.1 on Linux.
—snip
Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.1) Gecko/2008072820 Firefox/3.0.1)
—snip
They run great simultaneously in their own tabs in Google Chrome 0.2.149.27 on Windows XP however.
Thanks for sharing,
-Tyler
2009/04/07
FireFox does not support “innerText”. They both use that to output the fractal, so they won’t work with FireFox.
They should work with Chrome, MSIE, Opera and Safari, though the later seems to require you to repeatedly click inside the window to update the screen; I have no clue why.
2011/01/01
In HTML 4.0 and later, strings can be accessed like arrays, so the charAt can be replaced by [] in the Mandelbrot set. It would need a bit of cheating to include it in a page that has the DTD set correctly, though.
The Julia set can’t take advantage of it because you’d need an integer divide to access the array without error.
2011/01/02
Thanks Peter: I was not aware of that feature! For the Julia set you can use another trick to round down the floating point number: “[~~(i/3)]” instead of “.charAt(i/3)” saves three bytes. As you suggested, MSIE requires the right DTD to be set, so the new code doesn’t work in MSIE. However, the bytes saved allow me to use innerHTML and “<br>” instead of innerText and “\n”, which means these new versions work on Firefox. I’ve added them to the post.
Leave a Comment