A Slit Scan Camera in HTML5

published on October 21st, 2012 · more from the blog →

A few days ago I stumbled upon the Slit Scan Camera. You will probably recognise it's odd effect from the "photo-finish" photos they take at the olympics and horse racing, in these images peoples limbs seem to be distorted and it doesn't look like the actual place the shot was taken. These photographs are in fact records of time, rather than a record of space, as in a normal photograph.

The camera works by taking many exposures (like a film) but of only one very small area of space (a vertical line 1 pixel wide), it then moves the "film" along a little and records the same point in space on the line next to it, eventually over time you will build up a picture of one small area of space over time.

So this weekend I set about recreating a slit scan camera using the magic of your web browser and your standard webcam.

The demo below will create a photo where the left hand side of the image is recorded a few seconds before the right hand side, unlike in a normal photograph where the entire image is captured at once.

html5 slit scan camera
Give it a go by visiting the html5 slit scan camera page.

The technology behind this is fairly cutting edge so you will need Google Chrome to get it working.

A big thanks to Jay Mark Johnson for the inspiration, check out his amazing slit scan photographs.

If you liked this post please check out my other projects.

This project has just been featured in Google's Chrome Experiments. View it here