ANIMATION AND GLOBAL VARIABLES 65 void setup() {

size(600, 400);

int redval = 192;

int grnval = 64;

int bluval = 0;

background(redval, grnval, bluval);

}

All the local variables start with a lowercase letter. The global-variable version looks like this:

int Redval = 192;

int Grnval = 64;

int Bluval = 0;

void setup() { size(600, 400);

background(Redval, Grnval, Bluval);

}

(Full program in functions/sketches/animation3/animation3.pde)

Now we’re getting somewhere. The next step will be to change draw(). Each time the function is called, it’ll redraw the window with the current background color:

void draw() {

background(Redval, Grnval, Bluval);

}

Now we can see why these are globals: I want to use them in more than one function.

To make things interesting, I’ll change the value of Redval on each call:

void draw() {

Redval = Redval + 1;

background(Redval, Grnval, Bluval);

}

I could have used our shorthand to increment Redval, say by writing Redval++ or ++Redval, but I’ll do it this way for now.

Try this out! Type in the whole program as it stands now (because we’re going to make the red value grow brighter over time, I’m going to start it here at 12, so it has some room to grow):

int Redval = 12;

int Grnval = 64;

Figure 4.5: The background color animation (frame from animation) (func-tions/sketches/animation4/animation4.pde) [animation4.png]

int Bluval = 0;

void setup() { size(600, 400);

background(Redval, Grnval, Bluval);

}

void draw() {

Redval = Redval + 1;

background(Redval, Grnval, Bluval);

}

(see output in Figure 4.5. Full program in functions/sketches/animation4/animation4.pde) To run this, press the Run button. You’ll see the window appears and gradually becomes redder. Congratulations! Your Processing code is animating!

This program works just fine, but you’ll notice that the screen gets redder and redder and then stops changing. That’s because the value of Redval reaches 255 after a while, and that means “maximum red” (I’ll talk more about colors later, and we’ll see why this strange number is the maximum value, but for now please just roll with it: colors range from 0 to 255). If we hand background() a color value greater than 255, it silently assumes you meant 255.

4.8 If Statements

I’d like the colors in our window to keep changing as time goes on. There are lots of ways to do this. One way is to include another statement in draw(), which will say,

4.8. IF STATEMENTS 67

“If the value of Redval is larger than 255, then set the value to 0”. If we do this, then the next time draw() gets called Redval will be 0, and then 1, and then 2, and so on, until it reaches 256 again, when it goes back to 0, and the cycle goes on until we stop the program.

Processing (like most languages) gives us a way to do this: the if statement . An if statement is really just like the expression I wrote above. Conceptually, the if statement has a test and an action; if the test is true, the action is taken. Let’s take a first stab at it by just writing down the English version I gave above:

If the value of Redval is larger than 255, then set its value to 0

Now let’s turn this into a bit of Processing. The first thing is to replace the capital I in If with a lower-case letter:

if the value of Redval is larger than 255, then set its value to 0

Not much of a change, but an important one. Now we’ll fix up the test part. In a Processing if statement , the test is placed within a pair of parentheses that come after the word if:

if (the value of Redval is larger than 255), then set its value to 0 Now we’ll replace the English text within the parentheses with a little mathematical expression that means the same thing:

if (Redval > 255), then set its value to 0

Notice here that the greater-than sign > is used in its usual way, unlike the equals sign. We’re not asserting that Redval really is greater than 255, because this is merely the test in the if statement . If Redval is indeed greater than 255, we say that the result of the test is true, otherwise it is false. If the test is true, Processing executes the last part of the if statement , which tells it what action to take. If the test is false, the action statement is ignored; Processing simply skips right over it.

The action statement here is an assignment statement, which we’re used to from before:

if (Redval > 255), then Redval=0

The word “then” is good English, but it’s not part of Processing. It’s not even a keyword. In an if statement , the word “then” is just assumed. If you do include it, Processing will complain. So let’s remove it:

if (Redval > 255), Redval=0

We have two things left to do to make this a real Processing statement. First, we get rid of the comma, which (like “then”) is appropriate in English but not for Processing:

Figure 4.6: The improved background changer (frame from animation) (func-tions/sketches/animation5/animation5.pde) [animation5.png]

if (Redval > 255) Redval=0

Finally, we add a semicolon to the end, to indicate the end of the if statement : if (Redval > 255) Redval=0;

That’s it! Here’s the new program:

int Redval = 192;

int Grnval = 64;

int Bluval = 0;

void setup() { size(600, 400);

background(Redval, Grnval, Bluval);

}

void draw() {

Redval = Redval+1;

if (Redval > 255) Redval=0;

background(Redval, Grnval, Bluval);

}

(see output in Figure 4.6. Full program in functions/sketches/animation5/animation5.pde) Give it a try. You’ll find that the red part of the color gets brighter and brighter, and then suddenly goes to zero, and then it starts to climb again, over and over until you stop the program.

4.8. IF STATEMENTS 69