Jump to content

How to Get Started with Processing

+ 2
  adfm's Photo
Posted Mar 17 2010 04:40 PM

Are you a creative type that would like to get started with designing and prototyping with Processing?
In this excerpt from Visualizing Data Ben Fry introduces the Processing Environment and quickly gets you sketching
with Processing.


The Processing project began in the spring of 2001 and was first used at a workshop in Japan that August. Originally built as a domain-specific extension to Java targeted at artists and designers, Processing has evolved into a full-blown design and prototyping tool used for large-scale installation work, motion graphics, and complex data visualization. Processing is a simple programming environment that was created to make it easier to develop visually oriented applications with an emphasis on animation and provide users with instant feedback through interaction. As its capabilities have expanded over the past six years, Processing has come to be used for more advanced production-level work in addition to its sketching role.

Processing is based on Java, but because program elements in Processing are fairly simple, you can learn to use it from this book even if you don't know any Java. If you're familiar with Java, it's best to forget that Processing has anything to do with it for a while, at least until you get the hang of how the API works. We'll cover how to integrate Java and Processing toward the end of the book.

The latest version of Processing can be downloaded at:

http://processing.org/download

An important goal for the project was to make this type of programming accessible to a wider audience. For this reason, Processing is free to download, free to use, and open source. But projects developed using the Processing environment and core libraries can be used for any purpose. This model is identical to GCC, the GNU Compiler Collection. GCC and its associated libraries (e.g., libc) are open source under the GNU Public License (GPL), which stipulates that changes to the code must be made available. However, programs created with GCC (examples too numerous to mention) are not themselves required to be open source.

Processing consists of:

  • The Processing Development Environment (PDE). This is the software that runs when you double-click the Processing icon. The PDE is an Integrated Development Environment with a minimalist set of features designed as a simple introduction to programming or for testing one-off ideas.

  • A collection of commands (also referred to as functions or methods) that make up the "core" programming interface, or API, as well as several libraries that support more advanced features, such as drawing with OpenGL, reading XML files, and saving complex imagery in PDF format.

  • A language syntax, identical to Java but with a few modifications. The changes are laid out in detail toward the end of the book.

  • An active online community, hosted at http://processing.org.

For this reason, references to "Processing" can be somewhat ambiguous. Are we talking about the API, the development environment, or the web site? I'll be careful to differentiate them when referring to each.


Sketching with Processing

A Processing program is called a sketch. The idea is to make Java-style programming feel more like scripting, and adopt the process of scripting to quickly write code. Sketches are stored in the sketchbook, a folder that's used as the default location for saving all of your projects. When you run Processing, the sketch last used will automatically open. If this is the first time Processing is used (or if the sketch is no longer available), a new sketch will open.

Sketches that are stored in the sketchbook can be accessed from File → Sketchbook. Alternatively, File → Open . . . can be used to open a sketch from elsewhere on the system.

Advanced programmers need not use the PDE and may instead use its libraries with the Java environment of choice. (This is covered toward the end of the book.) However, if you're just getting started, it's recommended that you use the PDE for your first few projects to gain familiarity with the way things are done. Although Processing is based on Java, it was never meant to be a Java IDE with training wheels. To better address our target audience, its conceptual model (how programs work, how interfaces are built, and how files are handled) is somewhat different from Java's.

Hello World

Programming languages are often introduced with a simple program that prints "the section called “Hello World”" to the console. The Processing equivalent is simply to draw a line:

line(15, 25, 70, 90);

Enter this example and press the Run button, which is an icon that looks like the Play button on any audio or video device. The result will appear in a new window, with a gray background and a black line from coordinate (15, 25) to (70, 90). The (0, 0) coordinate is the upper-lefthand corner of the display window. Building on this program to change the size of the display window and set the background color, type in the code from Example 2.1.

Example 2.1. Simple sketch

size(400, 400);

background(192, 64, 0);

stroke(255);

line(150, 25, 270, 350);

This version sets the window size to 400 × 400 pixels, sets the background to an orange-red, and draws the line in white, by setting the stroke color to 255. By default, colors are specified in the range 0 to 255. Other variations of the parameters to the stroke( ) function provide alternate results:

stroke(255); 	// sets the stroke color to white

stroke(255, 255, 255);	// identical to stroke(255)

stroke(255, 128, 0); 	// bright orange (red 255, green 128, blue 0)

stroke(#FF8000); 	// bright orange as a web color

stroke(255, 128, 0, 128); // bright orange with 50% transparency

The same alternatives work for the fill( ) command, which sets the fill color, and the background( ) command, which clears the display window. Like all Processing methods that affect drawing properties, the fill and stroke colors affect all geometry drawn to the screen until the next fill and stroke commands are executed.

Tip

It's also possible to use the editor of your choice instead of the built-in editor. Simply select "Use External Editor" in the Preferences window (Processing → Preferences on Mac OS X, or File → Preferences on Windows and Linux). When using an external editor, editing will be disabled in the PDE, but the text will reload whenever you press Run.

Hello Mouse

A program written as a list of statements (like the previous examples) is called a basic mode sketch. In basic mode, a series of commands are used to perform tasks or create a single image without any animation or interaction. Interactive programs are drawn as a series of frames, which you can create by adding functions titled setup( ) and draw( ), as shown in the continuous mode sketch in Example 2.2. They are built-in functions that are called automatically.

Example 2.2. Simple continuous mode sketch

void setup( ) {

 size(400, 400);

 stroke(255);

 background(192, 64, 0);

}



void draw( ) {

 line(150, 25, mouseX, mouseY);

}

Example 2.2 is identical in function to Example 2.1, except that now the line follows the mouse. The setup( ) block runs once, and the draw( ) block runs repeatedly. As such, setup( ) can be used for any initialization; in this case, it's used for setting the screen size, making the background orange, and setting the stroke color to white. The draw( ) block is used to handle animation. The size( ) command must always be the first line inside setup( ).

Because the background( ) command is used only once, the screen will fill with lines as the mouse is moved. To draw just a single line that follows the mouse, move the background( ) command to the draw( ) function, which will clear the display window (filling it with orange) each time draw( ) runs:

void setup( ) {

 size(400, 400);

 stroke(255);

}



void draw( ) {

 background(192, 64, 0);

 line(150, 25, mouseX, mouseY);

}

Basic mode programs are most commonly used for extremely simple examples, or for scripts that run in a linear fashion and then exit. For instance, a basic mode program might start, draw a page to a PDF file, and then exit.

Most programs employ continuous mode, which uses the setup( ) and draw( ) blocks. More advanced mouse handling can also be introduced; for instance, the mousePressed( ) method will be called whenever the mouse is pressed. So, in the following example, when the mouse is pressed, the screen is cleared via the background( ) command:

void setup( ) {

 size(400, 400);

 stroke(255);

}



void draw( ) {

 line(150, 25, mouseX, mouseY);

}

void mousePressed( ) {

 background(192, 64, 0);

}

More about basic versus continuous mode programs can be found in the Programming Modes section of the Processing reference, which can be viewed from Help → Getting Started or online at http://processing.or...nce/environment.


Exporting and Distributing Your Work

One of the most significant features of the Processing environment is its ability to bundle your sketch into an applet or application with just one click. Select File → Export to package your current sketch as an applet. This will create a folder named applet inside your sketch folder. Opening the index.html file inside that folder will open your sketch in a browser. The applet folder can be copied to a web site intact and will be viewable by users who have Java installed on their systems. Similarly, you can use File → Export Application to bundle your sketch as an application for Windows, Mac OS X, and Linux.

The applet and application folders are overwritten whenever you export—make a copy or remove them from the sketch folder before making changes to the index.html file or the contents of the folder.

More about the export features can be found in the reference; see http://processing.or...ent/export.html.

Saving Your Work

If you don't want to distribute the actual project, you might want to create images of its output instead. Images are saved with the saveFrame( ) function. Adding saveFrame( ) at the end of draw( ) will produce a numbered sequence of TIFF-format images of the program's output, named screen-0001.tif, screen-0002.tif, and so on. A new file will be saved each time draw( ) runs. Watch out because this can quickly fill your sketch folder with hundreds of files. You can also specify your own name and file type for the file to be saved with a command like:

saveFrame("output.png")

To do the same for a numbered sequence, use #s (hash marks) where the numbers should be placed:

saveFrame("output-####.png");

For high-quality output, you can write geometry to PDF files instead of the screen, as described in the section "the section called “More About the size( ) Method”," later in this chapter.

Visualizing Data

Learn more about this topic from Visualizing Data.

How you can take advantage of data that you might otherwise never use? With the help of the free software programming environment called Processing, this book helps you represent data accurately on the Web and elsewhere, complete with user interaction, animation, and more. You'll learn basic visualization principles, how to choose the right kind of display for your purposes, and how to provide interactive features to design entire interfaces around large, complex data sets.

See what you'll learn


1 Reply

0
  ropesmy's Photo
Posted Feb 15 2014 01:00 AM

great
http://www.prweb.com...web11451279.htm