ricardocabellov5.5

This one is a really old effect that I always wanted to do. It has two part, first the 2d water effect, and then the parallax effect.

Water Effect

It all starts (once again) from this page. On there you'll see a "magic" trick to simulate 2d water. I've implemented that code in Actionscript and even as a Pixel Bender Shader but unfortunately never got something interesting out of it. Some months ago I revisited it again and made a Javascript version which has been on my site for a while.



At first it was a bit boring in black and white, but with a bit of experimenting I found out this color offset that made it look more interesting.

Parallax Effect

While working on the water effect I somehow remembered HeartQuake by Iguana. A MSDOS demo from 1994. One of the effects in that demo consisted in a 2'5D liquid surface.



(You can see the effect on the 5:32 mark)

I've seen that demo many times, but only this time I had enough knowledge to start guessing how each effect was made. The effect looked like the water effect but used as elevation map, maybe using voxels for creating the 2,5D illusion. I tried the voxels path but it was too slow for Javascript, so I forgot about it and left it there.

This week, for some reason, I ended up at Petri Leskinen's blog once again. On this visit I realised he shared a very interesting snippet. It seemed like a very fast technique to simulate 2'5D terrains. I quickly tried it out to see how fast it performed in Javascript and the results seemed pretty good (18ms for creating the perlin texture, 17ms for the elevated one).

So from there it was a matter a putting everything together and playing a bit with the code until I found an interesting level of interaction. The text idea seemed to work quite well, it had very mermerising motions so I went forward with it also as a bit of homage to Iguana's demo.

There are still a bunch of oldschool effects I want to try using <canvas> before I jump to WebGL shaders. As always, feel free to abuse of the beauty of Javascript: Right click > View Source :)