I am sure you have seen this effect before, a picture distorted more or less realistically while you move your mouse over it causing the “water” to “ripple”:
In the early 2000s this was done with Java Applets causing a hell of a lot of troubles – from missing and wrong Java versions, over high CPU usage to crashing browsers.
Then Flash came around the corner solving a lot of these problems, but introducing new ones like gaping security holes.
Although this effect is nothing more than a gimmick and the practical applications are bare to none, building it was a great way to learn a ton about the Canvas element and its limitations.
The underlying algorithm could not be simpler, i basically copied it from this great explanation: http://freespace.virgin.net/hugo.elias/graphics/x_water.htm
If you are using this on your website and you are a nice person you can show it by giving me a credit (backlink) somewhere on your page, thank you!
Some things to note:
- Runing the script from your local machine instead from a website will not work in Chrome due to the restrictive same-domain policy of the browser.
- Make sure the image is loaded from the same (sub)domain as the website containing the script, otherwise you will get security problems.
- The speed of the waves is mostly defined by the FPS rate and cannot be changed, it is hardwired with the algorithm.
- It can be that the mouse movement is not working in some browsers, i used a W3C working draft method for getting the mouse position. If you want to use this code in production you have to care for that issue yourself (Maybe with jQuery).
Some calculations could be sped up by using bitwise operators instead of multiplication or division, but this needs the dampers to be hardcoded.It seems that with the newest browers there is no longer a difference in speed with bitwise operators over Math methods, so forget this. They have bad caveats you have to care for yourself anyway.