|
Chapter: The
setup() function
The setup() function
Let's have a look at how the setup() function works and how it alters
the structure of a program. Code that is cradled between the braces{}
of the setup() function forms the code block of the setup() function
and determines it's structure. This code will run only once, throughout
the duration of the sketches life-cycle. Meaning that from the time the
sketch is started to the point when you close the Display Window, exit
the web page the sketch was running on, close the application the
sketch was running through or do whatever is needed to end the sketch,
the code block within the setup() function is never repeated until that
sketch is run again. So how does that make the sketch more dynamic?
Well in fact, when compared to the draw() function the setup() function
does not contribute to significantly making the sketch more dynamic,
but it does contribute to allowing the sketch to become dynamic. Having
said that, let's examine what it means in more depth.
In programming the term dynamic is often used to describe the changing
effects of a program. If we where to contrast this definition with our
previous example of the interface01 program, we would see that this
program is not dynamic. From the time that the sketch starts to the
point when the sketch is terminated, the program does not change.
However if we where to add animation to the images, or make the
“buttons” of the interface clickable, then the program would be
dynamic.
So how does the setup() function contribute to this?
One of setup()'s main forms of contribution to active mode sketches is
in something we call assignment. Assignment is actually not a new
concept to us as we have already used it several times in our previous
sketches and is often invoked in many programming languages with an
equals sign “=” which, in programming, is referred to as an assignment
operator. For example, we have previously used assignment in the
following context, when loading an image into a sketch in preparation
for it to be rendered:
img = loadImage(“myBitmap.png”);
The purpose of assignment is to make whatever is on the left side of
the operator, equal the value that is on the right side of the
assignment operator. In this way assignment can be a relatively
straight forward or complex procedure. For example if we have a simple
value such as a number or typographic character on the right of the
assignment operator, the assignment of that value to whatever exists on
the left is relatively straightforward because we're just simply
telling Processing to make whatever is on the left of the assignment
operator be the same as that which is on the right and then store those
values in the computer's memory. However if we have an expression, a
command or both on the right of the assignment operator the task of
assignment can become more complex not only for Processing but also for
us to keep track of.
In the previous example we are assigning the value of the bitmap image
that exists in our data folder called myBitmap.png to the img object,
by using the loadImage() function.
But, what exactly is going on in this assignment statement, as the
computer that is running the sketch sees it?
Firstly the computer running the sketch must process the call to the
function loadImage() this requires processing power and secondly the
computer having realized what the loadImage() function requires after
processing it, now accepts the parameter “myBitmap.png”.
In order for it to accept this parameter it has to allocate a certain
amount of it's memory to load the image. Computers have a limited
amount of memory and the larger the bitmap image's size (in terms of
kilobytes, megabytes, etc.) the more physical memory they require to be
loaded into a sketch. As a result the computer must try to allocate
memory that has not already been assigned to another value and does not
request more memory than is necessary. All of this work performed by
the computer is performed without us having to know anything about the
steps it must take to display the image in our sketch.
As you can see, although this assignment statement was relatively easy
for us to create, the steps that our computers must take in order to
make what we are requesting possible is actually not so straightforward.
The setup() function can be very useful in a situation such as this,
because the previous statement is so resource insensitive it is not the
kind of statement we would like to have repeated throughout the
duration of our running program. Doing this will simply cause a
bottleneck effect on the resources of the computer running the sketch
and ultimately cause the sketch's performance to drop, as the computer
struggles to keep up with our requests.
The setup() function as a result will run only once throughout the
duration of a program, and is designed to keep system performance at
optimal speeds so that our sketches can run more efficiently with the
code that does need to be repeated such as that of the draw() function.
Chapter: The
draw() function
The draw() function
The draw() function differs substantially from the setup() function in
that it is designed to repeat the code block associated with it and
cradled between it's braces. The ability to repeat code and have it
update itself in the process is a key feature in creating dynamic
content. For example when creating interactive programs it is quite
useful to know the position of the users mouse, so that you can use
this information to determine whether the user is hovering over a
button, a scroll bar, an image or other interactive interface feature.
As the user is likely to move the mouse around several times while the
program is running, the mouse's position will change regularly. Knowing
the mouses current X and Y position and being able to compare it with a
previous X and Y position can tell us something like which direction
the user is moving their mouse in, how far the mouse has moved and how
fast the mouse is moving, this information can be used to enhance the
interactive quality of the application.
Using the setup() and draw() functions in Processing is actually quite
easy, and in the following example we'll use them for the purpose of
getting the user's mouse position in terms of X and Y coordinates and
then use the println() function to print these values to the debugging
console.
Enter the following code and run it. Don't be alarmed when Processing
starts to print line after line of information to the console, this is
actually the desired effect. Move your mouse around in the Display
Window to see the values update in the console view then close the
Display Window when you are done:
void setup(){
//setup the size of the sketch
size(510,300);
}
void draw(){
//print the mouse positional data
println("The Mouse's X position is " + mouseX +
" The Mouse's Y
position is " + mouseY );
}
The Mouse's X
and Y position is updated every 60th of a second and printed to the
console
|
|
Previous
