[DING]
Hello.
OK, so here's the thing--
hopefully by now you kind of have a sense
of the principle of encapsulation
and the idea of making a template to create objects--
item number 1.
Item number 2 is maybe you have a sense of what
the syntax for writing a class is--
that template, constructor, initializing
some variables that are attached to that object,
writing some functions that are the functionality
of that object.
The reason why you might want to do this is because--
one reason why-- is just to organize your code.
Ultimately, I could make this exact sketch
without all this class and constructor and all
that, I just could make some variables.
But one of the nice things about this
is I have two things on the screen.
I don't have two x's and two y's.
I just have two bubble objects.
Because imagine if these things have a speed and an x speed
and a y speed and a color and a radius.
I don't want to have 15 sets of variables for everything
I have to make.
I want one set of 15 to apply to a bunch of things.
But one of the things that I've done here
that's not really scalable or sustainable in a way that's
going to be as useful is what if I want these--
right now, they do move independently
of each other, which is nice.
But they always start at the same spot.
Now, I could change their starting rotation to be random.
But what if I want to specify where they should
start, or specify a size?
So one of the ways to do that is I often
want to say, ah, what I would like to do
is not just make a bubble, but I would
like to make a purple bubble, or a blue bubble,
or I would like to make a fast bubble, or a large bubble,
or a small bubble.
I want to be able to modify the way that I create an object.
And the way that I do that is by adding stuff inside here.
I add arguments to the constructor--
new Bubble with a radius of 50 and an x, y of 70 comma--
so let me do it the other way.
Let's imagine that what I want--
I want one bubble to be at 200, 200,
and I want it to have a radius of 40.
And I want the other bubble to be at 400, 200,
and I want it to have a radius of 20.
Now, one of the weird things about JavaScript
is, again, it just wants to work.
So I could add that, and I could run this code,
and it still works.
It does exactly the same thing.
So those numbers go nowhere.
But the idea is just like if you watch my video about passing
arguments to a function, I can pass arguments
to a constructor.
And if I do that, what I want is for the constructor
to receive those arguments.
So if I'm giving it three arguments--
200, 200, 40--
I need to define the constructor with three parameters.
I think I'm getting this right.
These are the arguments--
the values, the things that are passed in.
These are the parameters--
the variables that go inside the actual definition
of the function-- in this case, the constructor.
So I'm going to add an x, a y, and an r.
So I'm going to say this.x = x; this.y = y.
And you know what?
I'm going to create a new variable called r--
this.r = r.
And then in draw, I'm going to actually say--
oh, I almost just typed r times 2.
I almost just typed r times 2.
I need to say this dot-- and actually,
in p5, with the ellipse function, if you want
the width-- the diameter along the width and the height--
to be the same, I don't only need one value.
So now what I should do--
if I run this, we can see I should
be making two bubbles with different starting locations
and a different radii--
radius.
So those started at the right location.
The size looks the same.
What did I get wrong, here?
Missing semicolon, 40, 20, this.r * 2.
Yeah, they really should be different, right?
Oh, there.
I don't know.
I just probably forgot to save.
So you might be looking at this and thinking, oh, God.
This is the most awful thing I've ever seen.
You named those variables x--
the same as the this.x?
And actually, if you look at some
of my examples in previous programming environments
that I've used, I often will do something
called this tempX, tempY.
This is one of the most confusing aspects
of programming with classes and creating objects--
and then this would have to be tempX.
That would have to be tempY and tempR.
Is that these variables inside the constructor--
they're temporary local variables
just for the sole purpose of receiving the value
and quickly passing it to the variable that counts.
So this.x is the variable that counts.
It's actually the thing we're going
to use to keep track of where the object is,
and draw it and move it.
But I can't access it directly from up here.
There are ways that I could, but they would be weird,
and they wouldn't necessarily make any more sense.
So I want this 200 to go into this.x.
I need something to temporarily receive it-- like tempX--
and then quickly pass it to x.
But maybe I have a bad habit, but I actually
just like to name these the same name,
because I know which one's which by whether there's a this dot
or not.
But you will see that conventions like this,
or name them with an underscore, or an underscore after,
or with a temporary--
you can come up with your own style.
But it's important to realize that these are all just things
that I've made up-- like unicorn, fluffy, rainbow.
And this code-- which, in many ways, has its advantages--
unicorn-- I'm going to just play this whole thing out--
fluffy rainbow-- just to prove the point, here.
This works as well-- the same exact result.
The question is, what kind of variable naming convention
makes sense to your brain?
And being consistent helps, and there
are-- you could follow other people's conventions
and styles.
But I would say there are no real rules, here.
And if you want to name your variables unicorn fluffy
rainbow, pink fluffy unicorns jump--
whatever it is, I got it wrong, but
fluffyunicorns.fluffyrainbows, you should make a fluffy--
somebody make a fluffy rainbow p5.js sketch.
That's going to be awesome.
Just share it with me.
OK, so I got a little off track, there, but the point of it
is whatever I put in here--
if I say bubble 200--
it gets sent all the way to the constructor definition--
some variable.
It's like saying let x equal--
it's like I'm initializing x with this value, 200.
It goes in here, and this just--
if I have this here-- exists solely
to set this value so that I can use it later.
So that's the real purpose of these temp constructor
parameters-- to receive arguments and pass them
to variables.
Of course you can use them in all sorts of other ways.
You don't have to follow this exact design pattern,
but it is a typical, standard one.
So if you're watching this video, what
I would suggest to you is see what else you can add to this.
Can you add a color?
What's the difference between making
the color random for every bubble, versus initializing
each bubble with a color?
What other properties can you add to this?
Play around.
Can you add another function?
Like, can you add a function called
edges that do something when the bubble reaches the edges?
Is this even really a bubble?
What does it mean to be a bubble?
Have we answered that question?
I don't think so.
So try to add your own constructor arguments,
add additional constructor arguments,
and see what questions you have and let me know.
Thanks very much for watching.
[MUSIC PLAYING]