Beatesthesia: Free, New Processing-Based Music Visualizer/VJ Tool

By vade


Beatesthesia Custom Visulizer from olly gore on Vimeo.

Beatesthesia is a new open-source, cross-platform VJing/music visualizer application programmed in Processing. It sports some interesting design decisions, including an audio-reactive user interface. Its an interesting idea, and is certainly pretty and definitely novel. At first glance, I didn’t like the blinking UI; it struck me as being far too distracting, but, after second thought, it’s a pretty decent way of conveying content and disambiguating a UI elements purpose. Well done. Check out the Vimeo video and home page to get a feel for its capabilities.

Beatesthesia strikes me as being more of a music visualizer than a fully featured VJ application, but it’s open source, which means it will grow as it pulls in a dedicated user base. Beatesthesia’s website also hosts shared projects, so you can explore other users visualizations. [Ed. For what it's worth, it looks like more than just a visualizer to me -- especially as you start to edit the ways in which it works and make more elements "performable" -- and if you don't like this specific implementation, you could certainly code your own in Processing! Anyone performing with this or building something similar, let us know. -PK]

Want Easy Processing? Use the Downloaded Tool

imageThis illustrates why people are jumping for Processing.js, even if it cripples many of the things that make Processing cool. Paul Downey inadvertently hits the nail on the head:

… somehow hadn’t got around to actually doing anything with it. You see it’s the whole Java thing that puts me off; when it comes to playtime life’s far too short to wrangle a CLASSPATH or compile an applet.

Ah-hah — there’s the reason: developer laziness, and fear of Java. And rightfully so. Configuring a full-blown IDE for Java can in fact be some effort — I think it’s well worth it when you’re doing lots of work over time, but what if you just want to sketch?

Here’s the good news: Processing’s "founding fathers" Ben Fry and Casy Reas agree with you.

The thing is, these JavaScript developers I think haven’t bothered actually trying Processing — the real Processing in Java. The creators of Processing understood that traditional Java development could be a pain. So the whole point of the Processing IDE that you get when you download — a simplified text editor that understands the Processing language — is saving you exactly that trouble. You almost never, ever have to deal with "wrangling a classpath." It just doesn’t happen, certainly not with the included libraries (which do a lot more than Processing.js can). In fact, there’s even a download for Windows that takes care of installing Java for you. Nor do you have to worry about the effort involved in "compiling an applet." Again, Processing does the work for you.

In case you’re interested, what Paul did is reasonably cool — he set up Processing.js inside TiddlyWiki, the personal notebook tool.

But, Paul, in the time it took you to do that, you could have been off and running in the Processing editor. Give it a shot, really. As I said, I think the hack for JavaScript is very much in the spirit of Processing as an open platform. But if you don’t experience it in Java, you’re missing out on a lot of what it can do.

Processing.js: Very Cool, But JavaScript Nuts Go Overboard

processingjs

Processing sketches by Ben Fry and Casey Reas, as ported to JavaScript. A great hack — but is it the second coming JavaScript bloggers say it is?

I think ports, hacks, and tech projects are fantastic. I’m a believer in experiments and proof of concept. So when I saw the port of Processing to JavaScript, I was impressed. I think this stuff is valuable, even if it’s imperfect.

Processing.js could indeed be useful in some cases, and it’s a testament to developer John Resig’s prowess as a JavaScript guru. But it’s limited by the restrictions of JavaScript. That isn’t a deal-breaker — it just means you need to adjust expectations and use this tool as what it is.

Unfortunately, the word "JavaScript" is magical to a lot of the Web development community in a way that seems to make them lose sight of reality.

Processing.js Aftermath [John Resig blog]

That’s sad. Because if "Java" remains a four-letter word (erm … well, you know what I mean), it really will be a massive blow to the open future of rich client media.

The Reality

Processing in Java is …

  • Extensible (you can easily add Java libraries to add features)
  • Massively compatible (you need only Java 1.3 or later, which believe it or not is already on the majority of machines — on CDM, we see roughly the same penetration as we do for Flash)
  • Fast (significantly faster than JavaScript for processor-intensive operations)
  • 3D
  • Functional in the browser and as desktop software on every platform
  • Compatible with desktop features (hardware support, MIDI, synthesis, audio, video … see the extensible bit)

Processing in JavaScript is …

  • Limited to JavaScript’s capabilities — and thus not nearly as extensible
  • Massively incompatible (IE7 doesn’t work at all. Firefox 3 is recommended, even though it’s not out yet.)
  • Slow, often unstable, and CPU-hungry
  • Browser-only
  • Loses all desktop functionality (hardware support is significantly less than what you get with Flash)

This is not to say it’s not a good idea, or that it’s not fun to play with. In fact, none of the above restrictions take away from the coolness of John’s project — I’m really glad he did this, and I think it has a lot of potential. But let’s see how the JavaScript-happy blogosphere takes the news…

read more

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.

Peter on the Road: Boston, April 4-6 for Massaging Media Design Education Conference

I’ll be doing a two hour workshop in Boston on Processing for a conference on graphic design in education. My goal: get a group of educators and students unfamiliar with the tool up to speed as quickly as possible. I’m assembling a “90-minute” Processing code kit for the purpose, indebted to some of the existing examples but adapted to teaching; I’ll be open sourcing that on CDM Labs and certainly welcome input. (Stay tuned — and any of you other Processing folk out there had to do something like this? Ben Fry has a folder of code he uses, I know; Dan Shiffman has gobs of great stuff but it assumes a timeframe more like a semester.)

I’m really excited about the conference itself. There’s unfortunately far too little real focus on how media impacts teaching, and that’s exactly what this event addresses:

Massaging Media 2: Graphic Design Education in the Age of Dynamic Media conference will gather a diverse group of presenters and attendees from around the world for a provocative conversation on how graphic design education is being affected by dynamic media.

Through keynote presentations, panel discussions, multiple-track speaker sessions, a working lunch, and a breakfast roundtable, we will focus our discussion on five key subject areas: pedagogy; practice; theory; future history; and making it work.

In the lineup: designers of the future, kinetic typography, algorithmic design and open code, motion literacy (which unfortunately I think does NOT mean how many people are subscribed to our RSS, but hey), fluid, dynamic design, and naturally lots on pedagogy.

And I absolutely have to catch up Kyle Buza, who gave us the mmonoplayer Max 8-bit externals.

If you’re a student, you can attend the conference for as little as US$75; for everyone else you can register online for US$225 even without a membership in the AIGA, the sponsoring organization. And if you come, do say hi!

massagingmedia2

Weekend Inspiration: Martin Böttger’s Ever-Changing Geometries

martin

Whether in three-dimensional videos or paper sculptures, artist Martin Böttger manipulates organic, fluid geometry like a child with blocks. An artist working with Maya, vvvv, and Processing, his work demonstrates that even simple elements can yield a variety of creative products.

“Transformer” is an intentional nod to the robots and movie — with good reason; Martin seems like the type who could design you a robot that changes into a truck:

read more

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

Processing Class in New York, Online: Art From Code, For Non-Coders

I used to be resistant to the idea of coding. It wasn’t just fear that I couldn’t do it, though that was part of it; it was also the sense that I wouldn’t be able to get to the actual art and music making if I got too involved in programming. And, actually, that bit can be true. But a group of pioneers, working on projects like Processing, OpenFrameworks, and other intelligent development frameworks, has been working really hard to make code an elegant an expressive tool rather than a hindrance. Processing has reached widespread popularity because it does this really, really well — even if you’ve never programmed before.

I’ll be teaching a three-part class on Processing at Harvestworks in New York next month. If you’re in the area, there should still be openings if you’d like to sign up (and if you’re enrolled, feel free to holler hi here — if I hear from you in advance, I can help tailor the course to your needs).

For intermediate digital artists, even those who have never coded before, we will introduce techniques in Processing. Processing is an elegant, high-level, Java-based tool designed to make coding friendly to artists. We will learn how to create generative art in just a few lines of code, building interactive works in minutes. We’ll also look at some of the deeper possibilities for manipulating data, video, images, sound, and MIDI and other I/O. The emphasis will be on basic sketches that help introduce fundamental coding skills.

Wednesdays, March 5, 12 and 19, 6:30 – 9:30pm
$325/$385

Class page / signup @ Harvestworks

The class will specifically focus on how to make video, 3D visuals, MIDI, and sound work for performance. Making Processing a performance tool definitely involves some particular skills. But I’ll also use this as an opportunity to teach very basic coding techniques so that unfamiliar programming topics can immediately generate something on the screen or some sound, since that’s part of the appeal of the whole tool.

But what if you’re not in New York?

We’ll soon have CDM Labs up, which will include examples from the team at CDM, plus other stuff from around the Web, not only in Processing but related tools, as well. I’ll use this as a playground for the course, so what I share with them, I can share with you. And, honestly, we hope this will help discipline us here to keep coding and keep documenting. More on that soon.

I’m also hoping to refine this course into something that can be offered elsewhere; if you’re interested, get in touch.

More on Processing:

Random sketchbook of mine, the kind of stuff you can put together in minutes

Flickr Processing pool

Processing videos on Vimeo

Processing tag on Create Digital Motion

Official Processing exhibition page

Processing work by Ryan Alexander (”scloopy”)