I'm back to talk more about variables.
It's an exciting thing that we've done so far, right?
This circle moves.
It's being drawn according to the built-in system variable,
mouseX and mouseY.
But this really only scratches the surface
of variables themselves.
A goal here that I'm going to get to-- it's
going to take quite a bit, we have a whole other topic
called conditionals to get there--
is to have this ball, this circle, move on its own.
The reason why I said ball is the sort of classic beginning
example is a bouncing ball.
What if I wanted it to move on its own,
and when it hits the edge, it bounces off?
So we'll get there.
But we're not even at the point yet where
it could move on its own.
How do I have it move on its own?
I need its X location to be something that varies according
to some algorithm.
Start here, then go here, then go here, then go here.
The current algorithm is, go wherever the mouse is.
How do I do that?
To realize this vision, I need to be
able to create my own variables.
Right now, there is a variable in draw, mouseX.
But that variable will always be the mouse location.
To create my own variable, there are three steps.
The first thing that I need to do is declare a variable.
In truth, JavaScript is such a friendly little language.
[LAUGHS] It lets you skip steps if you want.
But I think it's good practice to do
that variable declaration.
And I do that with the key word let.
In addition to the key word let, I need to name the variable.
The name can be anything I want.
I can make up anything.
I can call it unicorn, or rainbow, or kitten,
or softfurrypuppyvariable12.
Whatever I want it to be, I can make that up.
I'm going to try to pick a name that makes sense.
I will call this circleX.
I should note that there are certain restrictions
to variable names.
I can't start with a number.
I can't have spaces in it.
But for the most part, you'll figure that out just
through trial and error.
[LAUGHS] But it is good practice to name your variables
with a lowercase letter.
And if you're joining multiple words like happyPuppy,
I might say happy and then capitalized the P.
So I'm doing circleX with a capital X here.
Again, these are just conventions.
They aren't hard-and-fast rules.
But they will help you keep your code organized if you
follow these conventions.
I also need to put a semicolon here.
I should also mention that because this is JavaScript,
there's always more than one way to do something,
which kind of makes things confusing
and a little frustrating for me as a teacher.
But this is the current base way that I
like to declare a variable with the key word let.
In a moment, you'll sort of see why the word let is used.
But in olden times of JavaScript,
the key word var was used.
It actually makes a little bit more sense, var for variable.
And there's also a reason why you sometimes might
want to say, instead, const--
const or constant.
But I'm not going to worry about this right now.
I have a whole separate video about the difference
between let and var.
So maybe I'll get to that later.
But I just want to point that out
because you might see those in examples you're looking at you.
Whew!
So that was declare.
We're good with declare.
The next thing I need to do is initialize.
I want to have this variable, circleX.
I want it to store a value for me,
a number, the X location of the circle.
I need to give it something to start with.
So in Setup, when the program begins,
I'm going to give it an initial value.
I'm initializing the circleX variable with the value 100.
There's also something really notable about this.
Every line of code that I've written
so far in these tutorials, it just is function,
parentheses, arguments; function, parentheses,
arguments.
This is a different kind of line of code.
Now we have something called an assignment operation.
This is very critical.
We're going to use assignment operations a lot.
It's assigning the value 100 to the variable circleX.
Please store 100 in the variable circleX.
This leads me to think of how you can think of a variable.
It's almost like it's a bucket.
And you're like, I put the number 100 in it.
Is it a box of chocolates?
No, it's like a Post-It note, right?
Ah, I want to keep track of circleX.
I'm going to put this Post-It note on the wall over here.
I'm going to w rite 100 on it.
If ever that value changes for circleX,
I'll cross it out and write a different number on it.
There's lots, I think, for metaphors
that you could come up with to what a variable is.
It's a named entity that's storing a reference
to some data, some information-- in this case, just a number.
I've declared and I've initialized.
Now it's time to use.
I mean, do I need to use the variable?
If I declare a variable in the forest,
and initialize it, but never use it, does it make a sound?
[LAUGHS] I think I've used that in previous videos,
and I'm just regurgitating it.
But it's kind of an interesting philosophical question.
But I think the whole point here is we declare the variable.
We initialize it.
Of course we want to use it.
And so instead of mouseX, a built-in system variable,
I now want to use my own variable.
So those are all the pieces.
Declare with let, your own variable name.
Initialize with a value--
in this case, a number.
And then use that variable somewhere
where you would ordinarily just write
the literal value itself--
in this case, the circleX position.
I'm going to now add the code that I mapped out
over here on the whiteboard to this sketch.
Now I've left mouseY in there because I
could use multiple variables.
But just to make things easier to follow right now,
let me take out mouseY and just put it in the middle.
So now the circle's not going to move with the mouse, no mouseX
and mouseY.
Instead, the circle is where?
At location pixel, horizontal pixel 100.
If I change this to 150, it's going to move over;
to 200, it's going to move over; to 0, it's going to move back.
Whatever value I give it-- and notice
it's only moving because the sketch is restarting, right?
So this is just the initial value
of circleX, which leads me to fill in a little gap here
of a couple of things.
One is even though I have described to you declaration,
let circleX, and initialization, circleX = 100
as two separate steps, in most cases, practically speaking,
those can be done as one step.
It can be combined.
And I could just say let circleX equal 100
and take this out of setup.
This, by the way, is why the word let is used.
I want to declare and initialize a variable.
I want to let it be 100.
It's very nice, actually.
Please, I'm going to let you be 100.
It's not so commanding of it.
Let circleX equal 100.
There are some scenarios, and they'll
come up, where you have to do the initialization in setup.
It has to do with what's available to P5 and not,
depending on whether you're outside setup or inside setup.
Hopefully, this will become more clear
as I get through future examples.
But I should note that me saying let circleX outside of setup
is very important.
This is what's known as a global variable.
It is available to the entire code,
all of the events, the Setup function and the Draw function.
circleX can be used anywhere.
If I were to just put, let circleX = 100 in Setup,
I'm getting an error.
That error is uncaught reference error, circleX is not defined.
It is defined!
I defined it there in Setup.
But if I define a variable, if I declare a variable in Setup
with let, I can only use it in Setup.
So I want this to be a global variable.
This will also be something that will
be addressed in future videos.
And for now, I might just say put all your variables
at the top.
Make them all global.
I imagine you might be a little bit frustrated
watching these videos.
I'm talking, and talking, and talking,
and still the circle just stays right there in one spot.
After all this, it's not even moving.
And even so, just moving a little bit--
I mean, I think this is really exciting stuff.
But I could see how it's a slow process here.
We've got to build up to more dynamic examples.
How do I get it to move?
Well, I was able to change its location
by giving it a different initial value than restarting
the sketch, and then a different initial value,
and then restarting the sketch.
Instead, what I want to do is I want
to keep giving it a new value inside of Draw.
And if I were just to speak this command
in English, or in pseudocode, I might say, increment circleX
by 1 pixel.
Every time through Draw-- remember, Draw is looping--
set circleX to itself plus 1.
Go to the next pixel.
And in fact, I can do that with a singular statement.
circleX equals circleX plus 1.
And off it goes.
Now, this might look like something weird.
Like, what?
circleX does not equal circleX plus 1, that's wrong.
But that's not what this it This is an assignment operation.
The right-hand side is evaluated.
So if circleX is 100, 100 plus 1 is 101.
And then that value is then stored in circleX.
Then Draw loops, and it comes back to it again.
101 becomes 102, and stored back in circleX,
and so on and so forth.
If I change this to 5, it's going
to move faster, 5 pixels at a time.
Goodbye, circle, who's never coming back!
So again, how do we get it to come back?
That's going to involve a conditional statement coming
in a future video.
But for now, this is the idea.
I want to create variables, initialize them, and manipulate
them as the program runs.
Maybe I'm going to add back function mousePressed.
Now, notice-- before, I put mousePressed below Draw,
and now I put it above.
The order of these functions actually
doesn't matter as long as they are
self-contained blocks of code.
But here, I could say, let's reset circleX back to 0.
So every time I click the mouse, the circle starts back at 0.
This is me creating some data, manipulating it
as the program runs, changing its value
according to different events--
interactivity right here.
So what's next for you?
I would say as an exercise, before I move
on to whatever's coming next--
I'm not actually entirely sure.
[LAUGHS] I mean, I know what's coming in the long term.
But in the very short term, just look at the next video.
You'll see.
Try to make more variables.
What if you make a variable for the circle's Y position,
for its color, for the background?
And you manipulate those.
Can you use the sides?
Can you have the circle grow, and every time
you click the mouse, have it start back over growing?
There's so many things you could try,
maybe have three or four variables?
And can you practice declaring, initializing,
and using them all?
What kind of animations can you make?
I can't wait to see.
Please share them with me.
And I will see you as I move forward
and eventually get that circle to come back to us.
Come back, circle!
[MUSIC PLAYING]