Fisheye (or bubble) bitmap displacement effect


Distortion map image

Red and green pixel values are used to move pixels by a given amount.
R > 125 shifts pixels left, R < 125 shifts pixels right.
Similarly, G > 125 shifts pixels up, G < 125 shifts pixels up.

Pixels are shifted in X by power of red in map image.

Pixels are shifted in Y by power of green in map image.

Neural r/g pixels are not shifted. Thus a mid-grey pattern limits how the mask is applied.

In photoshop, these layers are combined with green on top of red.
The green layer has a "lighten" blending applied, which results in the final fisheye mask image.

Finally, a shadow is applied to accentuate the effect.

Here is the JavaScript that does the heavy lifting.