Let’s try to write some code to move the Monster around the window while keeping it in one piece. Suppose we want the Monster to start in the top, left corner of the window but then move diagonally downward to the right. Since we want the movement to be somewhat smooth, each time draw is called, the Monster’s position should change very little, say one pixel to the right and one pixel downward. To make this work, however, draw needs to know where the Monster was drawn during the previous call to draw. In other words, the main Processing object needs to keep track of the Monster’s position.
The values associated with an object are called the attributes of the object. In this case, since the Monster’s position attributes are going to vary as the program runs, the Monster object will keep track of these values using variables. A variable is a mechanism with which Java, or any other programming language, keeps track of information that may change as the program executes. To create a new variable, we need to give it an identifier, which is just the name we are going to use whenever we want to do something with the variable. We also need to tell Java what type of value the variable is going to maintain. For example, if we are going to keep track of a number, we need to tell Java that this variable will be keeping track of a number. There are two kinds of numbers that Java can keep track of: integers and decimal numbers. To define an integer named centerX as a variable in the main Processing object, we write: int centerX; outside of the setup and draw methods.
The statement int centerX; is called a variable declaration – we have declared to Java that the main Processing object will include a new variable, centerX, and that the variable takes on values that are integers. We say the type of the variable is int.
Let’s create another variable, centerY, that will also have type int. We can use these two variables anywhere we expect to have a number, so we can replace all of our calls to random with the appropriate variable, centerX or centerY. The code we have so far is shown in Figure 1.1.
int centerX; int centerY; void setup() { size(800, 400); } // end setup() void draw() { background(127, 120, 200); ellipse(centerX, centerY, 50, 50); line(centerX, centerY, centerX, centerY+10); ellipse(centerX-10, centerY, 5, 5); ellipse(centerX+10, centerY, 5, 5); rect(centerX-10, centerY+15, 5, 6); rect(centerX-3, centerY+15, 5, 6); rect(centerX+4, centerY+15, 5, 6); } // end draw()
Assigning Values To Variables It is not enough to simply define variables, however. We need to give values to these variables. To assign a new value to a variable, we use an assignment statement. In particular, the statements centerX=0; and centerY=0; assign 0 as the value of both centerX and centerY. An assignment statement consists of the identifier for a variable, followed by an equals sign, followed by a value. The value must have the same type as the variable. In this case, the value on the right hand side of each assignment statement must be an integer because we declared the types of centerX and centerY to be int.
Where should we put these assignment statements? Given that the initialization of these variables should happen once rather than every time the window is redrawn, these assignment statements should appear in the setup method. Figure 1.2 shows the code we have so far. The animation in Figure 1.3 shows the Monster drawn in the top, left corner of the window.
int centerX; int centerY; void setup() { size(800, 400); centerX = 0; centerY = 0; } // end setup() void draw() { background(127, 120, 200); ellipse(centerX, centerY, 50, 50); line(centerX, centerY, centerX, centerY+10); ellipse(centerX-10, centerY, 5, 5); ellipse(centerX+10, centerY, 5, 5); rect(centerX-10, centerY+15, 5, 6); rect(centerX-3, centerY+15, 5, 6); rect(centerX+4, centerY+15, 5, 6); } // end draw()
To give the impression that the Monster is moving diagonally through the window, the values of these variables should change slightly each time draw is called. If we want to increase the value of centerX by 1 each time draw is called, we can put an assignment statement for centerX in draw. The new value of centerX should be the old value plus 1, so the right hand side of the assignment statement should be centerX+1. The entire assignment statement will be:
centerX = centerX+1;
The assignment statement works as follows: First the expression on the right hand side of the statement is evaluated, which means that each variable on the right hand side is replaced by the current value of that variable and then the operations specified are performed. For example, in the assignment statement above, if centerX is currently 0, the centerX in the expression on the right hand side is replaced by 0. Then, 0 is added to 1, giving us 1 as the value of the expression. The variable on the left hand side will be assigned this value. Again, if the value of centerX was 0 before this assignment statement executed, the value of centerX will be 1 after this assignment statement is executed.
The complete code to move the Monster diagonally is shown in Figure 1.4. Figure 1.5 shows the code in action.
int centerX; int centerY; void setup() { size(800, 400); centerX = 0; centerY = 0; } // end setup() void draw() { background(127, 120, 200); ellipse(centerX, centerY, 50, 50); line(centerX, centerY, centerX, centerY + 10); ellipse(centerX - 10, centerY, 5, 5); ellipse(centerX + 10, centerY, 5, 5); rect(centerX - 10, centerY + 15, 5, 6); rect(centerX - 3, centerY + 15, 5, 6); rect(centerX + 4, centerY + 15, 5, 6); centerX = centerX + 1; centerY = centerY + 1; } // end draw()