I created this project in attempt to capture the beauty of light glistening on water. My moment of inspiration was while hiking within Central Park in Manhattan. I was walking past the lake, and the sun was shining down brightly, and the water was breathtakingly beautiful in how it sparkled and reflected the sunlight. As an artist, I really wanted to capture that feeling, but neither a drawing nor a painting would do it, and I'm not much for photography or video, so I figured I would program an animation to try to capture that effect.

I created a prototype using Processing. After several iterations, my final prototype used a number of particles to represent the sparkles. Each particle randomly positions itself within the area of the water, but the distribution is a normal distribution centered around a particular axis where the light reflects the brightest. Sparkles that are farther away appear smaller and are distributed closer to each other. Finally, the last touch involved the sparkles fading in and out to simulate the ebb and flow of the water. 

I was pretty happy with the effect I achieved, so I wanted to share it. Processing is great for sharing via the desktop, but I wanted something more portable for the web, so rather than use Processing's javascript library I decided to write a library for this water effect using the native HTML5 canvas element and its raw drawing functions.

To make it easier to configure the library to get the effect you want, I made a simple configurator class that lets the developer use their mouse to configure the area the sparkles appear in, the brightest axis, the number of sparkles, and the size of the sparkles. It's far from perfect and there are many potential improvements I could make, but this is a start. 

To see my code and try it out for yourself, check out my Image Particle Effects project on Github.