Variables Rules

All variables must follow these rules:

1. They must have a data-type at the beginning of their declaration.
2. They must start with a letter (caps or lower case), an underscore '_', or a dollar sign '$' (frequently used in jQuery and Python).
3. They can't contain spaces, but you can use underscores '_' to indicates spaces.
4. Caps count.  myVariable is not the same as myvariable.
5. Only a-z, A-Z, 1-0 (but you can't start with a number), underscore, and dollarsign can be used in the name.

Variable Data Types

The stuff a variable can hold is called 'data'. Processing recognizes all kind of different data, including:

Variables can also hold what's called Composite data types, like Arrays and Objects, which we'll get into later...

Cool Math Trick

Most languages will let you take a shortcut when you want to make a variable bigger or smaller with simple addition. Namely this:

int x = 1;
x =+ 10; // Adds 10 to the variable x. The same as writing x = x + 10;
x =- 15; // Sutracts 15 from the variable x. The same as writing x = x - 15;

And an even shorter notation for adding and subtracting 1 from a variable is this:

int x = 1;
x++;     // Adds one to x
x--;     // Subracts one from x

Testing in a For Loop

The test bit, in our example: i < N2, is always a relational expression. In this case is parses out to it the value in the variable i less than N2?

It goes back to our Algebra days. Here's the official list of relational tests:

Any relational test will evaluate to either true or false, so 5 > 3, or is 5 greater then 3 evaluates to true and 5 < 3, or is 5 less than 3 evaluates to false. for loops and if/then/else statements depend on these test to do the work the do.

The Power of Loops

Because a loop can run many times, it makes iterating changes to the statements really powerful and relatively easy. Let's change up our last block of code:

size(480, 120);
strokeWeight(8);
for (int i = 20; i < 400; i += 60) {
 line(i, 40, i + 60, 80);
}

Change it to:

size(480, 120);
strokeWeight(2);
for (int i = 20; i < 400; i += 8) {
  line(i, 40, i + 60, 80);
}

Change it again to:

size(480, 120);
strokeWeight(2);
for (int i = 20; i < 400; i += 20) {
  line(i, 0, i + i/2, 80);
}

Change it again to:

size(480, 120);
strokeWeight(2);
for (int i = 20; i < 400; i += 20) {
  line(i, 0, i + i/2, 80);
  line(i + i/2, 80, i*1.2, 120);
}

Notice that end x/y for the first line is the same as the start x/y for the second line.

Getting Fancy: Embedding a Loop in a Loop

When you put a for loop inside another for loop, it has the effect of multiplying the repetitions. The outer loop gets executed, say, 10 times, and the inside loop gets executed 10 times too, then you would have 100 repetitions! Let's try one:

size(480, 120);
background(0);
noStroke();
fill(255, 140); // Different from textbook, doesn't need to be inside loop
for (int myY = 0; myY <= height; myY += 40) {
   for (int myX = 0; myX <= width; myX += 40) {
      ellipse(myX, myY, 40, 40);
   }
}

To figure this out more readily, let's do the inner loop by itself and see what happens:

size(480, 120);
background(0);
noStroke();
fill(255, 140);
int myY = 0;
for (int myX = 0; myX <= width; myX += 40) {
    ellipse(myX, myY, 40, 40);
}

Since myY is not changing everytime with the outer loop, the inner loop only draws one row of circles. So if we add the outer loop, each change in the value of myY (0 thru 120 in 40 unit steps) will draw another row of circles.

SO the hard way to do this would be like this:

size(480, 120);
background(0);
noStroke();
fill(255, 140);
int myY = 0;
for (int myX = 0; myX <= width; myX += 40) {
    ellipse(myX, myY, 40, 40);
}
int myY = 40;
for (int myX = 0; myX <= width; myX += 40) {
    ellipse(myX, myY, 40, 40);
}
int myY = 80;
for (int myX = 0; myX <= width; myX += 40) {
    ellipse(myX, myY, 40, 40);
}
int myY = 120;
for (int myX = 0; myX <= width; myX += 40) {
    ellipse(myX, myY, 40, 40);
}

But it's much easier to put the outer loop modifying myY!

Let's mess around!

Let's add more stuff to the loop and see what happens!

size(480, 120);
background(0);
noStroke();
for (int myY = 0; myY <= height; myY += 40) {
   for (int myX = 0; myX <= width; myX += 40) {
       fill(myY+135); // Any value over 255 turns black
      ellipse(myX, myY, 40, 40);
   }
}

size(480, 120);
background(0);
fill(255);
stroke(102);
for (int y = 20; y <= height-20; y += 10) {
   for (int x = 20; x <= width-20; x += 10) {
      ellipse(x, y, 4, 4);
      // Draw a line to the center of the display
      line(x, y, 240, 60);
   }
}

How would we modify the code to draw this:

Or this?

size(480, 120);
background(0);
for (int y = 32; y <= height; y+= 8) {
  for (int x = 12; x <= width; x += 15) {
    ellipse(x + y, y, 16 - y/10.0, 16 - y/10.0);
  }
}