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.
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.
