Water Ripple Effect


Instructions

  • Click on the water to make a splash!

Features

  • Ripple refraction.
  • Ripple shadow.
  • Ripples reflect off walls.

Video

Browser Support

  • Chrome - This is a chrome experiment and hence works best with Google Chrome. The Chrome browser is free, so download it here.
  • Firefox - Works, but is slower than Chrome.
  • Opera - Works.
  • Internet Explorer - Not supported.

Notes

  • If this demo is running slowly try a smaller canvas size.
  • A nice shallow water effect can be created by setting the damping and refraction to zero and the shading to four. Then make a couple waves and let it run.
  • This project was largely inspired by this article on 2D water effects.
Comments