Getting Started with Processing.js

javascript (18), processing-js (9)

Recently John Resig released Processing.js. Its a pretty interesting project, which allows Processing code to be run in the browser. This article is a quick look at why it is worth checking out, and ends with a tutorial explaining how to get started.

Why Does Processing.js Matter?

I see (at least1) two reasons why translating Processing.js is important.

  1. The first is that Processing's philosophy and syntax have never felt like a good match. The idea of drawing code sketches is tantalizing, and I think that concept embodies what is great about Processing. However, drawing sketches in Java 1.3 syntax feels like writing a letter with an almost exhausted magic marker: its possible, but it's hard to get lost in the joy of the process.

    Processing.js exposes much of the functionality of Processing to Javascript, which means that people who feel more comfortable with Javascript than Java 1.3 have another shot at getting to know Processing in a language they prefer.

  2. The second reason is "this will wipe out the applet completely.". Although I'm not quite as optimistic as Why--after a nuclear winter I fully expect applets to survive to compete with cockroaches--Processing.js is a nice hammer for a niche with an impoverished toolbox2.

Downloads

Processing.js is pretty easy to get up and running with, but first we have to download a few files.

  1. First, you will need to grab a copy of processing.js. Notice that we're grabbing the file directly from the project's SVN repository, so it'll be up to date. (Alternatively, you can grab a copy here.)

  2. Next, you will need to have a recent browser. Resig's recommends Firefox 3.0 Beta 5, but also says that the nightly WebKit builds and Opera 9.5 will--except for small pieces of missing functionality--work as well.

Setting Up

Now that we have the files we need, we'll need to throw together a hasty development environment. The first step is to create a folder to contain the javascript and html files we will be using. (Useless detail: I called my folder ProcessingJS.)

Next, copy or move the processing.js file you downloaded into the directory you just created.

Third, in that same folder, create an empty file called init.js. Now paste into it:

window.onload = function()
{
  var canvas = document.getElementsByTagName("canvas");
  for ( var i = 0; i < canvas.length; i++ )
  {
    Processing( canvas[i], canvas[i].previousSibling.textContent );
  }
};

(Note that the contents of init.js are taken directly from the demo examples developed by John Resig, and with no credit due to me.)

Now all we have left is to create is a simple html file.

Using Processing.js

The brunt of using Processing.js is to simply write the code in Processing and then place that code into a fairly standard html template. As such, once you have that template written once, you can just paste different Processing code snippets into it and reload the page in a browser and thats your development environment. Kind of nifty.

So, lets put together the html template. In our project directory create a blank file named test.html. Paste this html into it:

<html>
  <head>
    <title>A Processing.js Example</title>
    <script type="text/javascript" src="processing.js"></script>
    <script type="text/javascript" src="init.js"></script>
  </head>
  <body>
    <h1>A Processing.js Example</h1>
    <script type="application/processing">
    </script><canvas></canvas>
  </body>
</html>

Notice the empty script tag with type "application/processing". Thats where we'll be pasting the processing code. Browse over the examples page and pick one of the examples to try out. I tried the Setup and Draw example. Copy the code between the two horizontal rules. For Setup and Draw that means you just copied (omitting any comments for brevity):

void setup() 
{
  size(200, 200);  // Size should be the first statement
  stroke(255);     // Set line drawing color to white
  frameRate(30);
}
float y = 100;
void draw() 
{ 
  background(0);   // Set the background to black
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  
}

Now take what you copied and paste it into the html template above so that it looks like this:

<html> <head>
<title>A Processing.js Example</title>
<script type="text/javascript" src="processing.js"></script>
<script type="text/javascript" src="init.js"></script>
</head>
<body>
<h1>A Processing.js Example</h1>
<script type="application/processing">
void setup() 
{
  size(300, 300);  // Size should be the first statement
  stroke(255);     // Set line drawing color to white
  frameRate(90);
}
float y = 100;
void draw() 
{ 
  background(0);   // Set the background to black
  y = y - 1; 
  if (y < 0) { y = height; } 
  line(0, y, width, y);  
}
</script><canvas></canvas>
</body> </html>

Now open up our test.html file in Firefox. You should see the Processing code alive and running in your browser.

Wrapup

At this point there is nothing to stop you from experimenting to your heart's content. You can modify the code by contents of test.html and reload it in your browser, and you can learn more about the Procesing language at the Processing website.

I realize that one of the two reasons for Processing.js being interesting, that you can access much of Processing from Javascript, isn't addressed at all in this entry. I hope to spend some time in the near future rewriting some of the examples to use rely on Javascript instead of Processing for the application logic and that may evolve into an entry of some sort, if it seems like it'll be sufficiently interesting to inflict upon others.

  1. This isn't really a reason why Processing.js is important, but I think we'll end up seeing some novel and interesting combinations of server side rewriting of Javascript and Processing code that interacts with Processing.js. This could be as simple as loading dynamic data for charts, rewriting Processing code to use a user's personal color scheme, but could get as complex as our collective imaginations.↩

  2. For me the tragedy of the applet is the implementation has never measured up to the idea. Worse, it feels like they are moving in the wrong direction towards some kind of impenetrable and infinitely secure redoubt that can't do anything.↩