Development

A brief sketch of Processing

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="/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.

Comments (2 posted)

Brief items

Quotes of the week

— Mike Linksvayer

— Hans Baier (Hat tip to Jörn Nettingsmeier)

Comments (none posted)

Motif relicensed

The venerable Motif graphical toolkit has been relicensed to LGPLv2.1; the code is now hosted on SourceForge. Most of the world is unlikely to care much, but, as they say, better 20 years too late than never.

Comments (33 posted)

Tryton 2.6 available

Version 2.6 of the Tryton application framework is available. There is one major API change, the introduction of "Active Records," a pattern designed to simplify the codebase and unify multiple methods of accessing the value of a record. Other bug fixes and GUI improvements came along for the ride, though.

Full Story (comments: none)

Rakudo Star 2012.10 released

Version 2012.10 of the Rakudo Perl distribution is available. Rakudo includes a Perl 6 compiler, plus the Parrot virtual machine and additional modules from the Perl community. Most of the changes in this release are due to changes in the Perl 6 specification itself, although bugfixes and other enhancements are included as well.

Full Story (comments: none)

CTDB 2.0 released

Version 2.0 of CTDB, the cluster-oriented version of the TDB database used by Samba (among other projects), is available. New is support for read-only records, policy routing, new test infrastructure, and a locking API designed to prevent deadlocks between CTDB and Samba.

Full Story (comments: none)

Newsletters and articles

Development newsletters from the last week

• Caml Weekly News (October 30)
• What's cooking in git.git (October 25)
• What's cooking in git.git (October 29)
• Haskell Weekly News (October 24)
• Mozilla Hacks Weekly (October 25)
• OpenStack Community Newsletter (October 26)
• Perl Weekly (October 29)
• Ruby Weekly (October 25)
• Tahoe-LAFS Weekly News (October 30)

Comments (none posted)

Knight-Mozilla's Opened Captions

At his blog, Dan Schultz writes about Opened Captions, his project that taps into closed-caption text from TV broadcasts and converts it to a usable data feed. "The Internet is filled with real-time updates triggered by online activity, but it still feels like magic when we see automatic updates driven by the real world. Opened Captions makes it easy for programmers to use live TV transcripts as an input." Schultz is a 2012 Knight-Mozilla Fellow; the program pairs developers with journalists. Opened Captions initially supports just the US government-access channel C-SPAN, but is extensible.

Comments (none posted)

Haley: We're doing an ARM64 OpenJDK port!

We're a bit late in noticing, but Andrew Haley has announced plans to develop a free Java for 64-bit ARM systems. "There are two versions of HotSpot, the VM that OpenJDK uses, for the current (32-bit) ARM. The one written and owned by Oracle is proprietary, and the other (written for ARM) is free. The proprietary VM performs better than the free one. The latter uses a lightweight small-footprint just-in-time compiler that can't compete with the might of Oracle's JIT. We really don't want this situation for A64, so we're writing a port that will be entirely free software. We'll submit this as an OpenJDK project, and we hope that others will join us in the work."

Comments (134 posted)

Page editor: Nathan Willis
Next page: Announcements>>