An Introduction To Programming With Processing

Program Notes

In the first line of the sketch we declare an array with four elements. When using this technique to create a new array we must indicate the datatype of the array and use brackets[] to tell Processing that we are about to create an array (and not just simply declare a variable). We must then name the array and use the assignment operator to populate the array with the new elements (which do not have values assigned to them as of yet). We do this by use of the new keyword, followed by the datatype of the new elements which must match the array's datatype and finally, brackets indicating how many of these new elements will populate the array.
int[] myArray = new int[4];
Next the variable clicks is declared, this variable will be used to count how many times the user has clicked in the Display Window. The draw() function is then initiated in order to keep the program running, and prevent the sketch from turning to static mode. The mouseClicked() function consists of a simple if() statement. The conditional of the if() statement is executed when the user clicks a mouse button within the Display Window. The conditional checks if the clicks variable is less than four, which is the amount of elements in the array. If this is the first time the mouse has been clicked, clicks will equal a value of 0 as it has not been assigned a value through initialization, it has only been declared. As a result the following statement is run:
myArray[clicks] = mouseX;
This is the statement that assigns a value to each element in the array. If this is the first time clicks has been used in the comparison it will also be the first time the user has clicked in the Display Window and therefore clicks will have a value of 0, as a result the preceding statement can be translated and explicitly expressed as:
myArray[0] = mouseX;
This means the element with the index number 0 is assigned the value of whatever the mouse's X coordinate was at the time the user clicked a mouse button. The next four println() statements print the value of each of the four elements in the array. As only the first element has a value at this point in time, it will be the only element that is non-zero until the user clicks again (up to three more times).
In a similar way that we used augmented assignment to shorten an expression that is commonly used in programming, we have used an increment operator in the previous example to shorten this statement. The increment operator works by adding 1 to the current value of the particular variable it is used with, then assigning this new value back to the original variable. This is a common method of getting a program to count for you as each time the variable is used with the increment operator it will return a value that is one more than it's previous value. Writing this statement without the increment operator would look like this:
clicks = clicks + 1;
As you can see using an increment operator can make your code easier to read and save you some keystrokes. The decrement operator (which is two minus signs --) works in a similar way to the increment operator except that it subtracts 1 from the variable's current value before reassigning the new value back to the original variable.

The result of this statement is that the clicks variable will now be one more than it's previous value by the time the program repeats. For example the clicks variable was initially 0, but at the end of the if() statement the clicks variable will have a value of 1. This is important because the next time the user clicks a mouse button the comparison will be working with different values. For example on the first click the comparison can be expressed as (0<4), on the second click the comparison can be expressed as (1<4) and so on. This continues until after the fourth click, as the fourth click will equate to (3<4). At the end of the if() statement on the fourth click the variable clicks is incremented to 4, this means on the fifth click the conditional can be expressed as (4<4), this is false and the if() statement is no longer executed. If we did not include the if() statement which serves the main purpose of counting the amount of clicks, the sketch would still have run but on the fifth click we would be trying to assign a value to an element in the array that does not exist, as a result Processing would have given us an “Array Index Out of Bounds” exception. You cannot add elements to an array like this, there is however a method of getting around this restriction, which we will have a look at in our mystery shape maker sketch. It's worth noting the print out that appears in the text area every time the user's mouse is clicked for the first four times within the Display Window. What is most notable about this, is that the current position of the users mouse's X position is printed along with all the other X positions that the user's mouse was in when the user clicked up to three more times previously in the Display Window. All of these values are now assigned to elements in an array and we now have the option to use those values in a more complex program, by accessing them through their index numbers.

Download the example file