I first came across a ripple effect on images around 2002. The web page doesn't exist anymore, but someone archived the page. You can find it here. There is another implementation of the same that you can find here. I implemented this in Java around 2009 and now in Javascript.

I wanted to attempt to explain here how this works. For this to work, we need two buffers. These buffers are the same size of the number of pixels that need to be shown. These buffers are integer arrays that hold values that we will refer to as "States". A value of this state is just a number. At it's highest this value will be 512 after which it will slowly damp down to 0 each time the frame is refreshed. At its core, the function that generates the wave is this.

for(x in (Every Row in the image)) {
   for(y in (Every Column in the image)) {
      currentBuffer[x][y] = ( previousBuffer[x - 1][y] +
                              previousBuffer[x + 1][y] +
                              previousBuffer[x][y - 1] +
                              previousBuffer[x][y + 1]
                           ) / 2 - currentBuffer[x][y];

      let shading = currentBuffer[xm1][y] - currentBuffer[xp1][y];

      pixelColors[x][y] = shading;

      currentBuffer[x][y] = currentBuffer[x][y] * 0.85; //<--Damp the wave each pass
   }
}
//Switch the pixels every frame.
let temp = previousBuffer;
previousBuffer = currentBuffer;
currentBuffer = temp;

Below is a canvas where I have depicted 25 enlarged pixels in a 5 x 5 grid. Each pixel shows 3 values on it. In order they are

1. Current state
2. Previous state
3. The pixel color. The pixel color is a difference between the pixel colors on the left and the right of the current pixel.

And finally here's the actual implementation.

//Code goes here

//Code goes here