Functions, in this video I'm finally
going to take the time to go a bit deeper into what is
this thing that's a function.
We've seen functions, and called functions.
We kind of defined functions.
There's a setup function, the draw function.
What is all this stuff?
And what does it mean to define your own functions
and call your own functions?
And why might you want to do that?
Now functions as a whole in JavaScript is a huge topic.
And they're kind of the fundamental, foundational
building block of JavaScript in many ways.
So hopefully, there's going to be lots more
to discuss in future videos and topics
as many different gaps are filled
in in terms of what functions can do
and how they're used in JavaScript.
But here, right now, I just want to start with the very basics,
calling a function and defining a function.
Now this is not a new topic.
You, I, all of us who have done anything in p5 and JavaScript
before have been doing this a lot.
So for example, this line of code here, ellipse 100, 100,
50, 50, this is calling a function.
Calling-- executing a function.
Draw an ellipse in the window, in the canvas.
This, when I say function setup and then
presumably put some code in here,
this is defining a function.
I'm defining a function named "setup",
and this is the code that goes inside that function.
Now if you're looking at these two things,
these are things that we've done in so many different examples.
But there's a strange little fact here.
In the examples, I've called the ellipse
function many, many times.
But I never personally defined the ellipse function.
The setup function, we have the inverse thing
that's going on here.
I've defined the setup function many, many times
in many examples.
But I've never actually called the setup function.
This is because both of these functions
here are special functions, special to p5.
One of the things I said that p5 is, p5 is a library.
It's a library of functions-- ellipse, rect, line, fill,
stroke, background.
So the definition for the ellipse function
doesn't live within us-- although maybe in some ways
it lives within us.
But it lives within p5.
It's part of the p5 library.
You and I, we don't have to define it.
It's defined in p5.
The setup function is also a special p5 function.
It's up to the user, the programmer, me, it's up to you
to define it.
But p5 knows when to execute it.
It executes it automatically when the page loads.
So both of these, they are a little bit strange.
You know, hopefully it was intuitive to you to use these,
but it's a little bit of a strange thing going on.
Define setup, p5 executes it at the beginning of the program.
Call functions, like ellipse, those
live with inside the p5 library.
So what does it mean to both define
and call your own function?
And so there are two reasons why you might want to do this,
and I'm sure there's many more.
But two fundamental reasons, sort of key principles
of functions--
one is modularity, right down here.
And the other, if I can dare spell this right,
is re-usability.
So functions are a way that you could organize your program.
You've got like hundreds of lines of code and draw.
Some of it's doing this.
Some of it's doing that.
You want to break that up into modular pieces.
You can put those into separate functions
and it helps keep your code rather well organized.
Re-usability-- I'm sure you've encountered this scenario.
You draw this very elaborate pattern,
and it has lots of different shapes in it.
You've figured out how to draw it.
And then you want to draw it again in the window.
Well, if you had a function that takes
care of all of that stuff, you could then call that function
twice, reuse that function giving it different parameters.
So these are the pieces that I would like
to look at in these videos.
And you know what?
I think what I'm going to do in this video is just start
with the modularity piece.
So I'm going to look at an example
and make that example modular.
And then in the next video, I'll look more specifically
at the re-usability piece.
Because this is where this question of arguments
and parameters will come up.
So let me see if I can just get through this idea of defining
a function, calling it, and making a program modular
and then move into the next video.
We'll look into this sort of re-usability question.
And then, there would be some other things.
So I have a list over here.
There's a couple of other things that I want to do.
So there will probably be three or four of these.
OK, so let's come over here for a second.
I have a simple sketch, if I can see it here.
I'm going to run it.
It's just a bouncing ball sketch.
It's a variation on one of the sketches
that I made earlier in a video about conditionals.
A couple of things that I'll point out are different.
One is, I turned the variables into an object.
So a lot of the examples might just
say bar x, bar y, bar speed.
Here, I'm doing this for a reason,
because later there's another aspect
I'm going to fill in here.
But remember, in JavaScript you can
make a variable that's essentially
a container for other variables.
These are actually referred to as key value, or name value
pairs.
The name is yspeed, the value is negative 3.
The name is xspeed, the value is 4.
So ball has all of these variables.
And you can see down here, if I want
to draw an ellipse at ball x or ball y,
then I just use the dot syntax-- ball.x, ball.y.
So that's what I have here.
I have a bouncing ball sketch.
Hurray.
Now if I look inside draw here, you
can see there are a few different kind of sections
of code.
I'm going to even add a line break here.
You could say like, OK, well this
is all the code that draws the circle,
the ellipse on the screen.
This is the code that handles what happens
if it hits any of the edges--
it inverts the speed.
And this is the code that moves it.
It changes its x by its xspeed, it changes its y by its yspeed.
So there's really three things.
There's draw.
There's display.
There's bounce.
And there's move.
So what I would like to do is turn this program
into a modular program and has three parts--
a drawing part, a bouncing part, and a moving part.
OK?
So we need to write three functions.
I lost my pen.
I need to come back over here, and I
want to just quickly review, or actually
layout for the first time what the syntax for defining
a function is.
And actually, we have that syntax already.
This is the syntax.
All we need to do is declare the keyword function.
I am going to declare--
I'm going to define a function, that's what that says.
Then the function needs a name.
Here the name was setup, but I might make the name like move
or display or bounce, depending on the functions
I intend to write.
Then you need parentheses.
Now, right now you notice the setup function,
the draw function just has an open and closed parentheses.
And that's what, for this particular example that I'm
making, we don't need to put anything
in between the parentheses.
That's where we have to set up arguments and parameters.
Parameters, sorry.
The word actually I'm looking for
is parameters here for the function.
And then, some code is going to go inside the function.
And that code is in between an open and curly bracket.
So the parentheses stuff I'll get to more in the next video.
So this is that syntax.
So now I could come over here, and I can scroll down--
let me scroll.
Let me move this over a little bit so I think you can see it.
I can scroll down.
So first, where do I want to define the function?
Now this is a very tricky question
because you can define functions kind
of all over the place in all sorts of crazy ways
in JavaScript.
But right now, I'm going to do something kind of simple
and just say, below draw--
you know, kind of like where I might
have put mouse pressed or key pressed or other functions,
I'm going to make up some of my own functions.
I'm going to say make a function called move.
And I'm going to make a function called bounce.
And I'm going to make a function called display.
So now you can see, I defined three.
Ooh, boy!
What are all these extra curly brackets?
I don't know where those came from.
But you can see I have now defined
three functions-- function move, function bounce,
function display.
Even though the words sound very like,
oh, those must be important-- move, bounce.
Those are not words that are part of the p5 library.
They are new words that I am making up
only for the purpose of this sketch, right?
I could've called it flibbidy-flew, or whatever.
It doesn't really matter.
I mean, it matters because you want to pick
function names that make sense.
And you don't want to pick function names that are already
used for something else.
But for the most part, you can pick whatever names
that you want, just like picking a variable name,
same rules apply.
So if we look, this is the code for moving the ellipse
around the screen, changing its x by its speed.
So I'm going to actually just cut this and paste it in here.
This is the code for the bounce, and I'm
going to put that in there.
And this was all the code.
And I'm going to leave background and draw,
because conceptually I feel like drawing the background is not
part of drawing that bouncing ball itself.
It's separate.
So what I really just want to do is
keep the code that's for displaying the ball itself.
So we can see now draw has nothing in it anymore.
There's just a move function, a bounce function--
and if I scroll down-- a display function.
And now let me stop and run this sketch again.
Nothing in the window--
canvas that is.
Nothing in the canvas.
Why is there nothing in the canvas?
All the functions are there.
So all we did was define the functions, right?
All we did was define the functions.
The flow of the program--
setup runs once, draw runs over and over again.
The only thing that's happening is background.
Now setup and draw, I never had to call those functions
because they're special p5 functions
that p5 executes in order to control
the flow of the program--
setup once, draw over and over again.
But any other functions that I define,
I've got to tell the program when
to make those things happen.
So I could put them all in setup,
but I don't want to move the ball in setup.
I don't want to display the ball in setup.
What I want is to have those things happen
every time through draw.
So I want to move--
whoops-- bounce, and display.
Now this, by the way, is the syntax for calling a function.
And notice, it's no different than the syntax
for calling background.
Background, we're executing it.
You can see it's colored red because it's
part of the p5 library.
Move, bounce, and display are functions
that aren't part of the p5 library,
but I have to find them below.
So now, this should be exactly the same program we had before.
I do want to note, however, that background requires
an argument, a color.
And move, bounce, and display don't require any arguments.
And this is an essential topic that I would like
to look at in the next video.
OK, so let's run this and see if this works.
Hey, it's the same exact program that we had before.
The only difference now is that it's modular.
There is a move part, a bounce part, a display part.
And this is useful for you for a couple of different reasons.
Number one, if I just want to test how things are working,
I could comment out this move function and run it.
And you can see the ball is no longer moving.
So if I have these functions--
if I have the code kind of organized into these pieces,
I can kind of control which pieces I turn on and turn off.
I can also say things to myself like,
oh, I just want to change the way the ball looks.
Oh, well, I know where I need to look.
And in a small program this seems sort of silly.
But in a much larger piece of software,
it might be hard to find the right part of the code.
But if you have that part of the code in a function,
I could say, ah, I wanted it to have some color, some fill.
So I know all I need to do is change the display function.
And now I added a fill to that circle.
OK, so this is the essential basics of defining a function
and calling a function and looking
at how you can take parts of a program
and put them in separate functions
to make a program modular.
In the next video, what I want to do is--
whoops-- I want to look at what happens
if you want to call a function multiple times, if you want
to take an idea, package it up into a function
and reuse that idea in different ways with different parameters.
And that's kind of a key piece as well.
OK, here we go.