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.

You write program instructions in the program editor pane, press the run button, and Processing displays a new window showing your visual output. Text output, if there is any, is shown below the text output pane. As one would expect, this empty program produces an empty visual output window and no text output. 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:

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 a sketch called Raindrops on your H: drive and running it. When you’ve got that done, make modifications to the program to achieve the following goals:

  1. 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.
  2. Display rectangles rather than ellipses (hint, see the rect() method).
  3. Change the size of your figures in some way. You can make them larger or smaller (or wider or shorter).
  4. 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

Processing can load and render images as shown in this example program.

size(270, 270);

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:

  1. 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.
  2. Now, modify your program in the following ways:
    1. 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.
    2. 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.
    3. 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.

To Submit