Processing, Ported to JavaScript

imageProcessing derives its power from its use from Java, and using Java applets, you can run Processing sketches in a browser. (You can even use 3D — OpenGL included, with some trickery.) But what if you could use Processing syntax with JavaScript — even just for the heck of it?

John Resig has done just that, porting Processing’s syntax and basic functionality to JavaScript, using the browser support for the Canvas element:

Processing.js

Incredibly, the whole project fits in a svelte 5000 lines — a 10kb compressed download. Now that it’s done, is there any advantage? Well, I can see using it for simple, lightweight JavaScript visualizations in the context of a Web design in which an embedded Java applet didn’t make sense. You will want to keep your expectations realistic: you lose out on some of the performance and functionality advantages provided by Java, and John has the additional warnings:

NOTE: I highly recommend that you use the latest Firefox 3 beta to view the demos. Most will work in the latest WebKit Nightly and a majority will work in Opera 9.5, but all will work in Firefox 3.

Note again: A lot of these demos will peg your CPU. As I mentioned above, I’m trying to squeeze the most out of the browser, as possible - be ready for it!

That said, I’m running Firefox 2 on a modest CPU and most of the demos are actually just fine. Anyone out there who, for some reason, has been waiting for this, I’ll be curious to hear more about how you think it might be used. But for the rest of us, it proves that some of the power of Processing is in the underlying concept and syntax, not just the literal implementation — and that’s a cool thing. As for those crazy hackers out there, well, keep on hacking!

For a previous example of this kind of in-browser insanity on Create Digital Music:

Lily: Browser Beatboxes and the Rebirth of Max-Like Patching

Play the NY Times Website Like an Instrument, and Other New Lily Tricks

SxSW: A New Web, From Live Data to Continuous, Visual Interfaces

searchburst

SearchBurst, which visualizes “burst” effects on Yahoo! Search, as world events impact search queries. Built in Processing by the yHaus team (Aaron Koblin specifically), with code/support from our friend and code hero Toxi, and Mike Chang.

meet_me_at_120x90 Imagine VJing with a stream of live snapshots from partygoers — or playing live data from the Web on email statistics as though it were a musical/visual instrument. The ability of tools like Processing to make numbers fluid opens up new interfaces to the storehouses of data on the Web — but also makes them friendly to artists and visualists.

I’ll be doing a workshop at South by Southwest Interactive in Austin with S. Joy Mountford, formerly VP Design Innovation, Yahoo and leader of the Yahoo Design Innovation Team aka yHaus. Joy certainly knows her stuff — not only did she lead a ground-breaking team at Yahoo, but she’s also supported student work and research and has a long history in interaction design including working on the original QuickTime interface. We’ll talk about the work being done, where we think these technologies are going, and how you can give it a try yourself.

Data as Art: Musical, Visual Web APIs [Event Page, SxSWi]

5:00 pm - 6:00 pm, Sunday, March 9

read more

Visualizing Data, and Data as Art

0aajohson2 Regine at We Make Money Not Art has a fantastic overview (summarizing a recent workshop) of presenting data and numbers visually:

Visualizing: tracing an aesthetics of data

It’s a great read; well worth working through the whole thing.

The art of presenting data more expressively is exploding fast. It was a big part of the impetus behind the creation of Processing, the artistic coding tool. (In fact, a lot of those post reminds me of some of the ideas Ben Fry explored at a workshop I attended in Aspen, Colorado. While Processing is often used by artists for other purposes, it was born as a means of making data visual.)

Ben describes data visualization as “thinking with the eyes” — provocative stuff. But coming from a music background, I’m always interested in the senses going beyond thought. Could data become a live performance tool? With Processing (and other tools) in the hands of VJs/visualists, there’s nothing preventing artists from taking that next step.

If you’re going to South by Southwest Interactive (March in Austin), I’ll be presenting a panel (and possibly one or two events) on data as art, both in visuals and music, and will speak specifically to this question of performance tool. Already confirmed for the panel session is pioneering interaction designer S. Joy Mountford, who led Appple’s International Interface Design Project and is now on Yahoo’s Design Innovation Team. More details on that event soon.

What happens when data artists and interaction designers collide with VJs and digital musicians? I’m excited to find out.

Processing Awesomeness on Video: Shiffman’s “Most Pixels Ever” Multi-Monitor Library, Look inside ITP

By Jaymis

I was about to post about Daniel Shiffman’s new MPE (Most Pixels Ever) Library, when what should appear in my Processing Blogs subscription, but an extended video showing more of the ITP lab, and The Shiff (first ever rockstar processing nickname? I hope so) himself talking about the project.

Preface: If you love Processing - as we do here at CDMo - then you should already be subscribed to ProcessingBlogs, and have probably already seen this. However it’s too cool not to add to our Processing.org tag page. Hence this post.

Most Pixels Ever

“Most Pixels Ever” (not to be confused with “Best Pixels Ever”) is an open source Java framework for spanning real-time graphics applets/applications across multiple screens. The above video is a quick demonstration of the first prototype. Three client applications on three Mac Pros connect to six 32 inch LCD displays (each Mac has a dual video card, but this could just have easily work with 6 client machines). One of the Macs is also running a server application. The server tells each client about the master pixel dimensions of all the screens combined (here 8160×768). The client keeps track of its own location dimensions (say 2720×768) as well as its location with in master dimensions (say 5040,0). The server keeps everyone in line, making sure that frames are rendered in sync.

We’ve had a couple of people in the CDM Forums asking about multi-screen projections and video installations. It’s a logical progression for advanced projects - there aren’t many things which won’t look considerably more awesome if spread over multiple screens - but hasn’t really been an option thus far in Processing, unless you were to go the hardware multiple-monitor route.

To the video: Tech Trek: Inside ITP (episode 2) (3 minutes).
Via ProcessingBlogs.

Real-Time Visualizations, VJ by Hearbeat: Jan Kremlacek + Processing

Image from Whizz, projected at a Romanian club by Jan Kremlacek and coded in Processing.

Last week, we saw how Flash and Processing code can create custom VJ and visualization tools. Custom code means custom results, and all sorts of dynamic new possibilities for visuals. Jan Kremlacek writes from the Czech Republic to share his own projects. He’s been using Processing to create interactive visuals for clubs, based on everything from sound to motion detection to heartbeat inputs.

Jan writes:

read more