emulate water

strinda

Hi! I am finilizing my "boat" project, in which a boat can be controlled by changing the angle of the sail. At the moment the background is just simple blue. I though there might be some easy to implement cool looking techniques to make it look mater ... "waterish" so to say:)

The project can be found here/ http://www.openprocessing.org/sketch/394294

jeremydouglass

If you want water that moves like water, check out:

1. Fluid simulation -- http://thomasdiewald.com/blog/?p=95
2. Pixel flow -- http://thomasdiewald.com/?p=2707

Or you could scroll a photo strip of water past -- wrapped and blended so you don't see the seam. Or tile a wave surface animation (eg a sprite).

To create an illusion of depth, make either semi-transparent and use parallax scrolling.

Lord_of_the_Galaxy

Fluid simulations can bog down the processor if you're using a browser and p5.js. So I would just use a picture of water over which your boat moves. Just make sure that the picture also moves.

blindfish

@Lord_of_the_Galaxy - agreed: for a background effect you want something that isn't too resource intensive. An animated displacement map might be a better solution (especially in webgl); though no idea what support there is for that in p5. It certainly can be done in js...