Codebox Software
Bokeh Animation with JavaScript
Published:
I've been trying to recreate the bokeh effect sometimes seen in photography, using CSS and JavaScript - you can see the results below. The source code is on GitHub as usual.
Light sources are generated randomly, and are assigned a position, velocity and acceleration within a simulated 3-dimensional space. The 'distance' of each light source determines its brightness, acuity and precise colour, giving the illusion of depth. Sometimes the lights exhibit a slight flicker, to simulate the sources passing briefly behind an opaque body that obscures them.
You can see the animation in action below - pick one of the Presets, and then experiment with the various sliders to change the effect (Focal Distance is my favourite). If you find one that you like, then hit full-screen button in the bottom-right corner!
