An Introduction To Programming With Processing

The mystery shape maker

Mystery Shapes
In this next sketch we will discover two new fundamental programming concepts arrays and iterations, learn how to work with random numbers and try out a new datatype called color. The mystery shape maker is a sketch that allows the user to make several clicks in the Display Window, and by capturing and storing the coordinates of each click constructs a new shape for the user in a randomly generated color. The shapes can be as simple or complex as you want, as you determine how many times the user gets to click in the Display Window before the mystery shape is drawn.

Arrays

Arrays are used to store data, but unlike the other data storage types we have been using (such as variables) arrays have the ability to store more than just a single value. Arrays can store multiple values of the same datatype in much the same way that an ordinary list (such as a grocery list) consists of multiple elements related to the topic of the list. In fact, this analogy is so true to the nature of arrays that every component making up an array is referred to as an element. This analogy can be extended ever further, as with a list each element in that list can have a number associated with it, in an array each element has a number associated with it too. We refer to these numbers as indices (in plural) or simply an index number in singular form.

An everyday list:

My Shopping List     //name of the list
1. Tea                        //element1
2. Soy-Milk               //element2
3. Vegan Cookie    //element3
An Array in Processing:
int[] myArray = {20, 30, 40};
//name of array is myArray[] and it is datatyped as an int, so it can store integer values
//element 1 is 20, and has an index value of 0
//element 2 is 30, and has an index value of 1
//element 3 is 40, and has an index value of 2
Array Elements
Index values for arrays start at 0 and can go as high as the number of elements in an array minus 1, for example if an array has 15 elements, the index value of the last element in the array is 14.
Understandably at first this system of numbering might seem a bit strange, so in order to simplify things you can think of an index number as a means of referring to an element within an array without having to know what it's value is. This concept should not be new to you as it does not differentiate very much from that which defines a variable, the main difference being that instead of using a variable name we are now using an index number within an array to reference that specific value. The syntax for referencing an element within an array follows:
int[] myArray = {20, 30, 40};    //initialize array
myArray[0];                               /*reference array element with index number 0, which has a value of 20*/
We can also use an array in a program in a similar way that we would use a variable, for example:
Array Math
First line initializes array, second line sets x to 20 + 40 i.e. 60

Using an array in this format can be very similar to the way in which variables are used, and the comparison can extend further than the previous expressional example into initialization and assignment. As you can see in the previous example the array was initialized through both declaration and assignment in one statement in a similar way that variables use initialization, in the first line of the previous example. As arrays have multiple elements assigning values to the elements of an array cannot be through a simple reference to the arrays name, as Processing would not know which element is to inherit the value on the right of the assignment operator. As a result the process of assigning values to elements of an array after declaration or initialization must also include the index number of the element you wish to assign a value to, on the left hand side of the assignment operator. For example:
int[] myArray = {20, 30, 40};    //initialize array
myArray[2] = 10;                      //element 3 was 40 now has a value of 10
With all the similarities between variables and array elements you might be wondering what the purpose of an array is? Unlike variables storing one value followed by another value of the same type within the same variable, the array does not have to replace the previous value in order to store a new value. For example, what if I wanted to store the X position of the mouse when the user clicks in the Display Window. This would be easy enough, I'd just create a variable and assign it the value of the mouseX system variable. This is fine if all I need to know is the current X position of the mouse when the user clicks. However, what if I need to know the previous X coordinate of the mouse, or the one before that and so on. Retrieving this information with a simple variable would not be possible because each time the user clicks the mouse the current value of mouseX replaces the previous value.
int mXPos; /*declare variable to store mouse X position*/

if(userClicked){ /*hypothetical conditional to test if user has clicked in the Display Window*/
   mXPos = mouseX; /*sets variable to current X position of mouse*/
   }

//user moves the mouse around and clicks again

if(userClicked){ /*hypothetical conditional repeats to test if user has clicked*/  
   mXPos = mouseX; /*replaces the previous value for mXPos with the new X position of the mouse and the previous value of mXPos can no longer be retrieved.*/
   }
With arrays this information becomes accessible to us. By using the elements of an array we can store the first X coordinate of the mouse at index 0, the second coordinate at index 1, the third at index 2 and so on. We can store all of this information without having to create a new variable for each value, which would make keeping track of all the variables very confusing and difficult. By using an array we can store all the data related to the X coordinates of the mouse under a single entity. Lets have a look at an example of this in a sketch.
int[] myArray = new int[4]; //declare array with four elements
int clicks; //counts the number of clicks

void draw() { //makes the program repeat
}

void mouseClicked(){
     if(clicks<4){  /*check that the user has not clicked more than 4 times.*/
        myArray[clicks] = mouseX; /*Sets the mouse X coord to the index number in an array that matches the amount of times the user has clicked.*/
        println(myArray[0]); //print the value of the first x coordinate 
        println(myArray[1]); //print the value of the second x coordinate 
        println(myArray[2]); //print the value of the third x coordinate 
        println(myArray[3]); //print the value of the last x coordinate 
        clicks++;            //increment the click value by 1
        }
    }