Processing

Processing is an open-source, Java-based programming language that specializes in allowing one to experiment with creative programs producing graphical results. You can learn more about the language from its website at processing.org and from its Wikipedia article.

In this activity, we're going to introduce the idea of a graphical display, download the Processing application, and play around with Processor's Integrated Development Environment, the Processor Development Environment (PDE).

Download and install Processing

You can download and install Processing by following the instructions at https://processing.org . Processing is open source and cross-platform, so you only need to select the version that is appropriate for your computer.

A Processing program

Once it has been installed on your computer, start up the Processing application. Once you click past the startup window, you should see the main development window on your screen.

It's in this window that you'll be able to enter Processing commands, run programs, view Console output in the pane below, and view graphical content in a window for that purpose off to the side.

Hello, World!

It's a class program, so we might as well get it out of the way. You don't need to write a main program, however, and you don't need to write a class, and you don't even have to compile the program you're writing. Simply enter this line of code and click on the right-triangle "Run" button.

println("Hello, World!");

Click the Run button and sure enough, the desired announcement appears in the Console pane below.

Commands, shapes

There are a number of graphical shapes that you can draw and experiment with. Typically, you'll want to use one of the instructions for defining the width of a line or the fill color that will be used:

stroke(0-255); // defines the grayscale color of a line stroke(r, g, b); // describes an RGB line color fill(0-255); // describes a grayscale fill color fill(r, g, b); // describes an RGB fill color

Then you can use one of the many geometric shapes provided by Processing. Here are a few to begin experimenting with:

ellipse(centerX, centerY, width, height); point(X, Y); // highlights a point on the window triangle(x1, y1, x2, y2, x3, y3); // creates a triangle with these vertices quad(...); // creates a quadralateral rect(x, y, width, height); // creates a rectangle line(x1, y1, x2, y2); // creates a line

You can enter these commands into the "sketch" code window in Processing, then hit the Run icon to see what they produce.

Save your work!

You can always screenshot your work, but it's easier just to have Processing export the file for you.

If you want to save the sketch that you've made, include a

save("drawing.png");

command at the bottom. A graphic image of your window will be saved in the home directory of your sketch, probably inside the directory ~/Processing on your computer.

Advanced graphics

The real strength of Processing comes with it's ability to easily allow for interacting with the code during runtime.

A listener is a bit of code that monitors input devices for activity. A mouse listener tracks the mouse's x- and y- coordinates on the screen, and whether or not any of the mouse's button's have been pressed or released. A keyboard listener listener constantly checks to see if any keys on the keyboard have been pressed, and if so, which one.

We can write our own Listeners in Java, but the Processing platform includes code that supports listening automatically.

A typical Processing program would consist of two standard methods: the setup() method which establishes some of the initial parameters of the program: window dimensions, background color, etc. (Think of it as a constructor.) The subsequent draw() method, which will (normally) loop repeatedly, executes whatever instructions are given inside that method.

Enter the follow methods and then run the program to see what happens.

void setup() { size(640, 480); // establishes the size of the graphics window background(255, 255, 255); // Red, Green, Blue values to produce a white background smooth(); // Smoothes the rendering of the graphics } void draw() // The "draw" method is called repeatedly { fill(255, 0, 0); // R, G, B color for red ellipse(mouseX, mouseY, 50, 50); // Draws an ellipse with the upper-left corner at // the mouse's location, 50 pixels wide and 50 high }

You can make this program a little more interactive by checking to see what the state of the mousebutton is when the program is running:

void draw() { if (mousePressed) { fill(0); } else { fill(255); } ellipse(mouseX, mouseY, 80, 80); }

Working with objects in Processing

Processing uses the Java syntax, but there are some differences between Processing and Java. Processing only uses int and float values, in an effort to minimize computational churn and maximize the speed that a program can run at.

You've already seen that we print() information—there is no System.out.println() in Processing.

You can use objects, of course, and the more complex your project, the more you'll want to write your code as objects.

Project: GraphicalWalker

Using the Processing platform, write a sketch that uses a RandomWalker() class. The RandomWalker class tracks the x- and y-coordinates of a walker that starts at position 0,0, and then changes its location in a random direction each time the .move() method is called.

The main program in the sketch will include the void setup() method to establish a graphical window and a void draw() loop that displays the walker and its position as long as the walker hasn't returned to its 0,0 starting point. Consider using separate colors to identify the origin, the walker, and the walker's path as it moves.

Note that you don't need to set up a loop for this project: the .draw() method itself repeats.