Digital Photoraphy

Halftone Depth Map with three.js

I’ve been thinking about this for a while. Robert Hodgin’s Hello Cinder shows, amongst other things, how to create a halftone image by scaling particles based on the color value of an image below. I wanted to see what it’d look like to place the particles in 3D space, and use an image’s color value to determine the z-depth, rather than size, of each particle.

Cinder and C++ certainly give you the processing power to work with a lot of particles, but I wanted to make this a quick, online interactive piece. This version is built with three.js and the canvas tag.

Launch halftone depth map experiment to see it in all its 3D glory. This example pulls in recent Flickr images tagged with “moustache”. Launch it, and click a photo thumbnail to change to that image.

I quite like the low-res look that the 28×28 particle grid gives here, although even that’s enough to have the processor struggling.

Getting remote photos loaded onto the canvas was a bit of a headache, so I’ve made a php proxy to pass these through locally. You can see how to do so here on Stack Overflow. My js file is up here.