Refraction - Fisheye lens effect for water droplets on a windowpane

I spent some time attempting to fake refraction through rain droplets on a window, but had very limited success. I checked the math, and it looked very daunting. Eventually, I settled on just using roughly the average color of the background:
[Portable Rainy Day](https://editor.p5js.org/thejoshvickers/full/GqLNRL6d_)

That being said, is it possible to do real-time refraction in Javascript from scratch? My thought would be to:
1) Create an image from the current frame of the canvas.
2) Scale down that image to the size of the "lens" (water droplet)
3) Flip that image on the x axis
4) Perform some sort of operation that creates a fisheye effect. Perhaps sampling pixels exponentially distant from the center of the image. (I just can't figure out how to actually do this.)
5) Use this as a new fill for the lens object.

Inizia con lo sketch Portable Rainy Day collegato e il rendering canvas del frame corrente. Verifica se l’acquisizione dell’immagine, il ridimensionamento della lente, il ribaltamento orizzontale e il campionamento fisheye proposti possono essere implementati in tempo reale in JavaScript; l’issue non indica file, test o un criterio concreto di completamento oltre al raggiungimento dell’effetto di rifrazione.

Scritto dal modello di indicizzazione a partire dal testo della issue.