Think Space Studio

Variables

A variable is a symbol that represents a value. The symbol can be anything as simple as a single letter like `x` or `n`, or it can be a bit longer like a word.  The only rules about variable names are that they have to start with a letter, can contain only letters, numbers, and underscores, and are case-sensitive. There are different types of values that you can associate with a variable. The three main types of variables are numbers (2, 0, 99.9999), strings ("hi mom", "cats!"), and booleans (true or false). In order to use a variable in one of your programs or sketches, you first need to declare it. Declaring a variable in your program tells the compiler what type of variable it is (number, string or Boolean) and what the name of the variable is. You need to do this because if you don't, the program will have no idea what to do with your variable, and won't run. Here are some examples of numeric variable declarations:

int num;
float diameter;

The first line tells Processing that you are going to be using an integer (`int`) variable named `num`. Integer variables hold whole numbers. The second line tells Processing that you are going to be using a floating-point decimal (`float`) variable named `diameter`. Decimal variables can hold decimals, like .999 or 1.2 or 1000.0 (there is also a more precise floating-point variable type, called `double` - it not surprisingly has twice the precision as a `float`). The next part of using a variable is to give it a value. This is called setting a variable. This is done with a simple equals:

num = 1;
diameter = 200.5;

Now you can use this variable in place of the raw value. So instead of writing:

ellipse(100, 100, 200, 200);

You would write:

ellipse(100, 100, diameter, diameter);

For one line of code this might seem silly, but if you are drawing many shapes, this is very helpful. Try this: draw three circles: one centered in the sketch, one to the left of the center circle, and one to the right of the center circle, like this (the canvas is 600x600):

    ellipse( 200, 300, 100, 100 );  // left
    ellipse( 400, 300, 100, 100 );  // right
    ellipse( 300, 300, 100, 100 );  // center

Now, use two variables for the position of the circles. Draw the centered circle at `x`, `y`, and the circle to the left at `x` minus some number, and the circle to the right at `x` plus some number, keeping `y` the same) - like this:

    float x = 300;
    float y = 300;

    ellipse( x - 100, y, 100, 100 );  // left
    ellipse( x + 100, y, 100, 100 );  // right
    ellipse( x, y, 100, 100 );        // center

Now, change the values of `x` and `y` and see what happens to your drawing. See if you can be clever and turn these three circles into a Mickey Mouse like figure.

Scope

One thing that is pretty important about variables, is where you first declare them. A variable is only visible inside the nearest set of curly braces.  For example:

void setup()
{
	int num = 2;
}

void draw()
{
	// num can not be used here
	// unless you re-declare it:
	int num;
	// but at this point, it's a different variable from the one
	// in the setup function
}

There's also something called global scope. If you declare a variable outside of your `setup` and `draw` functions, that's called a global variable, which means it can be used everywhere:

int num = 2;

void draw()
{
	// num can be used here!
	// and still has the value of 2
}

Try it yourself

Here are some things you can try on your own:

• draw a row of circles across the canvas (draw at least two circles), and use a variable to control their y position so that you can move the entire row with a single change
• add another variable to control the size of the circles above