|
|
|
|
Chapter: Arrays
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(256)
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(){
clicks++;
}
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.
|
|
|
|
|
|
Previous
