VariableTutorial

Suppose Boss comes along and says "change the left coordinate of all the lines". What a pain. And then what if Boss says "change it back!" Ugh.

We introduce a variable, xL (shorthand for "left").

We could have called it anything we wanted, but xL was a better name than "smurf". (Why?)

Every variable has a declaration, where we tell the computer that we will be reserving the name xL for something that we care about.

Every variable also has an assignment, where we give it the initial value we want it to have.

We can then access the value stored in the variable, such as in each line command.

Now we can change all 7 lines just by changing one value! Let's change xL to 75.

It's a common shorthand to simultaneously declare and assign a variable in the same line of code.

We can make another variable for the right, xR. Now we have two variables!

We can even have the xR variable be functionally dependent on the value of xL.

In this example, if we change the value of xL,

the value of xR will always be 100 more.

Earlier I mentioned that variables can be declared, assigned, and accessed.

Variables can also be reassigned. Here I'm re-assigning the value of xL just after drawing the fourth line. It was initialized to 75, but then I clobbered it to 125.

You can even make self-referential assignments!

Here, after drawing four lines, I tell the computer that xL is now double whatever its previous value was.

(It's important that the variable not be undefined.)

So far we've been using variables to represent coordinates. But really we can use them to control just about anything.

I spaced my lines by multiples of 50. Why?

Because I happen to know my 50 times-table. But what if my lines looked better when they were spaced out by multiples of 43.7?

Reckoning these values is a special kind of hell.

Let's make a variable for spacing!

I'll call it sp for short.

Now the spacing is very easy to change.

This introduces a general principle of creative coding, which is that every constant is an opportunity for change. 

Here, for example:

• I defined the variable xL to be equal to the mouseX, plus 20.
• I defined the variable xR to be a random number between 300 and 350.
• I defined the variable sp to be functionally dependent on a sinusoidal function of the current time. Don't worry about the details of that math; I just wanted you to see what's possible.

These variables are changing over time because their values are assigned inside the draw() loop, which is executed 60 times per second.

Let's do a little trick.

I will introduce a variable called i, and use it to gradually replace the numbers that were counting up.

See how I'm using the self-referential assignment to change the value of i.

Since I'm just adding 1 to i each time, this is also called incrementation.

So —

A good rule in creative coding is that if you're doing something more than twice, there's probably a better way to do it. 

A good rule in creative coding is that if you're doing something more than twice, there's probably a better way to do it. 

A good rule in creative coding is that if you're doing something more than twice, there's probably a better way to do it. 

Let's introduce iteration!

Here we introduce the for-loop structure. I'm sorry it looks terrible. Let's talk about its pieces.

The variable i here has a special name; it's called the iterator variable. It's like the tally you hold in your head (or your fingers) when you're counting.

This part is the initialization. In this example, we're going to start counting at 1. But we could start counting at a different number:

for (let i=1; 

Here is the termination condition. We count so long as this is true. In this case, I'm gonna count so long as i is less than or equal to 7:

i<=7; 

The last thing in the parentheses is the "updation", or method of updating the counting variable. This is how we're going to count. We could be counting by twos or tens. Instead we're going to count by ones, always adding one to our previous value:

i=i+1)

Finally, we're going to execute whatever is inside of the code block defined by the curly braces:

{ line(xL, i*sp, xR, i*sp); }

That's the stuff that gets repeated. The code inside this block doesn't have to use the i variable, but it often does. Indenting this code helps us see the structure.

You might sometimes see

i++

instead of

i=i+1

Don't be alarmed, these both mean the same thing. Does anyone know why incrementation is sometimes written with this shorthand?

By the way, there can be all kinds of different stuff inside the for loop. For example, now I'm also drawing a small circle, when the counting variable is less than 4.

Congrats! You just learned the first week's material for most introductory programming courses.

Let's take a short digression to discuss scope.

It matters where in the code a variable is declared. Here, the variable xL is scoped within the draw() block.

Clicking causes an error, because the code inside the mousePressed() function is unable to know about xL; xL is "hidden" from anything inside mousePressed(). The only code that knows about xL is inside the draw() block.

Now, I declared xL at the top of the file. xL is scoped globally, outside of all the other blocks. Every block of code is able to know about it.

The code inside mousePressed() is able to know about the (now) global variable xL, and modify it.

Progressive modification of a global variable makes some kinds of animation possible.

This wouldn't work if xL were repeatedly declared and assigned to 75 inside of the draw() loop.