iobound   philip mccarthy’s weblog

Paul Hammond’s 640 byte cellular automata inspired me to put something together for JS1k, the 1k Javascript demo contest.

You get to use a canvas element, which makes a lot of things possible — there have been some amazingly impressive entries. I decided to keep mine simple, and remembered a 2d rippling-water simulation I saw in Game Developer about 11 years ago. Here’s the basic algorithm I used, in this case explained by Hugo Elias. It’s based on a cellular automata height map, rendered using both refraction and faked 1d environment map components, which I combine in evil ways into a 6-digit hex color code for drawing each pixel.

The compressed code weighs in at 660 bytes, and here is the slightly less illegible uncompressed version. Total development time around 5 hours.

The demo itself is fast in the latest Opera and Chrome, slow in Safari 5, and almost inert in Firefox 3.6. Maybe I can optimise it a bit. Take a look and let me know what you think.