The processing.js library allows Web developers to add animation and graphics to a Web page. I created a Hello World for processing.js but it took a lot longer than it should have. Let me explain.

In the beginning (1990s), to add graphics and animation to a Web page, there was Flash. But this requires an add-in. So a language called Processing was created to allow developers to add graphics to a Web page without the Flash add-in. The Processing language is sort of a dialect of Java and uses an applet so there was still an add-in required.

Then came the processing.js library. This is a JavaScript library that translates Processing-language files, which have a .pde (“Processing Development Environment”) file extension, to ordinary JavaScript that can be displayed using an HTML5 canvas object – in other words, no external display add-in required. (The D3.js library is probably the main alternative — D3 seems to have more support in the developer community, but I don’t have data on that).

OK, so there are many hello-world examples for processing.js on the Web but it took me about three hours to finally get my example to work because I had to add a new *.pde MIME Type to IIS – a fact that appeared nowhere in the documentation or online examples I found. Very annoying.

So, to create a processing.js hello-world example on a Windows machine using IIS, step #1 is to add a new *.pde MIME type. (This isn’t entirely trivial in itself).

Step #2 is to download the processing.js file to your Web site.

Step #3 is to create a hello.html page with references to the processing.js library and a .pde file.

Step #4 is to create the .pde file.

// file: hello-web.pde
void setup() {
  size(200, 200);
  background(100);
  stroke(255);
  ellipse(50, 50, 25, 25);
  println("hello web!");
}

The images on this post summarize. Getting a basic example working in any technology is rarely as easy as it should be.