Processing is an open source language and environment originally created by Ben Fry and Casey Reas. It started out with the goal of teaching the basics of computer programming in a more visual context but has grown into something so much more. It’s now used by hundreds of thousands of people for learning, prototyping, and professional projects alike. It’s a pretty big deal these days. The best way to describe what processing is all about is their mission statement:
Processing seeks to ruin the careers of talented designers by tempting them away from their usual tools and into the world of programming and computation. Similarly, the project is designed to turn engineers and computer scientists to less gainful employment as artists and designers.
How can you not love a project with a mission like that?
Historically Processing hasn’t been all that great on the web. While there certainly were ways to get the java-based processing sketches to run in your browser, it wasn’t pretty. Enter processing.js to fix all that!
Processing.js saves the day
Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins. You write code using the Processing language, include it in your web page, and Processing.js does the rest. It’s not magic, but almost.
A test drive
That all sounds pretty darn cool to me, so I took it for a spin with one of the exercises I made in Jer Thorp’s Processing workshop earlier this year. (Jer posted a great dataviz and processing.js tutorial a couple days ago too!) I started with something easy — a sketch with one external class — just to test things out. It took all of two minutes to get my processing sketch up and running in the browser as <canvas> . One line to include processing.js, and one line to link to my original sketch and its class. Done!
That’s pretty impressive! Even more impressive was that it ran just as fast as the original processing version and was complete with mouse interaction from the original sketch. Obviously there was no need need to start with such an easy one.
Go make things with processing.js!
If converting existing .pde files isn’t your thing, there are also browser-based editors like this one where you can try your code live. There’s a whole list of other web-based IDEs on the processing.js site as well.
Oh, and that’s not all, there’s a number of other rendering modes available: 2D context, 3D (WebGL) context, and options to use processing.js as an API. There’s a lot more to this project than you might first think.
The processing.js site provides a number of options for getting started. If you hate reading instructions as much as I do, jump right in with the “for the impatient” section.
The latest and greatest!
Processing.js 1.3 was just released last week with big improvements made to speed, font rendering and more. If the Eyeo festival keynote was any indication we can expect to see tighter integration between Processing and Processing.js when Processing 2.0 is released.
Processing.js in the wild
Decoded conference identity generator
The decoded conference has a processing.js -based identity generator for you to play with and even send as an ecard of sorts if you’d like.