Depth-of-field in Processing

It’s an old trick: generate a set of pre-blurred sprites and choose the right one to show (based on depth) to give the illusion of an expensive depth-of-field effect. Here it is in a Processing sketch:


(click on the picture to run the demo)

Use the mouse over the applet to control it – left/right controls rotation, up/down controls focal point and a deft click of the left mouse button gives an extra little kick to the simulation.

Once again this is just quick code thrown together over a couple of hours. The particles are affected by a two different forces: One pushes them to be a fixed distance from the origin, causing them to align themselves on the surface of a sphere, while a second force moves moves each particle away from it’s neighbours to stop them from clumping together.

I stole the pre-blurred sprites from Mr Doob’s similar HTML5 sketch.. I hope he doesn’t mind! ;)

This entry was posted in Computers, Development. Bookmark the permalink.

2 Responses to Depth-of-field in Processing

  1. HoTWire says:

    Hey Paul, you interested in any of the things at the onedotzero event next month : http://www.bfi.org.uk/whatson/onedotzero ??

  2. evilpaul says:

    Oh yes, I’d forgotten this was coming soon. I actually wanted to submit some stuff for this but couldn’t get anything together in time and, being a non-arty-type, I have almost no idea how to go about submitting!

    I’m finding it difficult to navigate their site to find out what interesting stuff is on and when. I’m keen to attend *something* though! Any suggestions?

Leave a Reply

Your email address will not be published. Required fields are marked *