Processing.js

a port of the Processing Visualization Language

About Processing.js

Processing.js is an open programming language for people who want to program images, animation, and interactions for the web without using Flash or Java applets. Processing.js uses Javascript to draw shapes and manipulate images on the HTML5 Canvas element. The code is light-weight, simple to learn and makes an ideal tool for visualizing data, creating user-interfaces and developing web-based games.

Processing.js is explicitly developed for browsers that support the HTML5 <Canvas> element. Processing.js runs in FireFox, Safari, Opera and Chrome but will not be supported in Internet Explorer until Mircosoft catch up with ISSUE 15.

Implementing Processing.js in Flash or Silverlight is not recommended as Java already occupies the browser-plug-in space for this library. For users wishing to run Processing.js in Silverlight, see Paul Irish's Silverlight implementation. Using Explorer Canvas with Processing.js typically results in unusable frame-rates for moderately complex visualizations.

The Processing language was created by Ben Fry and Casey Reas. It evolved from ideas explored in the Aesthetics and Computation Group at the MIT Media Lab and was originally intended to be used in a Java run-time environment. In the Summer of 2008, John Resig ( inventor of jQuery ), ported the 2D context of Processing to Javascript for use in web pages. Much like the native language, Processing.js is a community driven project, and continues to grow as browser technology advances.

Basic Syntax

Basic Example: Download / Source

A brief look at the structure of a Processing sketch reveals how easy it is to program interactive visualizations.

As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.

The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.

To the right is a basic example of Processing.js in action. If you take a moment to read the source code below, you will see that a few lines of Processing code can go a very long way. You may also notice that Processing syntax is almost identical to Java.

 
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
  size( 200, 200 );
  strokeWeight( 10 );
  frameRate( 15 );
  X = width / 2;
  Y = height / 2;
  nX = X;
  nY = Y;  
}
// Main draw loop
void draw(){
  
  radius = radius + sin( frameCount / 4 );
  
  // Track circle to new destination
  X+=(nX-X)/delay;
  Y+=(nY-Y)/delay;
  
  // Fill canvas grey
  background( 100 );
  
  // Set fill-color to blue
  fill( 0, 121, 184 );
  
  // Set stroke-color white
  stroke(255); 
  
  // Draw circle
  ellipse( X, Y, radius, radius );                  
}
// Set circle's next destination
void mouseMoved(){
  nX = mouseX;
  nY = mouseY;  
}

Adding interactivity to your visualization is incredibly simple. There are a host of built-in functions such as: mousePressed(), which controls the behavior of your script on click events; or mouseMoved() which defines what should happen as your mouse moves across the Canvas.

Processing.js also tracks a range of pre-defined variables like key, which stores the value of the last key pressed; or mouseX and mouseY, which store the last recorded position of the mouse pointer.

The simplicity of the Processing syntax makes scripting a breeze: pre-defined animation functions and elegant handling of DOM events make Processing.js a solid API for standards based visualization. What are you waiting for?

Community

• Dev. Community on IRC
• Lighthouse Bug Tracking
• Processing.js GitHub Repo
• Open Source @ Seneca
• Processing.js on Twitter
• Processing.js Google Group
• Community Credits

Updates

• v0.9.1 Release.
• Updated CHANGELOG
• Merge branch '232' of git://github.com/ScottDowne/processing-js into 232
• Final fixes to tic #232

Downloads

• Download Processing.js