Hello! Variables, p5js, Javascript!
Haha, I'm just speaking in single words.
Ok, this is a video where ... The topic I want to look at,
it's probably going to be a couple of videos,
is variables. But we gotta ease our way into it.
Before we even know what a variable is, let's think about
why ... what's missing from the programs that you are writing?
In the previous video I showed you how to draw a static thing to the screen.
You could make a rectangle, a circle, color it,
and in order to do that, before you can do that,
we had to add two 'things',
blocks of code I'll call them.
A block of code is something that begins with an open curly bracket
and ends with a close curly bracket.
A setup() block ...
and a draw() block.
Each of these blocks, by the way,
is a function. Functions are these fundamental
primary elements of just about how everything works in Javascript.
So it's gonna be a key topic throughout all the videos that I make.
And a function is essentially a way of organizing a block of code,
a bunch of lines of instructions all together.
There is a bunch of setup instructions, there is a bunch of drawing instructions.
I said, whenever the last video was,
that setup() is a place where you put createCanvas().
And createCanvas requires two arguments: a width and a height.
Then you get this nice rectangle on the screen.
A canvas for you to draw to.
And when it's time to draw to that canvas you add some instructions
in the draw() function like
background()
background(0) will give you a black background,
and then perhaps you might add something like:
ellipse(50,50,75,25), it's a weird looking ellipse,
which would then draw, uh, it would more look like this,
anyway, something like this, right?
So this is what we've got so far:
there's a setup() block, and a draw() block.
Both of those things are functions.
There is a bit more to it than just this idea of
ah, createCanvas is in setup()
and this stuff is in draw(). there's a reason why we're putting
some things in setup() and some things in draw().
And it has to do with the flow of a program. (I hope I'm recording)
A flow of a program over time.
If you've ever used any piece of software, you know there's
an element of time there: you've launched the software,
you do some stuff, some more things happen,
you do some more stuff.
It doesn't just start drawing a picture and end.
So a p5 sketch, a browser session so to speak, happens over time.
And these functions are controlling that flow.
How do they control that flow?
setup() happens once, at the beginning.
When the program runs, the first thing that happens
is setup() and it happens once.
Which makes sense: you don't want to create a canvas more than once.
At the beginning you create the canvas once.
draw() however does something kind of interesting:
it runs the instructions, after setup() finishes
these instructions get executed.
And when it gets to the end, it goes right back to the beginning.
background > ellipse > end, right back to background.
This is now as a loop. And it essentially happens forever.
It happens forever until a user closes the window.
You know, there's obviously a lot more to this, you could stop and start it,
or have lots of other things happening, but this is our basic
beginning flow for the program:
setup() happens once, draw() loops over and over again.
I wonder how many times I have talked about setup() and draw() in my life?
Probably like 250 ... but I enjoy just as much this time
as any other time. By Gosh!
Ok, let's go over and prove this point here.
So here is a p5 sketch, and you can see that it is exactly
the same format that I looked at at the board:
there is a setup() function at the top, with createCanvas(),
and there are a bunch of drawing things.
This is a nice example that Lauren McCarthy prepared,
unknowingly, for me!
And if I run it you can see, I love these colors,
I love the pink circle, and I love the blue square.
Now it doesn't look like anything's happening over time
because it's just like a static picture.
It's beautiful but it doesn't move!
And maybe that's ok, maybe all we wanna do in life
is static pictures ... but assuming you wanna make things move
... it's drawing the same thing over and over again.
What do we need to do?
We need to vary what happens every time draw() executes.
draw() executes once, twice, third time,
fourth time, fifth time ...
What if something different happened?
What if the first time the circle appears up there,
then the second time it appears down here,
the third time it appears down here?
You'll have the illusion that it's moving down.
Or, even better yet, what if you could just say:
every time through draw() draw the circle where the mouse is?
So I could do something like: ellipse ... where the mouse is ...
Right? That should be fine.
I'm sure that's gonna work ...
I'm being facetious, I guess, but now ... you can see
that I have an error here.
So this is obviously like 'expected parenthesis'.
This is obviously not correct syntax.
p5, Javascript, ... cannot understand your regular old English language speak thing.
However, this is such a common problem, that p5 has as a part of its library
a variable called mouseX.
So I'm gonna put mouseX in here,
you can see that it's a nice purple color, right?
Because the p5 editor recognized that as a built-in keyword, a variable,
and what this means is mouseX is a word
that stands for something.
'100' is a number that stands for the number 100.
And it can always only be the number 100.
But mouseX is actually referring to something stored
in the computer's memory, that changes based
on how the user moves the mouse.
So if I run this program again,
we can see mouseX is 100, maybe 200, maybe 300,
so now we can see that no matter what I do ...
draw() is happening over and over again,
and it's always drawing an ellipse where the mouse is.
Wow, this is really ... I mean, if you haven't done this before
hopefully this is kind of interesting!
Ok, so there's a couple more things,
another thing we can look at here which is kind of amazing.
Now, what happens then if I take some other things
and put them in setup()?
Like this background() function.
I'm gonna put this in setup().
Remember: setup() happens just once!
draw() loops over and over again.
I haven't rerun it yet. This is what happened
when its background() was in draw(), right?
The background is always being filled, and then the ellipse is drawn.
Background is filled, then the ellipse is drawn.
What happens if the background is drawn only once in setup()?
You know, think about that for a second!
Now I'm gonna run this again.
Look at this! Every single ellipse, from the history
of moving, every time I moved it, is now visible.
This is because we only drew that yellow background once ,
and everything is drawn sequentially, so this illusion of something moving around
the screen only exists if you erase the background each time
through draw() before you draw the next thing.
So this is something that you can play with,
and in fact, this is a pretty quick path, if I get rid of this rectangle,
and I say like 'noStroke();'
and I also add 'mouseY' here
and I run this.
Now you can see I've made a painting program,
which is pretty nice, like, ah, maybe I give it
a little alpha,
which is the 4th argument,
maybe I make that a little bit smaller,
and I run it again.
You can see here is a little program that I can use to kind of paint
something with my mouse.
So this is actually a great stopping point for this video.
I wanna look in the next video at how you make your own variables.
Oh, actually, no, I have one more thing!
[ramble]
So in this painting program there is one more thing that I want to show you
that I think is really, really key.
Ok, so, let's go back to the board over here ...
and we have setup(), that is a function that runs ONCE,
at the beginning.
We have draw() that's a function that happens over and over again.
Let's add one more function.
And I don't have a lot of room on the whiteboard
so I'm just gonna erase draw() for a second to put it here.
And I'm gonna say: what if I have ... pretend draw() is still there,
and has a background and an ellipse,
I'm gonna add another function
and I'm going to call it mousePressed() { }
So I have now complicated the flow of the program even more,
in an interesting way.
setup() happens once, and only once at the beginning,
draw() loops over and over again, it's just draws like a crazy person!
[ramble]
mousePressed() is a very patient person, quietly sitting aside,
just waiting and waiting, in fact mousePressed() might
never ever happen!
The program could run and the code there will never occur.
So this is what's known, and this is also a key concept
in Javascript, there's gonna be so much more to this,
as an event!
When the user clicks the mouse
the code here is executed.
So draw is just drawing and drawing and drawing etc, the user clicks the mouse,
we take a break from draw() for a second,
we run the code in mousePressed();
and then draw() loops, loops, loops.
The computer is doing this, the browser
is executing all of these instructions.
So now you have a bit more sophistication here:
you have setup(), you have draw(), and you can always interrupt
draw() with mousePressed().
So let's go back to our program
I'm like: do you have any questions?
But there's no way for you to talk to me!
And I want you to talk to me somehow!
So now over here, what I'm gonna do to this program
is I'm gonna add function mousePressed() { }
And what should we put in mousePressed()?
How about we take this background function
and we duplicate it in mousePressed()?
So you can see when the program first starts we make the canvas,
we draw the background.
Then, always continuously, we just draw circles
wherever the mouse is, to let the user paint.
And then what can the user do?
Now there's a new feature here!
The user is moving the mouse ...
moving the mouse ... moving the mouse ...
and the user might say: Ha, the drawing is not so good.
I wanna erase it!
Clicking the mouse will then execute background()
and it's gone!
And now I could then try to draw a D,
and do something where I try to draw an A,
and I'm like trying to make my name ...
I don't know why I'm doing this ...
So this is pretty interesting: you've got some tools now,
you're missing a lot of things but with color, a bit more ...
Uh, what I would say now, as an exercise is:
use setup(), use draw(), use mousePressed()
you can draw more than just a circle!
See what kind of painting program you can make that allows
the user to interactively create a drawing on the screen.
That's a nice constraint for an assignment.
And in the next video what I will show is how to create
your own variables, beyond just what p5 offers to you,
like where the mouse is, so you can have something
move autonomously on the screen.
And I'm gonna make that video right now!
By Golly! No, it's like after this very long day of fighting with technology
that is nothing that you need to worry yourself about,
is kind of the last thing I wanna do.
But I'm gonna do it!
Ok, I have to hit stop.