I want a piece of code for HTML5 that I can put into a layer on a webpage and have it perform an animated distortion on whatever is in the layer below, be it text or image. The distortion would be similat to a photographer's loupe, A circle which distorts whatever is beneath it making it look convex, as if it is bubbling up towards the viewer like a sphere. This circle should drift around the page at random bouncing off of the sides of the open window when it hits them, being redirected in a random direction. The size of the circle and the speed at which it travels should be editable in a simple way by me. For instance just by changing a specific integer in the code I should be able to change the speed at which the circle travels, and the same should be true for the size of the circle. Attached is an illustration of what it should look like.
Please read the project first and write the word "Understood". Also write your steps and suggestions to complete the project with a short description of what you understood.