Controls

Move cursor / drag on device to leave a wake. Click / tap to generate waves.

Overview

This simulation of ripples is based on a post by Hugo Elias. The code calculates an offset for every pixel based on a heightmap and displays the coresponding colour of a source image. The resulting pixel shift looks like refraction in water. Waves are introduced by random droplets or by a user. The disturbance travels outward from the source, dissipating over time. The current and previous states at discrete coordinates and at their neighbours are used to calculate the height of water for the next frame. A white highlight on crests adds an illusion of reflection.