An Introduction To Programming With Processing

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.

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