Introduction to Programming in Processing

Programs are often developed using a development environment. You can develop Processing programs 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. The graphical output window is made up of tiny squares of colored light, called pixels, arranged in a grid. 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 pane and no text output.

Background Information

Calling Methods

You create a program by typing commands into the program editor pane. Thus, we need to understand how to enter commands (which, for our purposes, will be refered to as a "method calls"). The basic syntax for a method call is:
The name of the method, followed by an open parenthesis, followed by a comma separated list of arguments, followed by a close parenthesis, followed by a semicolon.
For example, we can call a method called "size" as follows:
size(300, 400);
This causes the size of the graphical output window to be 300 pixels wide, and 400 pixels high. Every time you call a method you need to understand what arguments are required, and in which order they must appear. Each language you work with will have reference documentation that explains how to call the built-in methods. You can find a description of all of Processing’s methods and how to use them in the Processing reference documentation, see: Processing API

Do this ...
Look up the documentation for the size method.

Pixel Coordinates

Each pixel in the output pane is described with a pair of x and y coordinates. However, in the output pane, the pixel in the upper-left corner is considered to be at location (0,0), with the x axis increasing horizontally to the right, and the y axis increasing in a downward direction.

Documentation

In addition to program commands that Processing will execute, it is often helpful to have explanations of the code as part of the file. These explanations, which are ignored by the programming language are called comments. Comments are indicated by prepending the line with a double slash like so:
// This is a comment which will be ignored
Ideally, there will be comments throughout your code that indicate what is being accomplished. At the very least, the first line of any program you write should be a comment indicating that you are the author of the program.

An Example Program

Do this ...
We are now ready to start creating our first program:

Start Processing by double-clicking on the icon on the desktop.
In the program editor pane, type the following, being careful to match all characters for case and syntax:
```
size(300, 300);
rect(50, 70, 100, 200);
```
Follow the link given above to the reference documentation for Processing. Use the documentation to determine the purpose of each of the four numbers that are arguments for the rect method.
When you think you understand what the code is doing, click the "Run" button. Did the picture match what you expected? Do not continue until you understand why your code produced the output it did.
Add a command to draw an ellipse in the upper right corner of the output window. You will need to look at the documentation for the ellipse method to determine what arguments it requires, and in which order.

Exercise: A Smiley Face

Begin by saving a sketch on your H: drive with the name Smiley.

Add documentation to the top of the program editing pane that indicates your name.

Use a sequence of figure drawing method calls to create a smiley face similar to the one shown here. Use a 200x200 pixel canvas. You don’t need to match the example sketch exactly, but try to include all the elements as shown.

When you are finished, be sure to save the completed version of your code.

If you have extra time, you may experiment with color. To change the inside color of a shape, you can use the fill method (see the documentation). The three arguments are the amount of red, green and blue light from which you wish to create a color. The amounts are specified on a scale from 0 to 255, where 0 indicates no light, and 255 indicates all of the light. Thus, to specify the color green you could use the command fill(0,255,0);

You will find the method arc() useful. Note that Processing draws circles in a clockwise direction, where PI/2 is at the bottom of of the circle, and 3*PI/2 is at the top.

When you have completed your coding, save your work, and submit your code via Moodle. PLEASE NOTE: The file you should submit will be named "Smiley.pde", and it will be found on your H: drive in a folder called "Smiley".