An Introduction To Programming With Processing

Dynamic assignment for elements in an Array

For the mystery shape maker sketch we are going to use two arrays, one will store the mouse's X positional values and the other will store the mouse's Y positional values, each time the user clicks in the Display Window. As there is no way of acurately predicting exactly where the user is going to click in the Display Window we will need to populate these arrays with the aforementioned values, dynamically. This means each element of the array must have values assigned that relate to the values of the user's mouse X and Y positional data while the program is running and the user has clicked in the Display Window. We then need to make sure those values are not overwritten but stored in memory and can be accessed through their index numbers of the arrays they are associated with. Finally when the user has clicked the last point contributing to the mysterious shape the conditional that was evaluating to true and subsequently assigning positional data to the elements in the array, will now evaluate to false as the number of clicks increases in value. We will then use the beginShape() and endShape() functions and combine each one of the two arrays' corresponding elements into a coordinate for the vertex() function, which will be embedded within a loop that cycles through the two arrays extracting the information from them and subsequently drawing the mystery shape. Although this might sound like a handful, you already know how to create two thirds of this program. Nonetheless, lets recap on these fundamental programming topics as they will more than likely prove to be a useful asset in many a sketch.

First we are going to start by declaring and/or initializing the following global variables:
int points = 6;     //number of points
int clicks;                             //click counter
int[] numx = new int[points];  //array for mouse x coordinates
int[] numy = new int[points];  //array for mouse y coordinates

//generate a random color for the shape's fill
color randCol = color(random(256), random(256), random(256));
The points variable will be a number that we can change before running the sketch so that we can make our shape consist of as many or few points as we like, this number should not be negative. The clicks variable will be used to store the amount of times the user has clicked in the Display Window, it will also be an operand within the conditional that populates the array. Then we move onto declaring the arrays that will store the X and Y coordinates of the user's clicks. Notice how the number of elements in this array has been defined as the variable points. As points is of type int it can be placed within the array's declaration brackets. The preceding statement relating to the declaration of the numx array can be translated and explicitly expressed as:
int[] numx = new int[6];
It is worth noting that in the actual sketch we have not used a numerical constant but rather a variable to determine how many elements will populate the array, this is because if we decided to use more or less points making up the mystery shape, it would be easier to implement this change by means of modifying the initialization statement for the points variable rather than having to change numerical values scattered throughout the sketch, such as in a statement resembling the previous example.

The final variable we have created within the global space is called randCol and has been datatyped as color. The color datatype is used to store color values, in our case we are using the format of:
color varName = color(R, G, B);
Where color is the keyword used to declare variables of type color, varName is the name of the variable, and the assignment operator is used to assign a color value in R (red), G (green) and B (blue) values. RGB values range from 0 to 255 each. Note the expression used for each of the R, G and B values:
random() is a built-in Processing function that is used to return a random number, that is between 0 and the number specified, but not including the specified number. As a result the parameter 256 is used so that Processing will include values between 0 up to and including 255. random() also accepts parameters in the form of:
random(Low, High);
Where Low is the minimum number in the possible range of random numbers and High is one more than the maximum number in the range. If you assign the random() function to a float Processing will return random floats.

The next step is to setup the setup() and draw() functions as per usual, then add the following if() statement to the draw() function:
if (clicks < points){
  numx[clicks] = mouseX;
  numy[clicks] = mouseY;
There's not really anything new about this if() statement, so we'll just run through it briefly. First the conditional checks if the amount of times the user has clicked is less than the amount of elements in the arrays. Using this method creates an error catching scenario, as opposed to if the user was allowed to click repeatedly beyond the number of elements in the arrays which would result in the amount of elements that the program would attempt to store in the arrays exceeding the amount of elements that can be stored in the arrays. This would cause an “Array Index Out of Bounds” exception. We can then use the clicks variable in the if() structure to determine which element in the array is assigned the corresponding mouse X or mouse Y value.
 void mouseClicked(){
Outside of the draw() function we setup a simple mouseClicked() function, which works in a very similar way to the mouseReleased() function. The difference being that the mouseClicked() function does not wait for the mouse to be released before running the code that makes up it's structure, it executes the code within it's associated braces as soon as the mouse is clicked within the Display Window. The purpose of the mouseClicked() function is simply to increment the clicks variable, which it does so within the function's only code block.