Lesson 2: Variables

Syntax introduced: int

0. Why use variables?

When you were drawing your own shapes with vertex(), you probably did what I did and used trial and error to place each vertex until you got the shape to look the way you wanted it to. Or maybe you thought ahead and drew it on graph paper first. Now let's say you like that shape but you wish it was in a slightly different place in the display window. Ugh! What a pain! You'll have to go back and recalculate every vertex. (This is true even if you used graph paper. bummer!) I don't want to do this, and I'll probably mess up somewhere along the way. Ah, but if you use variables then you can solve the annoying recalculation problem!

Here's the same lightning bolt as I drew before, but now I'm going to define two variables to use as the origin. Every subsequent vertex will be written relative to that origin. For example, in the original program the first vertex was vertex(20,10). This time around I'm going to declare an integer variable named x and assign it the value of 20. I'm also going to declare another integer variable called y and assign it the value of 10.

Now that x = 20 and y =10, I can tell Processing to do vertex(x,y) instead. The second vertex was vertex(20,60). I want to write this in terms of x and y so I write vertex(x,y+50). I go through all the vertices in the shape, and with some simple mental arithmetic I transform each one into an equivalent value using x and y. Below is the lightning bolt program in which the vertices are set by variables.

size(100, 200);
background(0);
noStroke();
fill(250, 230, 5);
int x = 20;
int y = 10;
beginShape();
vertex(x, y);
vertex(x, y + 50);
vertex(x + 10, y + 40);
vertex(x, y + 100);
vertex(x + 10, y + 90);
vertex(x, y + 160);
vertex(x + 40, y + 65);
vertex(x + 30, y + 75);
vertex(x + 40, y + 25);
vertex(x + 30, y + 35);
vertex(x + 40, y);
endShape(CLOSE);

Screenshot image of lightning bolt program output. A yellow lightning bolt on a black background.

Recap

Up near the beginning of the program I declared two variables and I named them "x" and "y." I gave them those names because it makes intuitive sense to me to think of horizontal positions as x values and vertical positions as y values. However, I could have named those variables anything I wanted and still used them as x and y values. I could have called them "duck" and "goose" or whatever. I could even have used "y" for horizontal and "x" for vertical (although I think this choice would confuse me a lot later -- not the best idea). In the function vertex(), the first value specified is always the horizontal position and the second value specified is always the vertical position. It does not matter what those values are named.

1. Naming variables

I will now amend the statement, "it doesn't matter what they are named," to tell you that actually there are a few rules about naming variables in Processing. The names can't start with a number and can't have spaces in them. It is also a really really good idea not to give a variable a name that Processing already uses for something else. There's a list of Processing variables at their website.

When I defined the two variables, "x" and "y" up at the top of the program, I didn't just write x = 20. I wrote int x = 20. That tells Processing that I want to make an integer variable and name it x and I am assigning the value 20 to x. An integer means a whole number with no fractional parts. 3 is an integer, -3 is an integer, 0 is an integer, but 3.5 is not an integer. You can declare a variable and assign a value to it in more than one step and some people prefer this for clarity. For example

int x;
x = 20;

is equivalent to

int x = 20;

And,

int x, y;
x = 20; y = 10;

is equivalent to

int x = 20;
int y = 10;

You will have to experiment with the syntax that makes the most sense to you. There are other types of variables besides integers and we will get to them later on. Now back to the program.

Upon first glance it doesn't really look like we have saved ourselves any effort here compared to writing it where we named every vertex position explicitly. After all, we have typed a lot more characters by declaring variables, haven't we? Plus we had to do some addition and subtraction in our head to rewrite the position of each vertex. But let's say I want to scooch the whole lightning bolt over and down little bit so it's more centered in the display window. That is easy-peasy lemon-squeezy as my first grader says. All I have to do is change the values of x and y and recalculate nothing else at all. Let's do it. Instead of making x = 20 and y = 10, we'll make x = 30 and y = 20. The code for the new lightning bolt program after having changed the x and y assignments to 30 and 20 is below.

size(100, 200);
background(0);
noStroke();
fill(250, 230, 5);
int x = 30;
int y = 20;
beginShape();
vertex(x, y);
vertex(x, y + 50);
vertex(x + 10, y + 40);
vertex(x, y + 100);
vertex(x + 10, y + 90);
vertex(x, y + 160);
vertex(x + 40, y + 65);
vertex(x + 30, y + 75);
vertex(x + 40, y + 25);
vertex(x + 30, y + 35);
vertex(x + 40, y);
endShape(CLOSE);

Screenshot of the output of the new lightning bolt program. The yellow lightning bolt is centered on the black background.

There. I like the way that looks better.

While you are at it, is the "Quiz yourself" exercise above building your spatial visualization skills or object visualization skills, or both, or neither?