An Introduction To Programming With Processing


Processing has two main types of iterations the for() structure and the while() structure. The while() structure can be thought of as a simplified version of the for() structure. We will be focusing on the for structure. The for() structure is used to iterate a value, that is to change a value by means of a recurring pattern. for() structures are also referred to as for() loops in some programming languages, whatever you call them they usually will be structured according to the following protocol.
for(init; test; update){
The main differences that separate one languages implementation of for loops from that of another, will generally not be anything structural but rather syntactic. For example some programming languages use comma's to separate init, test and update Processing uses a semi-colon implying that each is a statement on it's own.

The term init in the previous example is used to describe initialization. In a for() loop iteration init is used to declare a temporary variable that will usually be used in the iterations structure, test and update. test is used to describe a conditional, which like a normal conditional will evaluate to true or false. If the conditional evaluates to true the for() structure will run, if the conditional evaluates to false the entire for() loop's structure is skipped and Processing will continue to the statement/s that follow the for() structure in the sketch. update is used to describe an expression that will determine how the value of the variable in the conditional is being changed. The value of the variable being evaluated in the conditional must change, by means of the update, or the loop will go on forever which will eventually cause your sketch and Processing to crash. For example an increment statement is often used in update to increment the value of the variable initialized in init and evaluated in the conditional test.

In programming it is common to use a for() loop iteration to get your program to count for you, as per the following example:
for (int i = 0; i < 10; i++){
//prints 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 one digit at a time
The previous example used a for() loop iteration to count from 0 to 9, lets have a look at how it did this. First we need to use the for keyword to indicate to Processing that we are about to create a for() loop iteration. A for loop iteration relies on three statements init, test and update within parenthesis so that they are specifically associated with the for() loop iteration structure. As you can see the three statements are separated with semi-colons, this is unique to a for() loop iteration in Processing and clearly differentiates these statements from being parameters. As init is used to initialize a variable within the for() loop iteration structure, the scope of this variable is limited to the for() structure. What this means is that the variable i in our previous example will not be accessible in other places within our sketch and only be accessible within the for() structure. As a result this variable name is usually i or n and not very descriptive. It is actually more distracting to call a variable initialized within a for() loop anything other than i or n (some people might also use x but this can be a bit distracting from variables that use x to denote a position on the X axis). It is therefore advisable to not use a variable name that is any more descriptive than a single character such as i or n. Once we have the variable initialized we can then use it in a test, if the test evaluates to true the code within the for structure will be run. It is important to note that if the test evaluates to true the code within the for structure is run, and only after this code is run is the update statement executed.
Iterations Visualized
The update statement in our example is an incremental statement, which adds one to the variable from init subsequently increasing the value of the variable with each iteration. On the tenth occasion that the loop repeats the variable is incremented to a value of 10, so when the conditional evaluates the test (10 < 10) will return false. This will break the loop and stop it from being repeated. Using a for() loop as a counter can be a convenient method of updating values in a sketch, but for() loops can be extended to be more than just simple counters and can be used to iterate complex blocks of code that can contribute significantly to a program's flow of control. For example in our mystery shape maker sketch we have used a for() loop between beginShape() and endShape() to create multiple vertices for the irregular shape we would like Processing to draw. The iteration follows:

for(int i = 0; i < points; i++){
          vertex(numx[i], numy[i]);
Using this method we can let the user decide what the shape should look like. If you recall beginShape() and endShape() require the vertex() function between them. The difference with this sketch is that we have nested the vertex() function inside a for() loop iteration. The program will loop through the vertex() function as many times as the variable initialized within the for() loop called i, is less than the points variable declared earlier in global space. What this translates to is the the vertex() function will be run six times and on the seventh attempt to run the for() loop the conditional of the for() loop will evaluate to false as i will be equal to points (i == points) causing the loop to break and running the rest of the code that follows the for() loop structure, which would be the endShape() function. This creates a shape with six vertices (according to our example) in the positions that the user specified by clicking in the Display Window. The coordinates of these vertices are determined by extracting the values associated with each element in the arrays numx[] and numy[], as the index number of each element is referenced with the for() loop variable i. A full listing of the mystery shape maker program follows:
int points = 10;
int clicks;
int[] numx = new int[points];
int[] numy = new int[points];
color randCol = color(random(255), random(255), random(255));
void setup() {
void draw() {

 if (clicks < points){
 numx[clicks] = mouseX;
 numy[clicks] = mouseY;
 for(int tempx = 0;
tempx < points; tempx++){


void mouseClicked(){