Recent experiments
Circle warp

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.