Note: This document is intended to be only a brief summary of the topic of variables.

Motivation

Our motivation for introducing the use of variables is to help us learn to design more robust and adaptable programs. Revisiting an example from an earlier module, we created a sketch resulting in the following image

As part of that sketch, we described the geometry of all shapes using specific numbers, such as the top rectangle of the hat, which was defined as

rect(200, 100, 200, 250);

arc(300, 550, 200, 50, PI/8, PI*7/8);

A shortcoming of that approach is that if we later wanted to change our sketch, perhaps drawing the entire portrait at a different size, or moved to a different location on the canvas, we would presumably have to go back and make many changes to our sketch code to get the appropriate geometry. The more complex our drawing is, the more tedious it would be to redesign such a program.

A better design relies on the definition of certain configuration variables, such as centerX, centerY, and faceWidth, and then to describe the geometry of all the shapes relative to those variables. We will give a complete implementation of such a robust sketch at the end of these notes; first, we need to discuss some Processing techniques.

User-defined Variables

We can introduce new variables to our Processing sketch which can subsequently be used in expressions that define properties of our shapes. The basic form of a variable declaration has the form:

variableType variableName;

variableType variableName = initialValue;

For example, we might define a variable as

int faceWidth = 300;

Data Types

When declaring a variable, we must tell Processing what type of data it represents. There are many different types of data that can be stored in a computer, and in order to understand how it might be used and how much memory must be set aside to store its value, Processing must be told what type of data it is. There are many built-in data types in the language. The most prominent that we will be using in this course are:

• int
  Used to store a numeric value that must be integral. Example:

        int faceWidth = 300;
        

• float
  Used to store a numeric value that may or may not be integral. Example:

        float ratio = 0.25;
        

• boolean
  Used to store a logical value that must be either true or false. Example:

        boolean waiting = true;
        

• color
  Used to store a color (which can be defined using any of the parameterizations that we have previously explored). The initialization statement for a color is a bit more complex than for the numeric types, as we use the type name color both in declaring the variable, and in setting the initial value, as in:

        color brickRed = color(132, 31, 39);
        color lightGray = color(211);
        

  or using hexadecimal notation, as in

        color skyBlue = #87CEEB;
        

When we later work with textual data, we will introduce types char and String.

Built-in Variables

The Processing language defines some important built-in variables for our convenience. Most notable are:

• width
  An integer equal to the width of the current canvas, measured in pixels.

• height
  An integer equal to the height of the current canvas, measured in pixels.

We have also already seen some convenient built-in constants such as PI, HALF_PI, QUARTER_PI.

When we (soon) begin to create interactive sketches, we will also make use of built-in variables such as

• mouseX
• mouseY
• pmouseX (the previous mouse x-coordinate)
• pmouseY (the previous mouse y-coordinate)
• frameCount
• mousePressed
• keyPressed

Please note that all of these built-in variables should be viewed as "read only" in your use; for instance, you cannot force the movement of the mouse by changing the value of mouseX.

Arithmetic

The value stored in a variable can change over time (hence the term "variables"), and we can use their current value any place where a value of the associated type could be used. For example, the face of our man might be drawn as

    ellipse(centerX, centerY, faceWidth, faceWidth);

    point(centerX - faceWidth/6, centerY - faceWidth/6);

    float brimWidth = 1.167 * faceWidth;

For numeric types, the standard operations rely on the following operator syntaxes:

• + for addition
• - for subtration
• * for multiplication
• / for division

When working with floating-point types, a division operation is performed as a floating-point division. So if using operands 23.0 and 4.0 instead of integers 23 and 4, we will find that expression 23.0/4.0 results in floating-point value 5.75. If you do an operation that involves one floating-point type and one integer type, the integer is converted to its equivalent floating-point value and then the operation is performed.

When several operations are combined in a compound expression, standard algebraic conventions are followed, with multiplications and divisions have priority over additions and substractions, and equal precedence operations performed from left to right. Thus 1+2*3 has result 7, as the 2 and 3 are multiplied first.

Warning: There are some pitfalls if not careful about your expressions. For exmaple, if you are interested in the mathematical value ¾π, you could properly calculate it as

  float angle = 0.75 * PI;

    float angle = 3 / 4 * PI;    // will get you zero

    float angle = 3 * PI / 4;

Revisiting our top hat sketch

To conclude, we provide this updated implemenation of our original sketch that defines all of the geometry indirectly based on the current size of the screen. It uses the screen width and height to determine the center position of the face and its size, along with the subsequent placement of the other features of the sketch.

Although some of the calculations may take a bit more thought to understand, the advantage of this design is that a single change to the size of the screen in the first line is all that is necessary to make a scaled version of the image. For example, the left picture below uses a 600-by-800 screen while the right uses a 300-by-400 screen.