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:


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

  • Tatu Guerra

    I'm prety ignorant with programming. But I have a question about this subject. Wouldn't be useful JavaScript in Processing to connect Processing and QuartzComposer, once Qartz also work with JS?

  • @Tatu: Nope, that won't work. Quartz Composer using JavaScript to script other events in QC — and uses QC as the renderer. This implementation assumes you're using the *browser* as the renderer; that's the only reason you'd even want to use it. The browser is what's putting stuff on the screen.

    I should say it explicitly: there is a HUGE advantage to running Processing on Java as it was designed. All these additional libraries, all its performance features, its ability to do high-quality rendering, OpenGL — all of this is dependent on Java as the platform.

    Compare Quartz Composer, which does only a few things, isn't extensible, is proprietary and closed-source (Java is open), and is chained to the Mac platform.

  • Tatu Guerra

    Well, as I said before I'm ignorant at subject. Thx very much for the explanation Peter. I got the point.


  • I don't know why my comment didn't go live on the author's original post, but the example graphic as seen here is either entirely by or extremely influenced by Jared Tarbell,

  • Pingback: John Resig - Processing.js Aftermath()

  • Pingback: Create Digital Motion » Processing.js: Very Cool, But JavaScript Nuts Go Overboard()

  • Pingback: Create Digital Motion » Processing + iPhone, Via JavaScript, SpiderMonkey, OpenGL ES()