I actually wrote this little experiment whilst on a plane to San Francisco a couple of months ago (more on that soon) but then totally forgot about it. I had some time last week and remembered it – I tidied it up and here it is.

It’s inspired by this piece of art work from my good friend Tobias. At first I made it so the art work was just generated by code but it was kind of boring. I then added the interaction so the depth amount was defined by the mouse position. This instantly made it much more interesting and fun to play with.

A quick summary of how it works. I use canvas to either write text or draw an image to. I then get the canvas data and loop through each pixel on the determined lines. When I hit a pixel that isn’t transparent I store it’s position and do likewise when I next hit a transparent pixel. I then use bezier curves to make the lines nice and smooth. I’ll let you explore the code further here to see how it works. Post a comment if you have any questions about the code – I’m always happy to help.