Processing 2: Creative Programming Cookbook

Download Processing 2 for your operating system at http://processing.org/download/. Processing is available for Windows, Mac OS X, and Linux. Processing for Windows comes in two flavors, one with Java and one without. Download the one with Java if you aren't sure which one to choose.

The Processing language is built on top of Java, so you'll need a Java runtime on your computer for it to work. All versions of Mac OS X prior to 10.7 had a Java runtime installed by default. Starting with 10.7, Apple removed this. But don't worry. When you start Processing for the first time, the OS will ask you to install a Java runtime if you haven't done that already.

Processing for Windows and Linux comes with a java directory that contains everything you need to run Processing. You can however choose to use another Java runtime if you've installed one on your machine. But you should only do this if you are an advanced user and familiar with Java on one of these platforms.

Processing uses a folder called the Sketchbook, where you will keep your sketches, libraries, and tools. Best practice is to keep this Sketchbook folder in the standard place for your OS.

This is the easiest thing you'll do in this book. Just open the Processing application. The following screenshot shows you what the PDE looks like on Mac OS X:

When you open the Processing app, you'll notice that the PDE is a very basic programming environment. If you are an experienced programmer, you might miss a lot of features. The PDE was designed like this, so that people without any programming experience can get started with exploring code without having to worry about project settings, or learning a difficult interface. Let's take a look at the different interface elements.

There is an overview of the available Processing libraries on the Processing website at http://processing.org/reference/libraries/. You'll find the documentation of the libraries included with Processing and a list with contributed libraries. There are libraries to work with 3D, computer vision, geometry, and a lot more.

You can open the library manager by using this menu: Sketch | Import Library… | Add Library…. This will give you a list of available libraries. To install the library you need to select it from the list and click on the Install button. Processing will install the library in the libraries folder of your sketchbook.

Unfortunately, not all libraries are included in this list. Some of the older libraries will probably still work in Processing 2, but the developer might not have added the new functionality to install the library through the Library Manager. In that case, you'll need to install the library manually. Don't worry; this is not as hard as it sounds.

You should download the library from the website of the developer and unzip it. Drag this folder to the libraries folder inside your sketchbook. Libraries are structured in a (predefined) way. If the library is not structured like this, it won't work. The main library folder usually contains four subfolders: examples, library, reference, and src. The examples folder contains Processing sketches the developer made to show how the library works. The library folder contains the compiled library code that will be imported into your sketch. The reference folder stores the documentation on how to use the library. The src folder contains the source code of the library. This might be handy for advanced users to learn how the library works and modify it as per their needs.

The folder structure for libraries is important for Processing to find the library. The main folder for the colorLib library is named colorLib. Inside the library folder within that directory, you'll find a file named colorLib.jar. This JAR file will be included in your applet or application when you export your sketch. You can add import libraries into your sketch by going to the Sketch | Import Library… menu and select the library you want.

There is an overview of available tools on the Processing website at http://processing.org/reference/tools/. This overview includes all standard tools and tools made by people from the Processing community. At the moment, there aren't that many tools available, but the number of quality tools might grow in the future.

Processing 2 has a new feature to install tools in an easy way: the Tool Manager. You can find the Tool Manager by going to Tools | Add Tool…. The Tool Manager works the same way as the Library Manager we've discussed in the Installing libraries recipe. Just like with libraries, not all tools are available in the Tool Manager. If you find a tool online, you can install it manually in the tools directory. This procedure is the same as installing a library manually. The Tool Manager looks as shown in the following screenshot:

Tools are installed in the tools directory in your sketchbook. Each tool directory usually contains two directories, one for the tool, which contains the tool JAR file, and one with the Java source code. This JAR file is executed from the tool menu.

Open the Processing app. You probably already did that, since you're reading this book.

In the upper-right corner of the PDE, you'll see a button with the text STANDARD. If you click it, you'll get a small menu to select the other modes. Processing 2 comes with three modes: Standard, Android, and JavaScript. There is also an Add Mode… option in the menu, which will open the Mode Manager. This Mode Manager works in a similar way to the Library Manager and the Tool Manager.

If you run a sketch in Standard mode, the PDE will compile your code and run it as a Java applet. This mode is useful if you want to create native applications that will run on a computer. Running a sketch in JavaScript mode will start a local web server on your computer, and open your default browser so you can see the sketch run within a HTML5 page. Android modewill run the sketch in the Android Emulator or on your Android device.

This book also covers the new JavaScript and Android modes in depth. You can learn all about it in Chapter 9, JavaScript Mode, and Chapter 10, Exploring Android Mode.

Open Processing and create a new sketch.

Type this line of code in the Processing editor and press the run button. You can also use Ctrl + R (Windows, Linux) or Cmd + R (Mac OS X) to run your sketch.

size( 400, 300 );

Processing uses the upper-left corner for the origin of the window. The size() function sets the dimensions of your sketch window. The first parameter is used to set the value of the system variable width, the second parameter is used to set the value of the system variable height.

Imagine that you want to draw a point at the bottom-right corner of the window. If you were to draw that point at (400, 300), you won't see anything on your screen. You need to draw your point at (width-1, height-1) to make it visible on screen. This may look a little strange, but it's actually very logical. If you want to draw a point at the origin, you'll use: point(0, 0);. This line of code will fill the first pixel on the first row. As we start counting at 0, the last pixel on that row would be 399, or width-1. The same is true for the height. The following screenshot shows our window of 400 by 300 pixels, divided into squares of 50 x 50 pixels.

Create a new Processing sketch and save it as my_first_sketch to your sketch folder.

This is the full code for your first sketch. This sketch will draw some lines and points with varying stroke weights.

void setup()
{
  size( 640, 480 );
  smooth();
}

void draw()
{
  background(255);
  
  strokeWeight( 1 );
  point( 20, height/1.5 );
  line( 70, 20, 70, height - 20 );
  strokeWeight( 2 );
  point( 120, height/1.75 );
  line( 170, 20, 170, height - 20 );
  strokeWeight( 4 );
  point( 220, height/2 );
  line( 270, 20, 270, height - 20 );
  strokeWeight( 8 );
  point( 320, height/3 );
  line( 370, 20, 370, height - 20 );
  strokeWeight( 16 );
  point( 420, height/4 );
  line( 470, 20, 470, height - 20 );
  strokeWeight( 32 );
  point( 520, height/5 );
  line( 570, 20, 570, height - 20 );
}

If you run the sketch, you'll see the results of your hard work. It will look as shown in the following screenshot:

In this recipe, you've learned the most basic functions to create a simple Processing sketch. Let's take a deeper look at what these functions do:

Processing sketches have a specific folder structure. If you save your sketch as my_first_sketch, you'll find a folder with this name in your Processing sketchbook. Inside this folder, you'll find a file named my_first_sketch.pde. Processing uses this folder structure to keep everything it needs to run the sketch together. This will be very handy when you write more complicated sketches that use more code files, or other data such as images or fonts.

We're going to write a small sketch that uses some of the math functions. The output of the app will be logged to the console. Start by creating a new sketch and save it as math_functions.pde.

This is the full code for the application we are going to write. We'll start by declaring some integer and float variables. The numbers variable is an array of floats containing the values of the variables we declared before. This sketch uses the println() function to log the output of the abs(), ceil(), floor(), round(), sq(), sqrt(), min(), max(), and dist() functions to the console.

int x = 177;
int y = -189;
float a = 32.75;
float b = -70.38;

float[] numbers = {a, b, x, y};

println("The absolute value of " + a + " is " + abs(a) );
println("The absolute value of " + b + " is " + abs(b) );
println("The absolute value of " + y + " is " + abs(y) );
println("The closest int value greater than (or equal to) " + x + " is " + ceil(x) );
println("The closest int value greater than (or equal to) " + a + " is " + ceil(a) );
println("The closest int value greater than (or equal to) " + b + " is " + ceil(b) );
println("The closest int value less than (or equal to) " + y + " is " + floor(y) );
println("The closest int value less than (or equal to) " + a + " is " + floor(a) );
println("The closest int value less than (or equal to) " + b + " is " + floor(b) );
println("The closest int value to " + a + " is " + round(a) );
println("The closest int value to " + b + " is " + round(b) );
println("The square number of " + x + " is " + sq(x) );
println("The square number of " + b + " is " + sq(b) );
println("The square root of " + x + " is " + sqrt(x) );
println("The square root of " + a + " is " + sqrt(a) );
println("The square root of " + b + " is " + sqrt(b) );
println("The smallest number in the list {" + a + "," + b + "," + x + "," + y + "} is " + min( numbers ) ); 
println("The largest number in the list {" + a + "," + b + "," + x + "," + y + "} is " + max( numbers ) ); 
println("The distance between (" + x + ", " + y + ") and (" + a + ", " + b + ") is " + dist(x, y, a, b ) );

If you run the sketch, you'll see that Processing will show an empty gray window of 100 x 100 pixels. This is the standard window size Processing uses if you don't use the size() function in a sketch. The output of the application will look as shown in the following screenshot:

You've learned a lot of new functions to work with numbers in this recipe. Let's take a look at what they do:

The println() function is really handy to debug your sketches. You'll use it a lot to log the value of a variable to the console. For instance, println(a) will log the value of variable a to the console. But you can also combine variables and even other functions inside the println() function, just like we did in the code for this small sketch. Let's take a look at how you can do this.

println( x + y );

This line will print the number -12 to the console. The + operator has precedence over the println() function, so the calculation will be performed first, before the println() function is executed.

println( x + " " + y );

This line will print 177 -189 to the console, and is the easiest way to print the values of the two variables to the console. In this example, the + sign inside the println() function is used to combine the values of the two variables together with the space between the two quotes into a variable of the type String.

This is the full code for the sketch.

void setup()
{
  size( 640, 480 );
  smooth();
  background( 255 );
}

void draw()
{
  // empty, but we need it to create an app that runs in the continuous mode.
}

void mousePressed()
{
  if ( mouseButton == RIGHT ) {
    background( 255 );
  }
}

void mouseMoved()
{
  stroke( 0, 64 );
  strokeWeight( 1 );
  fill( 255, 32 );
  float d = dist( mouseX, mouseY, pmouseX, pmouseY );
  constrain( d, 8, 100 );
  ellipse( mouseX, mouseY, d, d );
}

void mouseDragged()
{
  stroke( 0 );
  float d = dist( mouseX, mouseY, pmouseX, pmouseY );
  constrain( d, 0, 100 );
  float w = map( d, 0, 100, 1, 10 );
  strokeWeight( w );
  line( mouseX, mouseY, pmouseX, pmouseY );
}

void mouseReleased()
{
  noStroke();
  fill( 255, 16 );
  rect( 0, 0, width, height );
}

void mouseClicked()
{
  fill( 255, 0, 0, 128 );
  float d = random( 20, 200 );
  ellipse( mouseX, mouseY, d, d );
}

After typing this code, you can run your sketch by clicking the run button or using the shortcut Cmd + R on the Mac or Ctrl + R on Windows and Linux. You can now start drawing with your mouse. When you move your mouse, you'll leave a trail of circles. When you press the mouse button and release it, you'll draw a red circle. When you move the mouse while pressing the left mouse button, you'll draw a black stroke. You can use the right mouse button to erase the screen and start all over again. The output of the application might look similar to the following screenshot:

There are five functions and six system variables you can use to track mouse interaction in your sketch:

We'll start by declaring some variables and writing the setup() and draw() functions. In this recipe, we'll write a basic Processing sketch that will change the values of the variables we've declared when we press certain keys on the keyboard.

int x;
int y;
int r;
color c;
boolean drawStroke;

void setup()
{
  size( 480, 320 );
  smooth();
  strokeWeight( 2 );
  
  x = width/2;
  y = height/2;
  r = 80;
  c = color( 255, 0, 0 );
  drawStroke = true;
}

void draw()
{
  background( 255 );
  
  if ( drawStroke == true ) {
    stroke( 0 );
  } else {
    noStroke();
  }

  fill( c );
  ellipse( x, y, r*2, r*2 );
}

The next code we'll write are the functions that will take care of the keyboard events. There are three functions we can use: keyPressed() , keyReleased() , and keyTyped().

void keyPressed()
{
  if ( key == CODED ) {
    if ( keyCode == RIGHT ) {
      x += 10;
    } else if ( keyCode == LEFT ) {
      x -= 10;
    } else if ( keyCode == UP ) {
      y -= 10;
    } else if ( keyCode == DOWN ) {
      y += 10;
    }
  }
  
  x = constrain( x, r, width-r );
  y = constrain( y, r, height-r );
  
}

void keyReleased()
{
  switch ( key ) {
    case 'r':
      c = color( 255, 0, 0 );
      break;
    case 'g':
      c = color( 0, 255, 0 );
      break;
    case 'b':
      c = color( 0, 0, 255 );
      break;
    case 'c':
      c = color( 0, 255, 255 );
      break;
    case 'm':
      c = color( 255, 0, 255 );
      break;
    case 'y':
      c = color( 255, 255, 0 );
      break;
    default:
      break;
  }
}

void keyTyped()
{
  if ( key == 's' ) {
    drawStroke = !drawStroke;
  }
}

The result of this application looks as shown in the following screenshot:

You can use the arrow keys to move the ball around. The S key will toggle the stroke. The R, G, B, C, M, and Y keys will change the color of the ball.

There are three different functions that catch key events in Processing: keyPressed(), keyReleased(), and keyTyped(). These functions behave a little differently. The keyPressed() function is executed when you press a key. You should use this one when you need direct interaction with your application. The keyReleased() function is executed when you release the key. This will be useful when you hold a key and change something in your running application when the key is released. The keyTyped() function behaves just like the keyPressed() function, but ignores all special keys such as the arrow keys, Enter, Ctrl, and Alt.

You've just learned how to react to single key presses. If you want to do something when a user presses multiple keys (shortcuts such as Ctrl + S to save an image), it won't work with these standard functions. There is an excellent article on the Processing Wiki that describes strategies for detecting multiple key presses at http://wiki.processing.org/w/Multiple_key_presses.