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

Processing Inspiration: Particles + Radiohead + Flight404 = Weird Fishes

By Jaymis

I’m sure that after all of our gentle prompting, people are keeping a watchful RSS reader over Flight404.

For those who haven’t been paying attention: The latest iteration in Robert’s wonderfully evolving Magnetosphere series was designed for the AniBoom Radiohead video contest:


Weird Fishes: Arpeggi from flight404 on Vimeo.

More information.

Why FreeFrameGL 1.5, Open 3D Plug-in Format, Rocks Our Teenage Party World

image Bart from Resolume has posted some details of the release of FreeFrame 1.5, including OpenGL-based FreeFrameGL:

FreeFrame 1.5 Release

Here’s why it makes us smiling, happy visualists:

  • Open and wide: It’s open, and supported by multiple hosts (the creators of VJamm, Resolume, and Salvation all contributed to the 1.5 team)
  • GPU, go! It gives you GPU-powered goodness, meaning more flexibility, power, and speed for 2D and 3D effects alike
  • More pixels, more frames: It runs at higher resolutions and frame rates
  • Third Dimension: It supports 3D functions and pixel shaders for joyous new eye candy
  • Timing: A timing function allows time-dependent visual effects like particle systems and physical simulations (tasty!)
  • Developer-friendly: Sample projects (Microsoft Visual Studio, Delphi, Xcode) and source should help get coders up and running — and the coders then turn out goodness for you non-coders
  • User-friendly: If you don’t want to code, you can expect lots more awesome plug-ins for your VJ app of choice.

Join us in CDM Labs: If you’re interested in joining a special CDMotion team working on additional documentation and sample projects, give me a holler. Otherwise, stay tuned.

Pictured: one of the Resolume team’s plug-ins in development.

Anyone up for doing the Death Star?

Faux Quartz Composer in Java, for Cross-Platform Nodal Visuals: Bean Machine

beanmachine

It’s still early in development (read: it often crashes), but The Bean Machine applies nodal, patch-based development to Java. The interface is mysteriously close to Quartz Composer, down to capabilities, UI, and even the 3D cube tutorial. Personally, I use Java because it can do things Quartz Composer can’t, but it’s interesting nonetheless — and raises, again, the question of why we don’t see more tools that try to meld the capabilities of code and patches.

The cool bit: nodes are Java Beans, so you really could use this to combine the best of both worlds if it matures. No download yet, but we’ll be watching … perhaps it will inspire other developers, as well.

The project is labeled “experimental”, but could be worth a look. Developer Jerry Huxtable has lots of other goodies for Java-heads on his page, including lots of 2D image processing stuff and a map editor — Processing lovers, might want to pop this into your del.icio.us.

Bean Machine @ JH Labs

JH Labs main page with lots o’ projects

Digital Tools Interviews Paris Graphics on Homebrewed Mobile Game VJ Tools

The nicely-growing Digital Tools blog has an excellent interview with visualist Paris Treantafeles, who works with lo-fi 8-bit-style visuals using tools he’s built for GBA and the Linux-powered Gamepark.

Interestingly, while a lot of people will dismiss the 8-bit movement as “nostalgic” — implying it’s just 20-somethings pining for their Mario-playing childhoods — Paris’ inspiration was originally vintage analog synthesizers. And synthesizing graphics is his main interest:

I concentrate on creating graphics from scratch. That’s pretty much all I do. Other people like using movie clips and manipulating them, but from my point of view it’s a good exercise to see what you can do when you have to create everything from scratch. It gives you an appreciation to form and color.


Hally // Blip Festival 2007: The Videos from 2 Player Productions on Vimeo.

The synthesis/sampling argument I think is very much related to the way electronic music is produced. I find that focusing on either one can be a good exercise — see our friend Troels sampling Coke bottles, for instance.

It’s nice stuff, but I do hope, particularly here in the US where the VJ/visualist scene has had trouble gaining broader recognition, that we start to see other styles on genres forming more coherent “scenes” in the way 8-bit has. Of course, what has happened for people like Paris is he’s found strong advocates in the musicians, which seems to be a key element (and has helped strengthen the visual work done outside chiptune music, as well).

Java3D, Now Open Source, with a New Name

lg3d

Project Wonderland, rendered in Java3D, which was just open sourced. Not so awesome-looking, aesthetically. (The point here is more lightweight, online collaboration and utility.) But J3D can be useful, and this announcement is another win for open Java — not to mention, between JOGL and J3D, you can make a 3D project in Java look just about however you like.

Attention, vector math fans! Wait … stop. That’s a terrible lead. Let me try again.

Open source advocates, your attention, please! Okay, slightly better.

Anyway, Java3D, the fully object-oriented Java API to 3D visuals, is now fully open source. That actually is big news to vector math coder types, because the vector math packages are now all modifiable if you like. For visualists, the news is that even the relatively sophisticated portions of Java are going fully open — including, in this case, a key 3D component for the ubiquitous taste sensation Processing I keep talking about ad infinitum.

Much as Cat Stevens became Yusuf Islam and Lesley Hornby became Twiggy, Java3D won’t be called Java3D any more. Since 3D graphics programmers excel at marketing, it’ll instead be called “3D Graphics API for the Java Platform.”

On the off chance you’re not confused yet, Java3D isn’t the only open source 3D graphics API for the … um … Java platform. JOGL, the Java binding to OpenGL, is also open source (under the BSD instead of the GPL). So, what’s the difference between JOGL and the API Formerly Known as Java3D? (Speaking of which, can we just call the latter Fred? Fred is a great name for an API.)

Earth, viewed in NASA’s WorldWind Java — powered by JOGL, both also open source. Photo: C_Zimmerman.

read more

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

Open Source Visuals - Pure Data Videopedia & Processing OpenGL Workshops

By vade

Function Field Sytem by Voltage Controlled - made with Pure Data/GEM/PDP/PiDiP

Open Source software can be hard to approach sometimes, especially DIY programming environments, so there is some good news for those wanting to get started with two leading open source packages for performance.

Pure Data - the open source dataflow/patching environment now has a shared playlist on youtube. If you’ve been interested in Pure Data but hadn’t the slightest clue what it is or how to use it, you should check out the Pure Data Videopedia. The videopedia contains performance clips, tutorials and examples made with PD and some video related plugins.

Not into datalflow/graphical programming environments? Get your hands dirty with Processing. Check out the recently posted tutorials by user b2kn : “Coding for visual performance” workshop. You can find the accompanying processing sketches here. Good stuff!

Network Data and Quartz Composer: Leopard Tip

Pimp my mobile Quartz Composer ‘Book: this shot by Flickrer qlc demonstrates just how attached some Mac visualists are to Quartz Composer. But with security protections, is every QC composition an island? Good news: there’s a fix.

Quartz Composer gurus have had to face challenges bringing in network data: the problem is, to keep Quartz Compositions secure, Apple has largely crippled networking features. Celso Martinho has been hacking QC to make networking work in Leopard, and has a functional solution. He wrote us to tip us off on a detailed post at his blog.

First, if you’re still on Tiger, good news:

I needed a way to get data from the Network in the form of events that I could reuse in a quartz composition. So our resident mac programmer coded this custom made patch based on sparse non official documentation found on the internet. And it worked great. We have about 5 plasma screens with mac minis over at work running it for months, no problems whatsoever.

But while Leopard finally offered an official means of making your own patches (that’s what the rest of the patching world calls “objects”, Max/MSP, vvvv, and Pd users), Leopard also breaks their custom patch. Solution?

Then I found 2 patches in the new “Network” category: Network Broadcaster and Network Receiver. They are meant to connect several qtz compositions across the network and exchange messages between them. But maybe I can use them for something else…

I wrote a quartz composition to broadcast messages using UDP and multicast and started debugging and I discovered that the packets are really simple non-crippled text messages, four bytes per character iso-latin encoded chunks.

If you’re doing heavy-duty networking, I’d still investigate other alternatives to make sure Quartz Composer is your best choice. Processing and Max/MSP/Jitter both make short work of UDP send/receive, thanks to Java’s natural abilities there, as do objects in vvvv, Pd, and the like. Even Flash has some data features, with a little work. On the other hand, QC has some natural tricks of its own, and for multi-machine setups, the combination of this hack with QC’s new multi-computer features is very sweet indeed.

Full details, plus a PHP script that does the dirty work, here:

Leopard’s Quartz Composer and Network events [Celso Martinho]

Pd, Open Source Patching for All Platforms, Now Easier and More Visual

Pd on Mac

Pd as eye candy? Believe it. vade sends this shot of his work with Pd on Leopard.

Pd, aka Pure Data, is the free and open-source cousin of Max/MSP/Jitter. It’s powerful — even sometimes having technical advantages over Max — but has suffered from complex installation and dependencies, poor documentation, and an unpolished interface. Enter Pd-extended, a distribution that fills in those gaps. Pd-extended’s maintainer Hans-Christoph writes up what this is all about in an introduction on Create Digital Music, friendly even if you’re new to the Pd world.

Pd, Max’s Free Cousin, Gets Polish and Ease in Extended Build

Visualists should be especially interested in this latest release, because it offers much-improved out-of-the-box support for custom-patched 3D and video — especially if you’re on a Mac, for the PiDiP (though there are Windows and Linux improvements, too, and GEM works even with Windows).

Mac OS improvements:

  • Image and video-processing PDP/PiDiP work out-of-box
  • Anti-aliasing of boxes and lines in the interface
  • New, purty icon

Linux:

  • A .deb package for Debian and Ubuntu, with GNOME menu support. (`Bout time! Wonder if this means we’ll see it in the big Ubuntu repositories?)
  • New icon

All platforms:

  • GEM, the quasi-Jitter-like 3D and pixel library, has working shader support. Ed.: Truly outrageous.
  • New libraries: mapping, msd, mrpeach net/OSC, flib
  • [comport] is robust on all platforms (can you say Arduino?)
  • Font-face and -font-weight command line options
  • New font and layout is the exact same size on all platforms to the pixel. (previously you’d see some serious cross-platform glitching)

Pd Extended Release

And lest you have a bad taste in your mouth from the fugly older releases of Pd, Anton (vade) sends along the picture at the top of this story, showing the new UI from the Pd 0.40 dailies running on Mac OS X. Anton is also working on porting some of his brilliant visual patching from Max to Pd — and he’s living proof that even a Max die-hard can find at least some use with Pd, too. (The two environments are really, really close — sometimes confusion switching between them is because they’re so close, the differences can be confusing.)