Monday, August 31, 2009

Code As Art

I read an article today that stated art can be applied to any field including scripting. I guess I knew this and obviously web design is steeped in art. That’s always been the artistic outlet of my job and although I take great care in placement of my code to make sure it is readable, efficient, and neat I never thought of it as art. That article went on to say how art in scripting is taking code that already exists and enhancing it with your own spin to make something new. But I think there’s more to it than that. That’s more innovation than art. I’d like to take a moment and look at the code itself as art, not just what the code displays as.

Wikipedia defines art as “the process or product of deliberately arranging elements in a way that appeals to the senses or emotions.” Wow, that is exactly what I do when I code, not just when I am creating visual layouts of a web page. I am deliberate in my tabs and spaces, the amount of space I consume on any given line. I place pieces of code on any given line not only for logical order, but for how it will be read. It’s like designing usability for developers in addition to designing usability for end-users. To call it two-dimensional gives the impression its flat, without depth. But certainly it is multi-dimensional in that it presents a new level of consciousness and reality that goes beyond the surface of how it will write out on a page.

So for fun, let’s translate code into a stereotypical piece of art. Here is a screenshot of some code I wrote and also of how it is displayed to the end-user. Both are functional - neat and tidy, easy to read.

Now I’m going to compartmenatlize my code into four basic components: 1. Commented code (tips or notes I wrote for other developers who may modify the code after me), 2. Conditional statements (the dynamic quality of the page), 3. Code that writes out and is displayed to end-users, and 4. Behind the scenes code that allows the correct data to show at the right time. Now if I take those componenents and abstract them into blocks of color I get the following pattern:

Now, let’s go one step further and turn this abstraction into art. I took the pattern above and in PhotoShop I applied a Motion Blur at an angle of -4 distance 274 pixels. Voila! A beautiful code masterpiece.

Now, if I put it on a black background, it gets really dramatic and coincidentally looks very similar to the piece “Sideways” by Michael Getlin I found on

So code is art, even as tranisient as it is. I think that's a beautiful thing. It's like you're living in the artistic moment every moment. It truly is Art for Art's sake.