A brief sketch of Processing

Please consider subscribing to LWN Subscriptions are the lifeblood of LWN.net. If you appreciate this content and would like to see more of it, your subscription will help to ensure that LWN continues to thrive. Please visit this page to join up and keep LWN on the net.

Processing, a somewhat confusingly named language, has been around since 2001. As the language heads towards toward a 2.0 release, it seems a good time to take a look at the language, who uses it, and what they use it for.

History and goals

The Processing project was started by Casey Reas and Benjamin Fry. Both developers were involved in the development of the Design By Numbers programming language, a 1990s experiment at the MIT Media Lab whose goal was to make programming easier for non-programmers. Like Design By Numbers, Processing was initially developed as a tool to teach programming in the visual arts. Consequently, the language and its development environment are heavily oriented toward visual output, animation, and graphical interaction. Those attributes provide an "instant gratification" aspect that makes the language engaging for just about anyone to learn, perhaps even more so for people with little previous programming experience. Processing supports both 2D and 3D graphics programming.

The project provides both a language (translator plus libraries) and a development environment (the Processing Development Environment, or PDE). Both of these are written in Java, with the consequence that Processing runs on a range of operating systems including Linux, Windows, and Mac OS X. There's also support for creating Android applications that, the developers warn, should be considered to be Beta quality. The PDE is licensed under the GNU GPLv2+ and the libraries are licensed under the GNU LGPLv2+. (The Processing web site provides instructions for downloading the source code from the Subversion repository.)

Syntactically, Processing is very close to Java, and in fact the Processing translator simply translates a Processing program—called a "sketch"—into Java before running it. However, by contrast with Java, Processing doesn't require the programmer to understand object-oriented programming concepts such as classes and objects (although most advanced Java features are available should the programmer want to make use of them). In addition, the basics of the Processing graphics library can be quickly grasped, but the library is sufficiently rich that Processing programs can produce sophisticated graphical output. The upshot is that programs that produce useful graphical output are typically much shorter and more easily written than their Java equivalents.

Installation and set-up

Installation of Processing is simple: download the tarball, unpack it, and then execute the processing shell script. Running the shell script fires up the PDE, whose operation is fairly obvious: a menu bar, a toolbar (for common operations such as opening, running, or stopping a sketch, and exporting an sketch to create a standalone program), a display window for the source code, a message area (for error messages and so on), and a console for displaying output produced when the sketch makes calls to the built-in println() function. Clicking the "run" button opens a separate window that displays the graphical output of the sketch.

A sample program

A simple sketch illustrates some of the basics of Processing. We'll break the sketch into pieces for the purposes of explaining it.

As noted before, the Processing follows Java in its syntax. The first line is a comment, and the next lines declare a constant and (global) variable.

    // dots_v1.pde -- draw a multicolored mouse trail
 
    final int bgcolor = 50;              // Color for canvas background
    int strokeweight = 20;               // Weight of drawing stroke

Within a sketch, the programmer can define certain functions that are automatically invoked in response to various events. For example, the setup() function is invoked once at the start of execution of a sketch. Among the typical tasks performed here are initializations of graphics features. At a minimum, there would normally be a call to size() to set the size of the drawing canvas. In addition, this setup() function displays some simple help text explaining how to operate this sketch's graphical interface.

    void setup() {         // Executed once
      size(400, 400);                    // Canvas size
      smooth();                          // Enable antialiasing                  
      background(bgcolor);               // Set background colour for canvas
                                         // (RGB levels all the same, thus grey)
      strokeWeight(strokeweight);        // Set thickness of drawing stroke
 
      textSize(20);
      textAlign(CENTER);
      text("Click the mouse here to start", 200, 150);
      text("Space bar: clear canvas", 200, 200);
      text("Left/right arrows: change stroke size", 200, 250);
    }

The draw() function is another standard function that, if defined by the programmer, is called continuously during the execution of the sketch. (Execution of the draw() function can be disabled and enabled using the built-in noLoop() and loop() functions, and the frequency with which it is executed can be controlled using the frameRate() function.) The draw() function below tests whether the window has the focus, and if so, draws a point at the current mouse location (mouseX and mouseY are built-in variables that report the current mouse location) using the current drawing stroke color and weight. Depending on the stroke weight, the "points" will be circles of varying size.

    void draw() {          // Executed continuously
      if (focused)                       // If we have mouse focus
        point(mouseX, mouseY);
    }

The next three functions are automatically invoked by the Processing framework in response to events. The first of these functions, invoked when any character is is typed, clears the canvas if the space character is typed. The second function randomly changes the stroke color as the mouse moves. The third function clears the help message displayed by the setup() function, by redrawing the canvas background when the user first clicks the mouse in the display window.

    void keyTyped() {      // Executed when a key is typed
      if (key == ' ')                    // Space bar clears the canvas
        background(bgcolor);
    }
 
    void mouseMoved() {    // Executed on mouse moves
      stroke(random(255), random(255), random(255));
    }
 
    boolean firstClick = true;
 
    void mouseClicked() {  // Executed for click of any mouse button
      if (firstClick) {
        firstClick = false;
        background(bgcolor);             // Clear initial help message
      }
    }

The final function, keyPressed() is also invoked automatically by Processing in response to key presses. This function, rather than keyTyped() must be used to catch composed key sequences such as arrow keys. Processing generates three types of event for the keyboard: key pressed, key typed, and key released. All three of these are generated for keys that generate single characters, but only the first and the last are generated for composed key sequences and presses of modifier keys such as the Shift key. In this sketch, the purpose of the keyTyped() function is to decrease and increase the stroke size when the left and right arrow keys are pressed.

    void keyPressed() {    // Executed on any keyboard key press
      if (key == CODED) {           // Is it a key sequence?
        if (keyCode == LEFT && strokeweight > 1) {           // Left arrow
          strokeweight--;
          strokeWeight(strokeweight);
        } else if (keyCode == RIGHT && strokeweight < 50) {  // Right arrow
          strokeweight++;
          strokeWeight(strokeweight);
        }
      }
    }

(Complete source code of the example sketch can be found here.)

By default, the PDE will save sketches in subdirectories under $HOME/sketchbook, as files with the extension .pde.

Processing.js

Processing.js is a separate project that provides a port of Processing to JavaScript: the Processing.js parser converts Processing code to JavaScript. What this means is that a Processing program can be run inside a web browser, with its output rendered to an HTML <canvas> element.

To use Processing.js, one first downloads a version of the JavaScript. Then, it's simply a matter of creating a web page that embeds the script and includes a <canvas> element that specifies the Processing sketch to run. For example, the canvas shown below is rendering the output of the sketch shown above. To do this, the page embeds the following HTML:

    <script src="https://static.lwn.net/images/2012/processing/processing-1.4.1.min.js"></script>
    <canvas data-processing-sources="/images/2012/processing/dots_v1.pde">

The sketch can be run by following the instructions shown in the canvas.

If your browser supports WebGL, then you should be able to run the example on this page within Processing.js to see a demonstration of some basic 3D animation in Processing.

Processing today and tomorrow

Although the Processing project started in 2001, the 1.0 release of the language wasn't until November 2008. That was followed by a 1.1 release in March 2010, 1.2 in July 2010, and the current stable 1.5 release in April 2011. Although originally planned for the second half of 2011, Processing 2.0 still has not yet been released, and there appears to be no firm release date. Nevertheless, there has been a steady stream of Alpha and Beta releases, with the most recent Beta 5 being released on October 22.

Processing 2.0 contains a number of (backward-incompatible) API changes, and replaces older 2D and 3D renderers with variants of the OpenGL renderer. In addition, the OpenGL library has been rewritten and made part of the core application (rather than being a separate library). The 2.0 release also includes better support for "modes"—Processing-speak for multiple language and platform support. The PDE supports three standard modes: "Java", for running applications in the "native" Java environment, "Android", for running applications in an Android emulator, and "JavaScript", which allows a sketch to be run inside a browser using Processing.js. The Processing wiki provides a summary of the significant changes in Processing 2.0.

Since its inception, Processing has become steadily more popular. No doubt, this springs in part from the relative simplicity of the language, coupled with the "immediate gratification" aspect provided by its graphical interface. However, what is also striking is just how much good documentation there is for the language: a language reference, a wiki, and tutorials and example programs (with many more examples in the downloaded Processing environment). An impressive number of books attests to the language's popularity. Doubtless, the extensive documentation has contributed to the growing usage of the language. Further promotion for the language exists in the form of an extensive gallery of quite diverse (mainly visual and artistic) projects that employ Processing (for example, this video by one of the founders of the Processing project provides a good showcase if what can be done with the language). As a consequence, although Processing was originally designed as a teaching language for non-programmers in the visual arts, it has developed into a capable and widely used production tool for animation, data analysis and visualization, and art.

---

(Log in to post comments)