Variables

A variable is a named memory location that stores a value that can be retrieved and/or updated. This is the more general version of the other naming mechanisms we've used, like id attributes in HTML, column names in SQL, or cell references in Excel.

Unlike Excel (but actually much like SQL, although we didn't go into details there) a variable in Processing can store only a specific type of data -- the type that it was declared to store.

The following data types are available (which are the same as the Java primitive types):

• byte, int, long: integer data types of 1 byte, 4 bytes, and 8 bytes
• char: a single letter, represented using 2 byte Unicode.
• float, double: floating point (real number) data types of size 4 bytes and 8 bytes
• boolean: true or false
• color: (Processing-specific) a color value (really just the same as int with some special syntax)

We'll see many more data types that are built out of those ones.

Processing pre-defines many variables (although variable might be a misnomer, since many of them should not actually be directly assigned, such as width or height).

Some examples:

size(500, 500);  // Set window size
int x = width / 2;
int y = height / 2;
ellipse(x, y, 200, 200);
ellipse(x, y, 100, 100);
ellipse(x, y, 50, 50);

Control flow

We'll cover two statements used for control flow. The if statement is used for conditional execution. The for statement is used for iteration.

Example:

noStroke();
int diam = 20;
int numCircles = 10;
size(numCircles * diam, diam);
for (int i = 0; i < numCircles; i = i + 1) {
  if (i % 2 == 0) {
    fill(0, 255, 0);
  } else {
    fill(255, 0, 0);
  }
  ellipse(i * diam + diam/2, height/2, diam, diam);
}

A few terms

Variable

A named memory location that can be retrieved or updated.

Statement

The building blocks of a program. Can be built out of expressions. Some specific types of statements include declarations, assignment statements, and initializations (which combine the first two) as shown below:

int x;
x = 4;
float y = 3.14;

Expression

The building blocks of a statement, which represent single values. Expressions can be built out of smaller expressions, for example by using binary operators or by passing expressions as arguments to a function; for example: ellipse(height / 2, width / 2, 100, 200);. Expressions and statements are built according to a grammar, which we don't need to know about for most programming, but may help you think about how to write programs.

Side effects

Actions caused by an expression that are not reflected in its return value. For example, drawing or printing to the screen.

For most purposes (and in many programming languages, but not Java or Processing), a statement and an expression can be thought of as the same. The basic distinction is that an expression can yield a value, while a statement does not -- a statement is executed only for its side effects.

Examples

size(600, 300);
smooth();

stroke(255, 0, 0);
strokeWeight(10);

int centerX = 200;
int centerY = 150;
ellipse(centerX, centerY, 200, 200);

centerX = 300;
fill(255,255,255,220);
ellipse(centerX, centerY, 200, 200);

String name = "Joel";
fill(0, 0, 255);
textSize(20);
text(name, centerX, centerY);

size(500, 500);
smooth();

// Circle diameter
int diam = 50;

// Repeat 10 times
for (int i = 0; i < 10; i = i + 1) {
  println(i+1);
  fill(255);
  ellipse(100, diam * i + diam/2,
    diam, diam);
  fill(0);
  text(i, 100, diam * i + diam/2);
}

// Different version
// y = y coord of circle center
// We define our repetition by saying
// we have a starting point, a goal,
// and a step size.
for (int y = diam/2; y < 500; y = y + diam) {
  fill(255, 0, 0);
  ellipse(200, y, diam, diam);
  fill(0);
  text(y, 200, y);
}

size(500, 500);  // set window size
smooth();  // make drawing nicer

// Circle diameter
int diam = 50;

// Fill screen with 10 rows of 10 circles each.
for (int x = diam/2; x < 500; x = x + diam) {
  for (int y = diam/2; y < 500; y = y + diam) {
    ellipse(x, y, diam, diam);
  }
}

Readings

Read chapters 4-5 in Getting Started with Processing. Run the examples as you go through. The examples can be loaded directly from the Processing environment by looking in the File/Examples menu.