Monday, March 12, 2018

2D Ripple Algorithm

2D Ripple Algorithm

by Maciej Matyka, Wrocław, 2018-03-13

(play here)

Once upon a time... I saw this on the famous Hugo Elias website (bouncy 2d graphics website). It was around 1998. Now I found it's web archived version of the algorithm and quickly done some re-implementation in javascript.

The basic algorithm works on two 2D tables. You ping-pong the data between tables, so you first run from 1 to 2 and then back from 2 to 1.

The main wave propagation goes like this:

      for each particle (x.y) calculate:
                 map2(x,y) = (map(x-1, y) +
                                    map(x+1, y) +
                                    map(x, y+1) +
                                    map(x, y-1)) /2 - map2(x,y)
                 map2(x,y) = map2(x,y) * damping

where damping is a number between 0-1. After one step map becomes map2 and vice-versa.
It is worth to add some smoothing as well (simply average each pixel between rendering).

Note: I discovered that using single pixel as the starting point for the wave gives really ugly picture and, thus I put the 3x3 picel each time I want to seed the wave.

Below is the first result of the model implemented in 2018 by me.

The app will be soon available at


  1. This comment has been removed by a blog administrator.

  2. This comment has been removed by a blog administrator.

  3. The right edge of the canvas (just outside of the simulation area) affects the left edge of pixels when the mouse is dragged / pressed within it. Other than that, nice simulation.