6.3: Constructor Arguments with Classes in JavaScript – p5.js Tutorial


[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]

66 Comments

Add a Comment

Your email address will not be published. Required fields are marked *