So in this video, I want to look at the topic of functions
and reusability.
What does it mean to call a function multiple times?
And why might you do that?
And so to illustrate that, I want
to start with this particular example.
Now, this example is from the book
Getting Started with P5 JS.
It's by Lauren McCarthy and based
on the Getting Started with Processing book
by Casey Reas and Ben Fry.
So if you're looking for an additional resource,
that's a great one for you, and there's
many more great examples like this one.
The reason why I'm using this example is look here.
So this robot creature thing is a rather elaborate design.
It involves a whole bunch of circles, a rectangle, a bunch
of lines, maybe some dots--
I don't know-- lots of lines of code--
a lot.
So you can imagine if you knowing
what you might have known a day or two ago
or before you watched this video to draw that robot design four
times, there's so much that you would have to do.
You have to have all of that code for the entire design
four times, and your code would get very, very long.
So there's got to be a better way.
If you could just figure out what
it means to draw that robot, package that into a function,
you could call that function multiple times.
And then you could think of, what
are the parameters by which that design can
be altered or changed?
For example, one parameter is where is it on the screen?
What's the sort of xy of the center of the robot.
Another might be its neck length or its body length.
So you can see each one of these robots is slightly different.
And if you look at the code, the draw robot function
is called four times with four arguments.
And I'm guessing they are x location, y location, neck
length, body length, something like that.
I guess I've looked at this before so not just
totally guessing.
But you get the idea.
So this is essentially what I want to look at in this video.
I'm going to talk through the pieces of how you define
and call a function when there are arguments
and then kind of build a much simpler, less visually
interesting version of something like this.
OK, so let's come back over here for a second,
and let's imagine something different.
Let's say you were going to build a flower,
and it might be something like this that might be like erect.
I don't know what I'm doing here.
I was trying to draw a flower.
It's pathetic.
So the point is let's say you wanted to have a flower.
So let's think about what might be
the parameters for this flower.
I don't know what I'm doing here,
but the parameters might be location.
We can think of the xy location.
Let's be really simple about this,
and let's just think we're not going
to get a number of petals.
So we need an xy location and how many petals
should appear on the flower?
So we know before that the syntax for defining a function
is function, the name of the function--
I will call it flower and then open and close parentheses.
Now when we looked at the setup function, draw function,
those never had any arguments.
You never say set up with this argument
or draw with this argument.
But with the robot function, you do.
So you draw the robot at this location with this neck
length with this body length.
Here I want to say draw this flower at this x and this y
with this number of petals, which means
you need to put something here.
And the things that we put in between these parentheses
are known as parameters.
They are the parameters by which we
define how that flower is drawn and really how that function is
executed.
And those parameters are essentially variables.
It's up to me to name them.
I'm going to have an x, a y, and a variable called petals.
So those variables-- the names for those variables
go in between those parentheses separated by commas.
And then I can start to use them.
For example, I can say ellipse.
Draw an ellipse at that xy with some width and height.
And then maybe the petals--
the number of petals--
I'm going to use in some sort of for loop.
I don't know.
I'm imagining some complex scenario
now where I'm rotating around and drawing a bunch of circles.
But you can see that the x and the y
are used here on the ellipse function.
The variable petals is used here in this for loop.
So what these parameters are, they're
essentially like variables that are local to this function.
It's as if at the top of the function, I said
var x, var y, var petals.
The question is when we looked at variables,
we said, OK, well, you have a variable.
You need to declare it, var x.
Well, this is like declaring it-- declaring it
as a parameter to this function x.
And then you need to initialize it.
Var x equals zero var x equals 200.
So where does x get its initial value?
And this is the new piece here xy,
and petals get their initial value
from where you call the function.
So if I were to say flowers 200 comma 100 comma 10,
it's the equivalent of saying here--
I'm not saying this--
var x equals 200.
So that's what we're writing because 200 goes into x.
100 goes into y.
10 goes into petals.
And by the way, these are what are known as arguments.
So the terminology, it's easy to confuse these,
and you don't have to worry about this
too much because the program's not
going to care what you're calling what to your friends
when you're talking about your code.
But the variables that you define
in the parentheses in the function definition,
those are called parameters.
They're the parameters to the function,
and the arguments are the things that
get passed into the parameters, 200, 100, comma 10.
And by the way this is just how p 5 works.
When you say ellipse, you say xy or width and height,
and then the ellipse function is defined somewhere function
ellipse xywh--
something like that.
And I, by the way, wrote flowers.
This is flower, flower.
The wonderful thing here is once you've figured out
this elaborate code for drawing this elaborate beautiful,
wonderful flower design, you can then have more than one
on the screen.
So you could say now flower 300 comma 50 comma 20.
So you have a flower in a different place
with a different number of petals.
So this is essentially the exercise
that I think you should try it for yourself is build yourself
some kind of interesting design, see if you can give
that design parameters, define it in a function,
and call that function multiple times.
And let's come over here, and let's look
at just kind of doing that quickly in an example.
I've gone up by self-enforced 10-minute limit.
So let's look at this.
This is again.
I call this the lollipop.
I'm trying to do something just very simple here.
So this is just a single design.
It involves both a rectangle and an ellipse.
So now what I would like to do is write a function,
call it lollipop--
hope I spelled that right.
I'm going to put this code just right there inside the lollipop
function.
OK, and I'm going to run it.
Of course, we don't see anything because all I did
was define this function.
I didn't actually call it.
So the next thing that I'm going to do is call the function.
And now you see there is the hum flickering, which is not good.
Yeah, I'm back.
Hopefully, I fixed that camera problem.
What I did before in the previous video, which I just
took a chunk of code, put it in a function.
I'm calling that function.
And then when I run it, it executes the function.
But the point of what I want to do right now
is add parameters to this function.
And just to be overly simplistic,
I'm going to give this three parameters-- an x location, a y
location, and a size of the lollipop thing itself.
So to three parameters need to go
inside the parentheses as variables--
an x location, a y location, and because I'm
the least creative person ever, I'm
going to call this diameter-- so diameter meaning
the diameter of that circle.
So we know the ellipse, instead of saying 100,
I want to use the variable diameter.
The ellipse itself should be at the x and y location.
And the rectangle itself should also
be at the x and y location.
But I'm going to say minus 10 here because that's helping me.
The rectangle is 20 pixels wide.
I'm going to center it a little bit over.
So now if I run this, first of all,
I'm going to get an error, which if you read down here,
it's going to say--
well if my font is too big, and I'm failing to see if I can--
says looks like an ellipse, receive an empty variable,
bla, bla, bla.
So it can't figure out what to do because I called lollipop
without the proper arguments, and so it
doesn't know what x is.
And it's trying to call ellipse with an x,
but the x is undefined.
So this is going to cause problems.
If your arguments don't match the parameters,
things will break.
There's all sorts of clever ways around that.
But for right now, if I've got three parameters,
I want to have three arguments here.
So I want to have the lollipop at say 100 comma 100
with a diameter of 50.
And you can see there's lollipop.
And then if I want to have this line of code again,
at 300 comma 200 with 150 diameter,
there now I have two lollipops.
And you can see this shows how untalented
I am in that that's why I had to pull
that beautiful interesting, intricate robot example.
But you see the point here.
You have a function.
I have defined a function.
I made it up.
It's called lollipop.
It's my own.
It's my own function.
It takes three arguments.
I can do whatever I want with those arguments,
execute code, execute drawing stuff,
and I can call that function then multiple times
in different places.
So I think this is hopefully a useful exercise for you
to try something similar.
Hopefully, you have more talent than I do,
can come up with something different than
this pathetic looking lollipop.
And I have two more videos that I want to make.
One will look at a function that returns
a value, which is a key thing.
And the other thing I want to do,
which is a little bit crazy, is look
at what happens if I put a function inside an object.
OK, so I will see you in the next video.
I won't see you.
I would like to see you--
goodbye.
I can't stop here.
I have to stop here.