The Processing Environment

Programs are developed using a development environment such as Eclipse, Visual Studio, or Netbeans. You develop Processing programs, called sketches, using the Processing development environment.

Processing.org provides a reference for the Processing IDE

Graphical Animations

Processing can generate graphical animations as shown in this example program.

void setup() {
  size(300, 300);
}

void draw() {
  fill(random(255), random(255), random(255), random(255));
  ellipse(random(300), random(300), random(150), random(150));
}

Note the following features of this program:

Program files - Processing programs comprise code, written in the Processing language. Executing this code produces an output panel. Processing stores each program, called a sketch, in a folder, in a PDE file (i.e., a file with a .pde extension).

Methods - Processing bundles its code into separate procedures or methods. This program has methods for setup(), which Processing calls once at the very beginning to set the size of the output panel, and draw(), which Processing calls repeatedly to specify what to do on each step (frame) of the animation.

Program statements - This program includes three statements. Think of them as you would think of a function call in a spreadsheet package.

size(width, height) - This method is called in the setup() method and sets the size of the output window in pixels (i.e., points of light on the screen) using this statement with different values for width and height. Here, the statement creates an output panel that is 300 pixels by 300 pixels.
fill(redIntensityValue, greenIntensityValue, blueIntensityValue, transparencyLevel) - This method sets the color of the next figure to the specified mixture of red, green and blue light intensities. The intensity values range from 0 (black) to 255 (white).
ellipse(centerXCoordinate, centerYCoordinate, ellipseWidth, ellipseHeight) - This method draws an ellipse at the specified location and size. The values are specified in pixels.

Random numbers - Processing provides the random(maximumValue) method to compute random numbers between 0 and maximumValue.

One good way to learn programming is to experiment (or shall we say play) with existing programs.

Exercise 1

Start by copying the code given above into the Processing IDE, saving it in as Raindrops on your H: drive and running it. NOTE: When you save your program Processing will automatically create both a folder and file. The folder will be called "Raindrops" and will contain a file called "Raindrops.pde" Make sure your program runs correctly before continuing. Now, make modifications to the program to achieve the following goals:

Make the output panel larger. When you do this successfully, you’ll see that Processing still draws the ellipses in the upper left corner of the panel, modify the program so that it draws them all over the larger output panel as it did before.
Display rectangles rather than ellipses (hint, see the rect() method).
Change the size of your figures in some way. You can make them larger or smaller (or wider or shorter).
Modify the colors of your figures in a pleasing manner. You can make them all shades of red or purple, or reduce their level of transparency.

You can find a description of all of Processing’s methods and how to use them in the Processing reference documentation, see: Processing API.

For this exercise, you will be uploading your completed Raindrops.pde file to Moodle. Be sure to save your working program before you upload it to Moodle!

Working with images

In addition to features we have seen before, this program also uses new features:

Exercise 2

Make the following modifications to the example ”earth” program given above:

Start by getting the program above working (follow these steps):
1. Save the code above in a new sketch called FunWithImages.
2. Save the image file above by right-clicking on the image, and choosing "Save image as..." Save the image into your FunWithImages folder (which was created by Processing in step a).
3. Verify that you can display the image by running the program.
Now, modify your program in the following ways:

Change your program so it displays an image file of your choice. Download your image file from wherever you like, but be sure to save it in your FunWithImages folder so your program knows where to find it. In your code, be sure to reference your new image file exactly as saved including appropriate extension.
Set the window size appropriately for your image. Note that you don’t need to actually show the full image; you can cut parts of it off by changing the width/height of the output or the x-y coordinates of the image.
Set the background color appropriately for your image.

Again, be sure to save your modified program, and then submit both the image file you used in step 2 and the program code (i.e. FunWithImages.pde) through Moodle.

The Processing Environment

Graphical Animations

Working with images

To Submit