Generative works from Keith Peters, on his new Art from Code site.

As code literacy improves and coding tools like Processing and Flash make it easier to produce stunning visual results, the line between the coder/hacker and digital artist, and more conventional artists, is blurring fast. The next trend: networks and blogs on which people share not just their work, but the code behind it. The idea is old, but there’s no question the breadth of content and number of participants is expanding – and beginners are welcome, too.

The Flash Virtuoso, and Galleries vs. Code Repositories

Isometric waves, via Keith’s Flickr.

Keith Peters, aka BIT-101, has been instrumental in the Flash community in advocating digital art and animation. His books are clearly written and intuitive to non-programmers — despite their Flash basis, I’ve found them useful for my Processing experiments, too. And Keith has been busy of late. He’s got a second installment coming for his wonderful Making Things Move book, inspiring his isometric experiments pictured here, and he’s also launched a new site called “Art from Code.” (Various permutations of this theme come up regularly.)

I owe a huge debt to Keith, as I got into generative coding entirely through his books, before later going on to discover Processing.

Interestingly, the relationship between code and art is an imperfect one. Just open sourcing the code isn’t always practical. In a way, though, that makes the code even more beautiful — and sometimes sharing visual results can be just as interesting as sharing code. (It forces us to go back and try to reproduce the results, then get it all wrong, and wind up producing something original, often as a result of mistakes!)

Keith writes on his blog:

I want this site to be more about the images than an open source code repository. Not that I’m against sharing the code, but I don’t want that to be the focus here.

Two is that the code that has created most of the images here is ephemeral. I open up Flash or Flex Builder, start messing around, take some screen shots when something looks good, keep messing around and before long the code that resulted in the first image is long gone, having morphed into something else entirely. I may even leave it off in a completely broken state, or in some cases, if I’m working in Flash, I never even end up saving the FLA with the code in it. So 99% of the time, sharing the code that created image X is impossible.

Also, interestingly, Keith notes he often works with code directly on the timeline — something that’s not possible in Processing. (I’m personally guilty of making various unfair comparisons between Processing and Flash; the bottom line is, you might as well compare watercolor and oil paint. It doesn’t matter. They’re different. And I love that Keith works totally differently from the way I do.)

Keith does, however, promise some new graphics classes, and I’ll be very eager to translate them to the world of Processing, perhaps — again — imperfectly, resulting in something else. I’ll be watching and will let you know when there’s some code to go with the art.

The Open Processing Gallery, with Code

If “Art from Code” is intended as a gallery first, rather than a code repository, OpenProcessing is both, simultaneously. OpenProcessing is the work of Sinan Ascioglu, an NYU ITP student (I believe he has other contributors, as well). Sinan has also built OpenVisuals, a site dedicated to easily visualizing data in a consistent way, also using Processing:


OpenProcessing is a basic gallery with code for Processing sketches of all kinds. OpenVisuals goes one step further, providing a framework for data visualization — thus, it’s not only a gallery, but a platform on which you can quickly see the results of turning data into something onscreen. Because Processing sketches can be easily exported as embedded applets, you can immediately see live, real-time results on the webpage, while comparing the open-sourced code that makes it function.

With a variety of people contributing, part of the joy is seeing the range of expression, not just from experienced coders but newcomers, as well. It’s also encouraging to see there’s embed capabilities, so you could embed the uploaded results onto a blog entry or forum post.

For a similar framework for data visualization for Flash — though without the accompanying online community — see the open source Flare library. (Flash is not truly open source, but work can be done in Flash that is, of course.)

IBM Visual Communication Lab’s ManyEyes is a similar community built on working with data visualization, and makes some use of Flare. (It’s also a great data source for Processing projects and the like!) And for six degrees of Create Digital Motion, one of the team at IBM is Jesse Kriss, who built Processing-Max communications conduit MaxLink.

OpenCode, the Web Browser as IDE

Embedding applets and text code is one thing. Turning your browser into a live development environment is another. OpenCode takes the online gallery – code repository – community to its extreme conclusion, by allowing you to edit and run code live without leaving your browser. (Yes, that’s right — just in case you can’t be bothered to copy and paste into a Processing window.) With enough abstraction behind the scenes, it could eventually be made friendly to non-coders, too. Like OpenProcessing and OpenVisuals, the tool is built on the friendly, elegant, and lightweight Processing platform.


It’s a fascinating idea, and impressively, it works quite well. It could be just the beginning of what’s possible – imagine people wanting to work with data being able to use a couple of lines of live code, making modifications right in their browser, while libraries installed on the server abstract all the other functions behind the scenes. (And yes, Java-based libraries do work.)

Of course, cool as that is, somewhere along the line I think we actually lose some of what Keith (and others, like our visualist hero Robert Hodgin) have done. Wonderful as it is to be able to share code, it’s really the visuals that are themselves the payoff. I’d love to see visuals first, code second instead of the other way around.

OpenCode is in pre-alpha state, the work of Kyle Buza and Takashi Okamoto at the MIT Media Lab. I love their tagline – “This is so alpha, you won’t even want to use it™.” So consider it a work in progress. (I met Kyle and Takashi in Boston earlier this year; very nice, talented guys! Kyle earns extra points as the creator of chiptune externals for Max.)

Perhaps the MIT and NYU projects will meet somewhere in between. I propose a conference somewhere on the Amtrak route between the two cities — Mystic, Connecticut, perhaps?

What’s Next?

Flash and Processing are really ideal for these applications, because of their accessibility, and the fact that they can run online and produce immediate visual results. But, powerful as I think data visualization can be, I don’t think the future of this is limited to infographics. The superset is clearly art. And the networks like those above are only likely to multiply and grow.

So, artists, what would your ideal community look like? What sorts of sharing features would you want in a tool like Processing, or on the online side? Or is there a point where you actually don’t want to see / share code, preferring to focus on the actual artistic result?