OK, so I'm back here, and I'm talking about variables,
I hope, if I can keep my brain working and churning and making
sense with the language and the speaking thing this will work.
OK, so what did we-- we looked at in the previous video,
we made this kind of big leap in our programming lives, right?
We established the fact that there is a flow to a program.
What is that flow?
Well, there's, at least for p5.js which is the environment
that I'm looking at in these videos,
the flow is defined by two functions, setup function--
which happens once and only once--
draw function which loops over and over again.
Typically, a thing that you might do in Setup
is create your canvas.
That happens just once when the program starts.
Typically, what you might do with draw-- which loops over
and over again-- is draw stuff.
And we establish the fact that if, instead of using a number,
a hard-coded number, we put in a variable--
a word that stands in for a number--
then each time draw executes, if that number changes,
something different might happen.
And that's how animation happens on the screen.
The ellipse is drawn where the mouse is.
Then the mouse moves, and it's drawn where the mouse is.
Then the mouse moves.
So this was an exciting first step
into the world of variables, but here's the thing.
There's going to be a lot more that you
want to do besides just move things with the mouse.
And even if there's other built-in variables,
like you could know how many times this draw executed.
There's a built in variable called FrameCount.
But ultimately, what you will need
is your own variables, variables that you make up,
that you define, that you bring into this world.
You're going to bring variables into this world,
and that's going to open up a lot of possibilities
that you didn't have before.
So, for example, right, this circle
is moving across the screen according to the mouse.
What if you want that circle, like,
I'm not even touching the mouse.
I'm not even touching it.
I just opened my program and that circle
just moves on its own.
Magic, right?
So this is our first step.
This is what we want to do.
Instead of using a built-in variable, we want--
I want to use our own variables.
So how do we do that?
So we need a couple steps.
Step one is to declare the variable.
I have to declare.
I declare.
I do declare, solemnly, on this day,
the 3rd of September, 2015, that I declare
that this variable will exist.
Number two is, we need to initialize.
We need to say, a-ha.
In addition to the fact that I declare this variable,
I will give it an initial value.
And then the third step is--
I guess this is optional to use the variable,
although it wouldn't make a lot of sense
to declare and initialize a variable if you
didn't intend to use it.
So how do we do this?
Declare is actually something quite simple.
All you have to do is write the term var, V-A-R,
which stands for variable.
This is how you do it in JavaScript.
Other languages it's different, var.
So this means I am now about to declare a variable.
The next thing I have to do is give that variable a name,
and that name can be absolutely anything I choose.
Rainbow is a nice name for a variable.
But ultimately, what you want to do
is you probably name it with something
that is a term that is associated with what you might
intend the variable to do.
So what I intend to do with this variable that I'm declaring
is use it as the x position of this circle.
So I might say circleX is the name of my variable.
I'm just going to use the word circleX.
And typically, I'm just kind of being long-winded.
You could even just name it x.
There's a bunch of rules, like you can't start a variable name
with a number and you can't use strange characters
in a variable.
But you'll sort of figure that out through trial and error.
Mostly, you just want to use words
and you can have any spaces.
So declare and name.
Our declare is saying var and the name.
So now I could say circleX instead of mouseX.
So actually X, that's used, so I've done step 1
and I've done step 3.
Use the variable.
But if you think about it, I need a semicolon here.
If you think about it, there's a huge missing piece here, right?
Because what's the value of circleX?
I mean, it could be anything.
Right now, it's actually technically in JavaScript,
the value is undefined.
I think I'm right about that.
Someone will correct me if I'm wrong,
but it's undefined because I never gave it an initial value.
This is important.
It's not going to be able to draw a circleX anywhere
unless we give it an initial value.
And so I could right here in setup,
I could say circleX equals 50.
So this is giving it, initializing it.
And look at this statement.
This is called, this is something totally new.
The only thing, if you've only been watching these videos
and this is all you've picked up in programming,
all we had were function calls, createCanvas, background,
ellipse.
Now we have something new.
This is what's known as an assignment operation.
We are assigning the value 50 to the variable circleX,
and we would not have been able to do this
if we hadn't declared our intention to use circleX.
And notice our declaration is at the top
of our code and our initialization is in Setup.
The truth of the matter is, even though I showed you as these,
as two separate steps, I'm kind of showing this
to you because it's kind of interesting.
Like, look, that's something else
that you might do in Setup.
At the beginning of my program, I
want to have this variable value equal to some initial value.
But the truth of the matter is most of the time,
and in all of the examples you're going to see,
step 1 and 2 will be combined.
And so, I'm now going to rewrite this chicken scratch
sprawl as one line of code.
So I can both declare and initialize the variable
instantly by saying var circleX equals 50, OK?
So we've done something.
We've declared a variable, saying var, given it the name.
We've given an initial value.
We're using it to stand in for something in our code.
Let's go take a look at this actually work over here.
OK, so here's a little program.
If I run it, you can see what exactly what we have.
We have a ellipse being drawn only ever at location 50,
so it doesn't move.
So now let's add that stuff to our program.
So at the top I'm going to say var circleX, and by the way,
you can declare--
we're going to see later that you can declare variables
in other places.
But for right now, I think as a constraint,
I would like to say like all the variables,
they all get declared at the top.
Let's just use that as a constraint right now.
Then, I'm going to give it an initial value equal to 50.
And right here, instead of saying ellipse 50,
I'm going to say ellipse circleX.
And I'm going to run it.
Look at that.
Same exact program, only instead of just typing hard coding 50
there, I have 50s up here.
OK, now.
Let's just prove that this is actually working.
I'm going to say 150, and stop and start it.
Look, that circle is a little bit further.
Now I'm going to say 250, and look.
That circle is even a little bit further over.
So whatever the value of circleX is,
that's where that ellipse will be drawn.
OK, so at the beginning of this video--
I didn't actually say this, but the beginning this video
in my mind was, I would like to make that circle move by itself
across the screen.
You're watching all these videos,
and all you get is a little circle that
moves across the screen.
But it'll lead, hopefully, to bigger and better things.
How are we going to do that?
So let's come back over here for a second.
OK.
What I want to do is the following.
I want the circle first to be drawn at circleX equals 50.
So remember, draw, which is this function,
is looping over and over again.
It's over and over again.
It happens once, it happens another time,
it happens another time.
So first I want to draw it at 50.
Then, maybe, I want to draw it at 51.
The next time maybe I want to draw it at 52.
The next time I maybe want to draw it at 53.
Right?
Each time draw loops--
executes it again--
I want the circle to be drawn one pixel over
from the previous time.
So if you had to write an instruction
to do that, each time to redraw, what would you say?
You might say increment circleX by one.
At take 1, and 1 to circleX.
You might say add 5 to circleX and it'll move from 0 to 5,
to 10, to 15, to 20.
Right?
So how do we write that with code?
Here is a way.
Remember we had an assignment operation? circleX equals 50.
There's something weird you can do.
It's like the most common thing in programming,
but at first it might seem a little weird.
circleX equals circleX plus 1.
Look at that statement.
For a moment, you might look at that and think,
that's like a paradox.
That's impossible.
Like a number can't equal itself plus 1.
5 does not equal 6.
7 does not equal 8.
20 does not equal 21.
But this is not what we're doing.
I am not testing for equality here.
This is an assignment operation.
What I'm saying is, take circleX and set
it equal to the value of itself plus 1.
So if circle x is equal to 50, 50 plus 1 equals 51.
Now assign that value to circleX.
circleX is now 51.
Now run through draw again.
Take the value of circleX, 51, add 1 to it, 52.
Assign that value back to circleX.
So in an assignment operation, the right-hand side
of the equation is always evaluated and then assigned
to the left-hand side.
This is an incrementation operation.
We're just taking a variable and adding 1 to it
over and over and over again because draw loops.
So let's go over here, and see.
First, let's start circleX at 0.
So I just changed circleX to starting at 0.
And you can see, there it is at 0,
and now I'm going to add that line of code.
circleX equals circleX plus 1.
Now the circleX equals circleX plus 1.
Every time through draw, circleX will go up by 1.
Yeah.
It's moving.
OK.
So that really worked.
So, you know, I know this is like incredibly
simplistic and basic in terms of the result.
But this is the foundation upon which you can build
lots of interesting things.
Because there's a lot more math.
There's a lot more ways you can change a variable besides just
adding 1 to it.
There's a lot more places you could put variables
besides just in the x spot.
So what I would say to you right now is,
why don't you try making a variable for the y position?
Why don't you try making a variable
for the size of the circle?
Can you make the circle grow?
Can you make it shrink?
Can you make a color change?
See if you can make up more variables,
declare more variables at the top,
and put them in different places and try to do stuff to them.
The truth of the matter is, in order
to get kind of more interesting results,
you're going to need something that I'm
going to talk about in a future video, conditional logic.
Because, you know, here's the next logical thing, right?
That circle-- in the first place,
let's make it go a little faster.
Like circleX equals circleX plus 10.
Like, oh, where's that circle?
No, no, no, don't go away.
Come back, come back, back, back, back.
It's never going to come back.
But if I made some conditional logic like,
if it gets to the end, then turn around and come back, you know,
that's something I'm going to do in a future video.
But for now, just try to add a bunch of variables
and see what you can get.
OK?
That's good, but I'm going to--
there's going to be another video in a moment
where I'm going to show you a different way of organizing
your variables.
I'm a little skeptical about whether this is a good idea
or not, but I'm going to do it.
OK, this was a 12-minute video and I'm done recording it.