Let’s change the Monster’s color based on how close it is to some point in the window. If the Monster is within 100 pixels of the point (200,200), we’ll color the Monster red; otherwise, we’ll color is green.
We can change the color of a shape drawn in the window by using the fill method. Like background, fill is given three numbers as arguments, the amount of red, green, and blue you want in the color. Figure 1.1 shows the code to draw the Monster with a green face.
int centerX; int centerY; void setup() { size(800, 400); centerX = 0; centerY = 0; } // end setup() void draw() { background(127, 120, 200); fill(0,255,0); 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()
To compute the distance from the Monster to the point (200,200), we can apply the standard distance formula: the distance from point {(x1,y1)} to point (x2,y2) is the square root of (x1 -x2)2 +(y1 -y2)2 Using Processing, that formula is written as: sqrt((x1-x2) * (x1-x2) + (y1-y2) * (y1-y2)), where * denotes multiplication and sqrt is a method in the main Processing object that returns the square root of the argument it is given.
Computing the distance between two points on the screen might be something we have to do often, so let’s tell the main Processing object how to do this in general so we don’t have to copy that formula down every time we need it. This will make our code more readable and will help prevent silly errors from occurring.
For an object to do something, the object must have a method. We are going to extend the main Processing object to include a method for computing the distance between two points, so let’s call this method distance.
Just like the main Processing object’s size and ellipse methods, our distance method needs information to know what to do. In particular, our distance method needs to be given the two points between which the distance is to be computed. Each time the distance method is called, we need to give the distance method the four numbers representing two points. To indicate that a method requires information in order to work, we must include what is called a list of parameters. We have used methods with parameters many times – recall that we had to pass arguments to each of the methods to draw shapes. That is because each of these methods includes a list of parameters. For example, the rect method has four parameters: the x position of the top-left corner, the y position of the top-left corner, the width, and the height. The rect method requires that arguments be passed in for each of these parameters as a number. We cannot pass information into the rect method that is something other than a number. For example, we cannot pass in a character symbol A for the width because it wouldn’t any sense to say the width is A. We say that the parameters have a type. In the case of rect, the type of the parameters is a decimal number. In Java, a decimal number is called a float, which is short for floating point number. Floating point refers to the way decimal numbers are represented in the computer; it is completely irrelevant to us right now. Why they don’t just call it a decimal or something more meaningful to an average person, I have no idea.
The distance method is not just going to take in information through the parameters, however, it also has to compute information and give it back. In other words, whenever we call the distance method, we give the distance method information and we are asking the distance method to give us some information in return. This is called the return value of the method. The distance method is going to return a decimal number, so we need to indicate that its return value will be a float. We do that by putting float before the method’s name, just like we put void before the names of methods setup and draw to indicate that these methods did not return anything. The parameter list, on the other hand, is defined inside parentheses after the method name, giving us a basic outline of a distance method that looks like this:
float distance(float x1, float y1, float x2, float y2) {
} // end distance
Figure 1.3 shows the main Processing object with the distance method defined at the bottom and Figure 1.4 shows the corresponding animation. It does not matter where we put the distance method as long as it is defined outside of any of the other defined methods in the main Processing object.
int centerX; int centerY; void setup() { size(800, 400); centerX = 0; centerY = 0; } // end setup() void draw() { background(127, 120, 200); if (distance(centerX, centerY, 200, 200) 100) { fill(255,0,0); } else { fill(0,255,0); } // end if 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() float distance(float x1, float y1, float x2, float y2) { return sqrt( (x1-x2) * (x1-x2) + (y1-y2) * (y1-y2) ); } // end distance()