Our Good Friends, setup( ) and draw( )
Now that we are good and exhausted from running marathons in order to better learn programming, we can take this newfound knowledge and apply it to our first “dynamic ” Processing sketch. This program will draw to the screen continuously (i.e., until the
user quits). This is accomplished by writing two “ blocks of code ” setup( ) and draw() . Technically speaking setup( ) and draw( ) are functions.
What is a block of code?
A block of code is any code enclosed within curly brackets.
{
A block of code
}
Blocks of code can be nested within each other, too.
{
A block of code
{
A block inside a block of code
}
}
This is an important construct as it allows us to separate and manage our code as individual pieces of a larger puzzle. A programming convention is to indent the lines of code within each block to make the code more readable. Processing
will do this for you via the Auto-Format option (Tools → Auto-Format).
Blocks of code will reveal themselves to be crucial in developing more complex logic, in terms of variables , conditionals, iteration , objects , and functions , as discussed later. For now, we only need to look at two simple blocks: setup( ) and draw( ).
Now that we are good and exhausted from running marathons in order to better learn programming, we can take this newfound knowledge and apply it to our first “dynamic ” Processing sketch. This program will draw to the screen continuously (i.e., until the
user quits). This is accomplished by writing two “ blocks of code ” setup( ) and draw() . Technically speaking setup( ) and draw( ) are functions.
What is a block of code?
A block of code is any code enclosed within curly brackets.
{
A block of code
}
Blocks of code can be nested within each other, too.
{
A block of code
{
A block inside a block of code
}
}
This is an important construct as it allows us to separate and manage our code as individual pieces of a larger puzzle. A programming convention is to indent the lines of code within each block to make the code more readable. Processing
will do this for you via the Auto-Format option (Tools → Auto-Format).
Blocks of code will reveal themselves to be crucial in developing more complex logic, in terms of variables , conditionals, iteration , objects , and functions , as discussed later. For now, we only need to look at two simple blocks: setup( ) and draw( ).
Admittedly, there is a lot of stuff in Figure 3.1 that we are not entirely ready to learn about. We have covered that the curly brackets indicate the beginning and end of a “ block of code, ” but why are there parentheses after “ setup ” and “ draw ” ? Oh, and, my goodness, what is this “ void ” all about? It makes me feel sad inside! For now, we have to decide to feel comfortable with not knowing everything all at once, and that these important pieces of syntax will start to make sense in the future.
For now, the key is to focus on how Figure 3.1 ’s structures
control the flow of our program. This is shown in Figure 3.2 . How does it work? When we run the program, it will follow our instructions precisely, executing the steps in setup( ) first, and then move on to the steps in draw() . The order ends up being something like: 1a, 1b, 1c, 2a, 2b, 2a, 2b, 2a, 2b, 2a, 2b, 2a, 2b, 2a, 2b … |
Task:
Rewrite the code of one of your pictures with setup() and draw() functions.
void setup() {
// Set the size of the window
size(200,200);
}
void draw() {
//Put your code here of what you want to draw
}
You will notice that nothing in the window changes. This looks identical to a static sketch! What is going on? All this discussion for nothing?
Well, if we examine the code, we will notice that nothing in the draw( ) function varies . Each time through the loop, the program cycles through the code and executes the identical instructions. So, yes, the program is running over time redrawing the window, but it looks static to us since it draws the same thing each time!
Rewrite the code of one of your pictures with setup() and draw() functions.
void setup() {
// Set the size of the window
size(200,200);
}
void draw() {
//Put your code here of what you want to draw
}
You will notice that nothing in the window changes. This looks identical to a static sketch! What is going on? All this discussion for nothing?
Well, if we examine the code, we will notice that nothing in the draw( ) function varies . Each time through the loop, the program cycles through the code and executes the identical instructions. So, yes, the program is running over time redrawing the window, but it looks static to us since it draws the same thing each time!
3.3 Variation with the Mouse
Consider this. What if, instead of typing a number into one of the drawing functions, you could type “ the mouse’s X location ” or “ the mouse’s Y location. ”
line(the mouse's X location, the mouse's Y location, 100, 100);
In fact, you can, only instead of the more descriptive language, you must use the keywords mouseX and mouseY , indicating the horizontal or vertical position of the mouse cursor.
Task:
Write the code:
void setup() {
size(200,200);
}
void draw() {
background(255);
// Body
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
Explain why we see a trail of rectangles if we move background( ) to setup( ), leaving it out of draw( ) .
Consider this. What if, instead of typing a number into one of the drawing functions, you could type “ the mouse’s X location ” or “ the mouse’s Y location. ”
line(the mouse's X location, the mouse's Y location, 100, 100);
In fact, you can, only instead of the more descriptive language, you must use the keywords mouseX and mouseY , indicating the horizontal or vertical position of the mouse cursor.
Task:
Write the code:
void setup() {
size(200,200);
}
void draw() {
background(255);
// Body
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,50,50);
}
Explain why we see a trail of rectangles if we move background( ) to setup( ), leaving it out of draw( ) .
We could push this idea a bit further and create an example where a more complex pattern (multiple shapes and colors) is controlled by mouseX and mouseY position. For example, we can rewrite your character to follow the mouse. Note that my Zoog’s body is located at the exact location of the mouse ( mouseX, mouseY ), however, other parts of
Zoog’s body are drawn relative to the mouse. Zoog’s head, for
example, is located at ( mouseX, mouseY-30 ). The following example only moves Zoog’s body and head.
Task:
Copy the code as follows:
void setup() {
size(200,200); // Set the size of the window
smooth();
}
void draw() {
background(255); // Draw a white background
// Set ellipses and rects to CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(175);
rect(mouseX,mouseY,20,100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX,mouseY-30,60,60);
// Draw Zoog's eyes
fill(0);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
// Draw Zoog's legs
stroke(0);
line(90,150,80,160);
line(110,150,120,160);
}
Change the code so that his eyes and legs move with the rest of the body.
Alter the code of your own character to do the same.
Task:
Copy the code as follows:
void setup() {
size(200,200); // Set the size of the window
smooth();
}
void draw() {
background(255); // Draw a white background
// Set ellipses and rects to CENTER mode
ellipseMode(CENTER);
rectMode(CENTER);
// Draw Zoog's body
stroke(0);
fill(175);
rect(mouseX,mouseY,20,100);
// Draw Zoog's head
stroke(0);
fill(255);
ellipse(mouseX,mouseY-30,60,60);
// Draw Zoog's eyes
fill(0);
ellipse(81,70,16,32);
ellipse(119,70,16,32);
// Draw Zoog's legs
stroke(0);
line(90,150,80,160);
line(110,150,120,160);
}
Change the code so that his eyes and legs move with the rest of the body.
Alter the code of your own character to do the same.
In addition to mouseX and mouseY, you can also use pmouseX and pmouseY . These two keywords stand for the “ previous ” mouse X and mouse Y locations, that is, where the mouse was the last time we cycled through draw( ). This allows for some interesting interaction possibilities. For example, let’s consider what happens if we draw a line from the previous mouse location to the current mouse location, as illustrated in the diagram in Figure 3.6 .
|
Example 3-4: Drawing a continuous line
Task:
Write the following code
void setup() {
size(200,200);
background(255);
smooth();
}
void draw() {
stroke(0);
line(pmouse X ,pmouse Y ,mouse X ,mouse Y );
}
TRY IT!
Absolute value: The absolute value of a number is defined as that number without its sign:
• The absolute value of –2 is 2.
• The absolute value of 2 is 2.
In Processing, we can get the absolute value of the number by placing it inside the abs( ) function, that is,
• abs( 5) → 5
The speed at which the mouse is moving is therefore:
• abs( mouseX - pmouseX )
Update the code so that the faster the user moves the mouse, the wider the drawn line. Hint: look up strokeWeight( )
in the Processing reference.
3.4 Mouse Clicks and Key Presses
We are well on our way to creating dynamic, interactive Processing sketches through the use the setup( ) and draw( ) framework and the mouseX and mouseY keywords. A crucial form of interaction, however, is missing—clicking the mouse!
In order to learn how to have something happen when the mouse is clicked, we need to return to the flow of our program. We know setup( ) happens once and draw( ) loops forever. When does a mouse click occur? Mouse presses (and key presses) as considered events in Processing. If we want something to happen (such as “ the background color changes to red ” ) when the mouse is clicked, we need to add a third block of code to handle this event.
This event “ function ” will tell the program what code to execute when an event occurs. As with setup( ) , the code will occur once and only once. That is, once and only once for each occurrence of the event. An event, such as a mouse click, can happen multiple times of course! These are the two new functions we need:
• mousePressed( ) —Handles mouse clicks.
• keyPressed( ) —Handles key presses.
Task:
The following example uses both event functions, adding squares whenever the mouse is pressed and clearing the background whenever a key is pressed.
void setup() {
size(200,200);
background(255);
}
void draw() {
}
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
void keyPressed() {
background(255);
}
In this example, we have four functions that describe the program’s flow. Th e program starts in setup( ) where the size and background are initialized. It continues into draw( ) , looping endlessly. Since draw( ) contains no code, the window will remain blank. However, we have added two new functions: mousePressed( ) and keyPressed( ) . The code inside these functions sits and waits. When the user clicks the mouse (or presses a key), it springs into action, executing the enclosed block of instructions once and only once.
Now: Add “ background(255); ” to the draw( ) function. Explain why does the program stop working?
We are well on our way to creating dynamic, interactive Processing sketches through the use the setup( ) and draw( ) framework and the mouseX and mouseY keywords. A crucial form of interaction, however, is missing—clicking the mouse!
In order to learn how to have something happen when the mouse is clicked, we need to return to the flow of our program. We know setup( ) happens once and draw( ) loops forever. When does a mouse click occur? Mouse presses (and key presses) as considered events in Processing. If we want something to happen (such as “ the background color changes to red ” ) when the mouse is clicked, we need to add a third block of code to handle this event.
This event “ function ” will tell the program what code to execute when an event occurs. As with setup( ) , the code will occur once and only once. That is, once and only once for each occurrence of the event. An event, such as a mouse click, can happen multiple times of course! These are the two new functions we need:
• mousePressed( ) —Handles mouse clicks.
• keyPressed( ) —Handles key presses.
Task:
The following example uses both event functions, adding squares whenever the mouse is pressed and clearing the background whenever a key is pressed.
void setup() {
size(200,200);
background(255);
}
void draw() {
}
void mousePressed() {
stroke(0);
fill(175);
rectMode(CENTER);
rect(mouseX,mouseY,16,16);
}
void keyPressed() {
background(255);
}
In this example, we have four functions that describe the program’s flow. Th e program starts in setup( ) where the size and background are initialized. It continues into draw( ) , looping endlessly. Since draw( ) contains no code, the window will remain blank. However, we have added two new functions: mousePressed( ) and keyPressed( ) . The code inside these functions sits and waits. When the user clicks the mouse (or presses a key), it springs into action, executing the enclosed block of instructions once and only once.
Now: Add “ background(255); ” to the draw( ) function. Explain why does the program stop working?