Welcome to another p5.js video.
This one, this is a really exciting, big moment.
I don't know if you're aware of this.
First of all, you might be wondering,
I aged about 2 and 1/2 years since the last video
in this series, not to mention the fact that one
of those years was 2020.
Maybe you're watching this in the future
where I've redone the previous videos
and now I look much younger.
I have no idea.
The point is, I redo videos from time to time.
Here I am in a big important video about what is a variable.
And in this video, for you, for the very first time,
things will animate in your p5.js canvas.
Every sketch that I've shown you so far has two blocks of code,
a set up block and a draw block.
Now, these are actually known as functions.
They're functions that I am defining in the code, the setup
function, the draw function, and a lot
more about defining your own functions
and reusing your functions and all of that
to come later in this video series.
But for now, we can think of these blocks of code
as defining the flow of the program.
The setup function happens once and only once,
the moment the sketch begins.
This is why createCanvas goes there,
because this is the kind of thing you want to do
at the beginning just once.
You don't want to make canvases multiple times.
And you don't want to make a canvas at the end.
That wouldn't make any sense.
So the flow of the beginning of the program
is setup, make the Canvas.
Now while we're not making use of this fact
that I'm about to reveal to you, draw happens forever.
Another word for that might be in a loop.
Whatever code is in draw, lines of code execute in order.
Do the first line, background.
Then draw an ellipse.
Now we're at the end of draw.
Go back to the first line of code.
Do it again.
At the end, go back.
Do it again.
This is a forever loop.
Now of course, it has to stop at some point.
Maybe you close the browser.
You turn off your computer.
Don't throw it out--
I was going to say you throw it out the window.
Don't do that.
It's a nice computer.
You don't need to throw it out the window.
This is going to be the moment when you really
love your computer as it starts to animate.
But this is a strange thing.
Why would it work this way?
Why would we do something once and then
have other code happen all the time?
Now this is not necessarily how all software works.
All software does have a flow and order of operations.
But this flow, this style, is very common for an animation
program, for a graphics program, and I'm going to show you why.
Let's take a look at where I left off
with my simple p5 example.
So I'm going to simplify it even further.
I'm going to get rid of this rectangle
so that there's just an ellipse.
Let me put it in the center and kind
of get rid of the idea of color just for a moment.
I just have a simple sketch with one circle in the middle.
And we can see the flow of the program is happening.
It's running.
Set up happened a while ago, because I talk way too much,
obviously.
And it created that canvas.
And now it's drawing the background and the circle,
and the background, and the circle, and the background,
and the circle.
It's happening over and over again.
But we are not harnessing the power of that fact.
We're not seeing anything change.
In order for us to understand better how this flow is really
working, we need something that changes,
something that varies inside of the draw function itself.
This is why--
I'm using that word very intentionally--
we're talking about variables.
I need to add a variable to this sketch.
So I definitely want to take maybe
a deeper look at what it means to be a variable, probably
in the next video because there's
going to be a bunch about this, but just to kind of an entry
point into this, let's think about what would it
mean for me to be able to somehow move
this circle with my mouse?
What's defining where the circle is?
The number 200 and the number 150.
Those are literal values.
That number 200 can never be anything but.
It's a very sad life for the number 200.
It can never be anything but the number 200 itself.
But if I could just sort of describe in there
instead something about where the mouse is--
I'm just going to write the mouse's x position.
It made all sorts of weird colors happen.
It's giving me an error.
Obviously, I can't do that.
What I can do, what a variable is, is it is a named entity.
It is a key word that stores something.
And in this case, I want it to store a number.
Variables can store all sorts of kinds of things.
And we're to see that as we go on.
But in this case, I want something
that stores, that references, a particular value.
And in p5, we get some variables for free.
And one of those variables is mouseX.
And another one, by the way, is mouseY.
In the p5 reference, we can see this described quite clearly.
The system variable mouseX always
contains the current horizontal position
of the mouse relative to 0, 0 of the canvas,
meaning the moment I right mouseX
here, and the sketch reruns, look at that.
You see where my mouse is?
That's where the ellipse is.
I'm going to move it over.
That's where the ellipse is.
So what's really happening here?
Did I lock the ellipse to the mouse in some magic way?
No.
The draw loop is happening over and over again.
Every time, it's always getting the dynamic current value
of mouseX.
The circle's x position doesn't have to be where mouseX is.
For example, there's no reason why I couldn't change and put
mouseX here for the y value.
And now as I move my mouse left and right--
this makes me very uncomfortable-- it
moves up and down.
But think about the kinds of interactions
you might be able to do.
For example, there's no reason why I couldn't put mouseY here
in fill.
So as I move the mouse up and down,
the circle gets darker up and brighter as I move down.
So this is really your starting point.
What can you do just with the system variables
mouseX and mouseY.
One thing you could do is actually create
a simple painting program.
And so I'm going to just add a few more things to this
and leave you with that as a prompt
before you come back to the next video.
I'm going to go back to something more traditional
and just make the fill 255.
I'm going to put the ellipse at mouseX and mouseY.
And I'm going to just make it smaller.
And incidentally, I don't remember whether I covered this
before, if it's a circle, I don't
need to have both arguments.
I could just put in the one argument as the diameter.
And also I could change this to circle.
Now I'm going to do something slightly unorthodox.
I'm going to take this background, call to background,
I'm going to remove it and put it into setup.
I've run the sketch again.
I'm not going to move my mouse over there.
I want you to imagine what do you think is going to happen.
Pause the video, and see if you can
predict what's going to happen.
[TICKING]
[DING]
Are you back?
Here we go.
Look at that.
Why am I seeing the trail of that circle
as it smears across the canvas?
The reason why I was seeing it move across the canvas
is I was always covering up where it was previously
by drawing the background over and over again
in Draw, background, circle, background, circle, background,
circle.
So you see that illusion of motion.
If the background is only drawn once in set up,
suddenly, I'm not erasing anymore.
I'm seeing where the circle, is and where it is now,
and where it is now, and where it is now.
So this idea of flexibly being able to
decide what order things happen and when they happen.
I can now create a bit of a painting program.
I might want to do a couple of things to this.
For example, what if I want to give it a little bit of alpha?
So now, you can see the longer it's there,
that alpha builds up.
That allows a little flexibility.
You could play with size, play with color.
But there's one more thing that I
think is worth noting in this particular video
before I leave you to see what you make yourself.
I talked about these two blocks of code, setup and draw,
these two functions as defining the flow of the sketch.
In truth, these are actually just events.
The setup event happens once at the beginning.
The draw event happens continuously.
And this loop isn't necessarily continuously
at some arbitrary rate.
It's locked to 60 frames per second.
That's the native default. This will run the draw loop
60 times per second.
It could run slower if you add too much stuff in draw
and it can't keep up.
But that's where it gets locked to.
There are many other events that we can define.
I've written another function here, mousePressed.
This is an event that sits and waits.
It might never happen.
You could define the mousePress function
and have it never happen.
It only happens if you press the mouse, if you click the mouse.
There's a mouse released event and many more
than you could look up in the p5 reference.
But this is a good place to get started.
Setup happens once.
It's ready to go.
Draw is just like, I'm going to happen as much as I can.
And the mousePressed function, it's very patient.
It just sits and waits.
What happens if I take background and put
that in mousePressed?
I've added mousePressed.
Note, it's the same syntax, function,
the name of the function, parentheses, curly bracket,
close curly bracket.
I'm going to take background and I'm
going to copy it into mousePressed.
Now as I move the mouse, I could try to write my name.
And I'd be like, oh, I messed up.
I want to click the mouse and voila.
I've drawn the background over.
It I've erased what was there previously.
I'm realizing there might be one other question that's
in your head that I'm anticipating.
Let's go back to just for a moment
where background was, in fact, in draw.
If it's drawing the background, and then the circle, and then
the background, and then the circle,
why isn't it flickering?
Why don't I see background, circle, background, circle,
background circle?
Maybe it happened so fast that I don't see it.
But that's not really the case.
Let's say I just put background and put it at the end of draw.
Now that circle is gone.
I will never ever see it.
So on the one hand, this kind of leads
me to realize that background is something of a misnomer.
It's well named, because really, as we're using it,
the way we're using it is to draw
a solid color in the background of the sketch.
But ultimately, it's just cover the sketch
with a particular color. p5 and most animation systems
work this way.
It has a moment where it chooses to update
what it shows to the viewer.
And that happens at the very end of draw.
So no matter what you have in draw,
you don't see the internal changes.
You only see the end result.
So taking background back out, I'm now back
to the painting program.
And there's plenty of things you could try, I think.
But just as a little prompt before you
get to the next video, how can you expand on this idea
with your own design ideas, size, color,
changing what mouseX and mouseY actually apply to?
There's lots of possibilities there.
And I look forward to seeing what you make.
See you in the next video.
[MUSIC PLAYING]