JS1k Entry

Posted on 2010-08-21 in javascript

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.

Written by phil on August 21st, 2010

Tagged with


3 Responses to 'JS1k Entry'

Subscribe to comments with RSS or TrackBack to 'JS1k Entry'.

  1. Nice entry! It’s pretty simple, as you said, but the effect is really neat! Keep up the good work.

    Oh, and FYI you have a double “http://” in the link to the js1k demos list. ;)


    26 Sep 10 at 11:41 am

  2. I was very inspired by your js1k project. So I built 2 versions in flash. One of them uses Pixel bender and theoretically runs on the GPU.
    They are at http://www.m0ose.com/flash/waterAutomata/bin-release/aqua2.html and http://www.m0ose.com/flash/waterAutomata/bin-release/agua.html


    28 Oct 10 at 12:35 am

  3. Awesome article!

    CGI Flythrough

    27 May 19 at 3:43 pm

Leave a Reply