What is it?

This experiment was just trying to recreate a series of manipulated photos I saw a while back, I can’t for the life of me find them now, which is pretty annoying, I think they’re somewhere on ffffound or This Isn’t Happiness.

Anyhoo the technique was basically rotating cropped circular portions of a photo incrementally, leading to a kind of ‘warp’ effect – as the size of the cropped area gets smaller, the rotation gets greater.

Realised this would be pretty easy with canvas, it’s just a case of a for loop containing incrementally decreasing context.clip() arcs, whilst the canvas rotation incrementally increases. I did take longer than I thought, but I still think I actually spent longer picking out photos on Flickr… (the photo theme is ‘New York’ in case you noticed a trend)

Was a bit of a performance issue using the large photos directly from Flickr as was taking a while to load, and then the rotation was choking in non-Chrome browsers. Managed to alleviate this slightly by saving my own smaller, optimised versions of the images, but still not great.

I wanted to add a save feature so you could export the canvas to an image file, but this was tanking completely for some reason. Also wanted to add option to drag-and-drop your own image in, might look in to adding both of these features later at some point.

UPDATE – tried to add save option, but kept crashing Chrome, I think it’s because the canvas is essentially redrawing an entire full size image per circle, so when you go to save it just can’t handle it. Also had a brief look in to drag and drop but the API was looking like a nightmare so didn’t bother. I did manage to get getUserMedia() working which means you can warp your own face via your webcam, only works in Chrome and Opera mind.