Processing.js


Demos below!

As a sort-of reverse birthday present I’ve decided to release one of my largest projects, in recent memory. This is the project that I’ve been alluding to for quite some time now:

I’ve ported the Processing visualization language to JavaScript, using the Canvas element.

I’ve been working on this project, off-and-on now, for the past 7 months – it’s been a fun, and quite rewarding, challenge. The full scope of the project can be broken down into two portions:

The Processing Language

The first portion of the project was writing a parser to dynamically convert code written in the Processing language, to JavaScript. This involves a lot of gnarly regular expressions chewing up the code, spitting it out in a format that the browser understands.

It works “fairly well” (in that it’s able to handle anything that the processing.org web site throws at it) but I’m sure its total scope is limited (until a proper parser is involved). I felt bad about tackling this using regular expressions until I found out that the original Processing code base did it in the same manner (they now use a real parser, naturally).

The language includes a number of interesting aspects, many of which are covered in the basic demos. Here’s a brief selection of language features that are handled:

  • Types and type casting – Type information is generally discarded, but becomes important in variable declaration and in casting (which is generally handled well).
  • Classes – The full class system is supported (can be instantiated, etc. just fine).
  • Method overloading and multiple constructors – Within classes you can have multiple method (or constructor) definitions – with the appropriate methods being called, based upon their signature length.
  • Inheritance – Even classical-style inheritance is supported.

Note: There’s one feature of Processing that’s pretty much impossible to support: variable name overloading. In Processing you can have variables and functions that have the same name (e.g. float size = 0; float size(){}). In order to support this there would have to be considerable overhead – and it’s generally not a good practice to begin with.

If you’re curious as to what the language looks like, here’s a basic example of inheritance:

class Spin {
  float x, y, speed;
  float angle = 0.0;
  Spin(float xpos, float ypos, float s) {
    x = xpos;
    y = ypos;
    speed = s;
  }
  void update() {
    angle += speed;
  }
}

class SpinArm extends Spin {
  SpinArm(float x, float y, float s) {
    super(x, y, s);
  }
  void display() {
    strokeWeight(1);
    stroke(0);
    pushMatrix();
    translate(x, y);
    angle += speed;
    rotate(angle);
    line(0, 0, 66, 0);
    popMatrix();
  }
}

The Processing API

The second portion of the project is the full 2d Processing API. This includes all sorts of different methods:

  • Shapes drawing
  • Canvas manipulation
  • Pixel utilities
  • Image drawing
  • Math functions
  • Keyboard and mouse access
  • Objects (point, arrays, random number generators)
  • Color manipulation
  • Font selection and text drawing
  • Buffers

Most of these are demonstrated in the basic demos.

There’s pretty-good coverage of the Processing API: there’s sure to be many gaps, but most of what I can throw at it works.

Download

The full source code is contained within a single file. It comes in at about 5000 lines, compresses down to less than 10kb.

How to Use

The API is quite simple – there’s a single method “Processing”. If you wish to only use the Processing API (not the language) you can interact with it like so:

var p = Processing(CanvasElement);
p.size(100, 100);
p.background(0);
p.fill(255);
p.ellipse(50, 50, 50, 50);

If you wish to have the full power of the language, as well, you would pass in your Processing code as the second argument.

Processing(CanvasElement, "size(100, 100); background(0);" +
  "fill(255); ellipse(50, 50, 50, 50);");

That’s really all there is to it. Information on the full Processing API can be found on the Processing.org web site.

Important: Browser Support

Before we get into the demos I want to outline what some of my goal was for this project. First, and foremost, I wanted to try and get the best Canvas-based demos out of a browser, as possible. This meant that I had to shoot directly for the latest, and greatest, browsers. I needed good Canvas API support and, importantly, I needed speed.

Because of this, for this first release, I’ve specifically targeted Firefox 3, the latest WebKit Nightly, and Opera 9.5. In other words: beta browsers.

A large part of the code base is sure to work in “older” browsers (Firefox 2, Safari 3, Opera 9, and IE with excanvas) – but that wasn’t my target platform. I wanted something that would be capable of pushing the edge of what a browser is able to render – giving them something to strive for in their upcoming releases.

There were a couple of stumbling blocks that the above browsers hit:

  • Image loading – Currently, only Firefox 3, Opera 9.5, and Safari 3.1 handle this reliably.
  • Pixel processing – Loading pixel data from images, manipulating them, and putting them back on the canvas. Only Firefox 3, Opera 9.5, and WebKit Nightlies can handle this sufficiently.
  • Font loading and text rendering – The specification for this is still in the works, currently only Firefox 3 has support for this.

Thus, anything outside of the above (images, pixel processing, and text) should work “ok” everywhere.

Demos

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!

What would the release be without a ton of demos? In development I worked in a backwards manner. Instead of building the API up from the ground – I worked from the top, down, implementing enough of the API to get individual demos working. The result of this is two-fold: 1) It made for a very rewarding development process – and guaranteed working demos and 2) It means that there are still portions of the Processing API left unimplemented.

Regardless – enough of the API has been implemented to allow all of the demos, available on processing.org, to work as best as possible.

Here’s the full break-down of demos that are available:

I’ve gone through and cherry-picked a bunch that I really liked – in case you’re interested in seeing some really interesting ones. Wherever possible I specify what browsers the demos work in (if none is specified, then it should work in all).

Custom Built/”Found In the Wild” Demos




Basic Demos (91 Total)

All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.








Topical Demos (51 Total)

All of the following demos were written by Casey Reas and Ben Fry unless otherwise stated.












Mandelbrot Fractal (Firefox, Opera 9.5)



I’m quite curious to see what people construct with this new API. I think it holds a lot of potential and I’m excited to see what comes of it! Enjoy!

Remember: You should be using Firefox 3, a WebKit Nightly (Safari 3.1 is missing some features), or Opera 9.5 – the above demos generally work best in those browsers.

Posted: May 8th, 2008

Subscribe for email updates

220 Comments (Show Comments)


Comments are closed.
Comments are automatically turned off two weeks after the original post. If you have a question concerning the content of this post, please feel free to contact me.

Secrets of the JavaScript Ninja

Secrets of the JS Ninja

Secret techniques of top JavaScript programmers. Published by Manning.

Subscribe for email updates

John Resig Twitter Updates

@jeresig / Mastodon

Infrequent, short, updates and links.