Victus Spiritus


Layered HTML5 Ripple using CoffeeScript

13 Jun 2011

This weekend I researched various methods for approximating the effect of rippling water. After reviewing a few great options I went with the effect shown here at

I scaled the canvas element to the size of the background to speed computation, but further work will need to be done to pretty it up.

The html5_layered_ripple repo and a snapshot of what it looks like so far:

Warning: There are some minor UI tweaks I need to make (ie if you set the refraction or shading you have to reselect an image for the background).

In my haste to rush out the door this morning I forgot to embed the key coffeescript. Here's a gist of that code: