I believe that coding is an essential skill for people making live digital visuals. At the same time, there’s no question that learning to code has been a big obstacle for visually creative people — especially as they have plenty of other things on their mind. You need somewhere to start, and you need to make the learning curve manageable. Processing has been a great tool for doing that, but the point isn’t to learn Processing — it’s to learn how to code.

For that reason, I’m thrilled that Dan Shiffman’s book Learning Processing is now in print and available. I’ve been waiting for this for some time. There are already a couple of great books out there for Processing, but Dan’s book is unique in that it’s entirely focused on teaching you to code visuals step by step, even if you haven’t coded before. Dan teaches coding to creative-minded non-coders at NYU’s ITP program, and the book comes out of that teaching technique.

I know the book very well as I served as a technical editor during its development. We’ll be running an exclusive set of excerpts this week, but here’s a look at what’s included:

• Basics of code structure, pixels, interaction, and fundamentals like how the coordinate system works
• Using arrays to make lots of stuff appear on the screen, including particle systems
• Basics of images, video, data, and networking
• How to use object-oriented programming to make coding easier and more efficient
• Extending Processing with Java and more advanced coding techniques

By the time you’re done, you’ll be processing pixels, drawing generative visuals, and writing well-organized code.

To me, one of the real strengths of this book for teaching and learning is its strong emphasis on object-oriented programming, in a way people can actually understand. Explained properly, objects can really help keep your code clean. For some reason, this is often viewed as an “advanced” concept, but on the contrary, I’ve found using objects actually helps keep beginners from getting tripped up. And, to put it in visual terms, understanding objects is a terrific skill for getting lots of glitzy eye candy up on the screen.

Here’s what Dan has to say about the book (emphasis mine):

My goal for “Learning Processing” was to write something for the complete and total programming beginner. If you’ve never written a line of code before in your life, but want to get started creating your own digital media tools then I wrote this book for you. There are several other wonderful Processing books out there and I hope mine will complement them nicely. A special thanks to Casey, Ben, and Ira who kept encouraging and inspiring me as their books were being published.

The book is also geared towards the teacher. It’s not my belief that such a person will necessarily learn any new skills from the book (assuming they have a programming background), however, my hope is that the book will encourage and help facilitate the teaching of programming. It is structured with 10 lessons (complete with examples and exercises) and can act as a ready-made syllabus for a beginner interactive media / programming class. In fact, the book is modeled exactly on ITP’s Introduction to Computational Media course.

The book is available on Amazon.com. It shows out of stock, but those kind of screw-ups are common when a book has just come out (speaking as a published author here).

Stay tuned for those excerpts later this week; I’m editing them now!

See also: Dan Shiffman’s blog, Facebook Page, Official Site, free download of TOC and first chapter

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

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:

Any time you see something with a lot of Web buzz, you expect someone to be negative – and perhaps that’s healthy, having someone to play devil’s advocate. But I have to say, I’m a bit disappointed by the rants over on musicradar.com. First, Chris Vinnicombe said watching the video was like “being spoon-fed a large helping of bathos with a boredom chaser.” (Ouch.) I’ve always been intrigued by the range of emotional responses – boredom included – visual can prompt. Like any expressive medium, it’s as easy to elicit hate as love, even with the same work.

But now musicradar.com is calling in the “expert” to complain more, and, oddly, because they just don’t like the aesthetic:

Is Radiohead video “half-baked”?

3D World magazine editor says the video’s raw data is “a bit like serving the eggs and flour instead of the actual cake,” and says the work to distort the data further is “not really that groundbreaking,” though he does give it credit for being Radiohead-esque. Now, maybe this is the fault of the ad campaign and Web buzz, but I never really thought the “camera-less” angle or the newness was so important, so much as the increasing aesthetic of digital rawness in visuals and the fact that the code and data are open. Indeed, I think the video will be more of a success if the fan-made videos wind up going beyond the original. We’ll see.

Even as a blogger, I find the obsession with “newness” in general to be blown a bit out of proportion. A technique is a technique; it’s usually not until a technique becomes old that it reaches its full potential. (See: photography.)

If nothing else, the negative reaction demonstrates some of the gulf between the live visualist/generative graphics scene around tools like Processing, and the “serious” / pro 3D scene involved in industrial work. By contrast, different music communities are often more aware of the aesthetic interests of each others’ output (not that music doesn’t have plenty of divisiveness all its own). But perhaps “industrial” and “art” producers can do more to share what they’re doing.

Just days into Radiohead’s experiment with providing data and code for a visualized music video, fan responses are already starting to appear. I’m not sure just how much of Thom Yorke’s face people will want, but the first results do look impressive – and indicate the talent and skill around the world, waiting to be discovered. If there’s any question of the merit of putting the code and data out on open source, this should answer that; it seems the video may well be more than just a gimmick.

Here’s a nice deconstruction below, found in a post at GreatDance’s “The Kinetic Interface” blog. (Could be a good blog to watch if, like me, you’re interested in the meeting place of dance and technology.) It’s the work of “j4mie” (Jamie Matthews), who has a couple of experiments going and more at his personal site. I enjoy seeing these things come together.

I’m a huge fan of Processing, but there’s no reason you have to use that tool exclusively – data is data. Peter Eschler writes via CDM comments that he and Michael Zoellner have ported the data to the real-time X3D / instantreality platform, as a system of particles. That means, in short, you can put Thom’s face up on interactive walls and poke him in the cheek and make his face disintegrate. (And to think, some people doubted this would revolutionize the fan/artist relationship.)

They call the results, shooting and melting his face, “Atomizing Thom.” To translate the data, they had to write a quick Python script that could reformat the CSV data in something X3D could work with. Full documentation on Peter’s and Michael’s sites:

radiohead’s ‘house of cards’ data in real-time 3d [i.document] And with some further updates: Atomizing Thom’s virtual copy [pyjax.net]

I’ve been meaning to familiarize myself more with this platform, so perhaps this will provide an excuse. Here’s one sketch below:

Back to Processing, though, none other than original Processing co-creator Ben Fry weighs in with some thoughts on the

project and the ins and outs of the code written by music video Director of Technology Aaron Koblin.

Radiohead - House of Cards

Parsing Numbers by the Bushel [writing | Ben Fry]

In the latter post, you’ll find Ben delving deep into the particulars of how code is parsed in Processing – very useful if you’re working on your own data visualization code.  Here’s my short translation: you can cast an entire String[] array, not just an individual String. That’s something that comes up quite often, so I may have some additional examples of this soon if that doesn’t make sense, ye Processing coders.

I’ll be talking to Aaron later this week; stay tuned.

And if you work up a sketch with the House of Cards data — rough or polished — we’d love to have the scoop here on CDM, so let us know.

Updated:

exiledsurfer points to Processing and OpenFrameworks templates for interpreting the Radiohead video code. The OFW code is only partially finished; to me, Processing should be easier to work with, but of course if you’re already working with OFW you may want to go with that environment.

Who would have imagined seeing a music video on Google Code? Welcome to the new age of data visualization.

Radiohead’s new video uses 3D images capture from two scanners – one a close-proximity 3D scanner from Geometric Informatics, another a multiple-laser array for the “exterior scenes” rotating in a 360-degree pattern. That yields just data, not anything you can look at, so the artists created the video itself using the open-source tool we love so much, Processing (site | CDM tag).

Cool so far. But the interesting part is that the tools and data are open-sourced and/or freely available:

View the data visualization in 3D and navigate with the mouse

Download the data in CSV form and do stuff with it using Processing source code and instructions

There’s a remix-friendly license in there, and a YouTube group to follow the results.

All the relevant links, plus the video itself:

RA DIOHEA_D / HOU SE OF_C ARDS [ Google Code ]

It’s also striking to notice that, despite the new-fangled technologies, the face stuff is remarkably similar in actual visual effect to the Rutt-Etra video synth (see also stories on Rutt-Etra restoration, Bill Etra restrospective). The process is entirely different: the Rutt-Etra processed the image directly via raster manipulations, whereas the Radiohead video is really a visualization of 3D data. But in some ways, I find the 1972 effect more appealing, and the visual relationship I believe is intentional.

Then again, part of the power of data visualization is that you can make it look like whatever you want. So it’ll be interesting to see how these techniques evolve.

Director: James Frost (Zoo Films)

Director of Photography: Von Thomas (Zoo Films)

Director of Technology: Aaron Koblin (whose work we’ve admired at the MOMA Design and the Elastic Mind show, via the now-defunct Yahoo Design Innovation Team, and elsewhere)