So hopefully by
now you've played a little bit with
variables in p5, maybe used mouse x, mouse y. You made up some of
your own variables. And I wanted to look,
actually, at an example. It doesn't really
have a lot more to it. This example is
just like the one I made previously where
I have a circle that's just moving across the screen. And you can see here,
how did I do that? There's an incrementation
operation right down here that every time through
draw, x goes up by 1. So first the circle's
here, then it goes up by 1, then it's here, then it's
here, then it's here. So that's how you move
something on the screen. Now, one thing I
did here is I added a whole lot of other variables. Let's have a y and a
diameter for the size of that circle, an r, g, b
variables for the background. So maybe I could do some things
like increment the red amount, decrement the green amount. And hopefully
these are the kinds of things that you've
been playing with. And what I want to
do in this video is show you a way to
organize your variables. And while it seems a little
bit silly and premature, perhaps, to be
like, this is fine, I'm actually not going to change
anything about this program, but I'm just going to change
the way it's organized. And this is going to set
a foundation for later as well as help
you to kind of just keep your code in a neat and
tidy way, which is something that I'm a little
too obsessed about, and I'm really working on it. I really am, I swear. OK. So let's think about
how that could work. So let's just say for the
moment that I have a variable x, and it has an
initial value of 0. And I have a variable y, and
it has an initial value of 100. And I have a variable
diameter, which has an initial value of 50. So these three variables,
they go together, right? I'm using them for that circle. The x I'm using
for the x position of that circle on the
screen, the y position I'm using for that
circle on the screen, and the diameter for that
circle on the screen. And while this relationship
of these variables is only something in my mind,
JavaScript doesn't care. The computer doesn't care. You could use the
variables for anything. I could plug this x value
into the color for something, and it would work. It might be helpful if I could
put all of these together. And there is a way
I could do that. I can say var, and
I could say circle. So I have the circle
on the screen, and I'm going to
call it a circle. And then what I'm going
to do is say equals, and I'm going to have an open
curly bracket and a closed curly bracket. So what's happening
is circle-- you can think of it as a container. What I would like to
do is instead of having three variables
floating on their own, I would like to not have
these three variables floating on their own, but
I would like to put those three variables inside
of this variable called circle. In order to do that, I'm
going to say x colon 0 comma-- boy, I really hope I'm getting
the syntax of this right because this is new for me. And if I get it wrong, I
can always make it again, and I'm sure somebody
on the internet will tell me if anybody
actually watches this. y colon 100 comma
diameter colon 50. Now, where the line breaks
are don't actually matter. The curly brackets
matter, the colons matter, and the commas matter. So you can see that,
just like setup-- function setup was
a block of code with a beginning and
an end, function draw is a block of code with
a beginning and end-- this variable circle
now has a block of code with a beginning and an end,
and circle is a container for these three variables. Now, container is actually not
the technical term for this. And what is interesting about
what you have just seen here is you have now learned
about JavaScript objects, JavaScript objects. The syntax for this is
JavaScript Object Notation. The way that you create
an object-- this circle is an object, and that
object has data inside of it. It has an x, a y,
and the diameter. And boy, are we
going to someday get to some really
exciting stuff where we see that an object can also
have behaviors and so much more to it. But right now, you can think
of there's my circle object and I'm visualizing the
circle object on the screen. I'm visualizing its data. It's x is 0, its y s 100,
and its diameter's 50. By the way, I'm not using
these terms by accident. What's super exciting about
this is learning this-- I'm not going to get to
this for many, many videos. This is exactly how you get
data from lots of things. So if you want to get today's
webinar into your p5.js sketch, you might connect to
some weather service that's going to send you data. It's going to send your
data exactly like this-- weather colon temp, weather
equals bracket temperature colon high temperature colon. So learning this syntax is
going to lay the foundation for just about everything
you do in JavaScript. Here is a JavaScript object. So let's now look at how we
implement this in the code. So I'm coming back over here. And instead of these
three variables, we're going to find out if I
did this correctly syntax wise. x colon 0, y colon 200. Oops, and I put a
semicolon there. Comma is actually correct. And then diameter colon 50. And I can put a semicolon there. So this is really
one line of code. It ends with a semicolon. But I'm breaking it
into separate lines. And I'm going to use p5
Editor's Autoformat, whoops, which you can see it sort
of autoformatted for me, and this is sort of a
standard way of doing it. So sorry, that was a
bit of a digression. But I did just
notice a little bug in the editor, which I'm
going to file as soon this video's over. So x is 0, y is
200, diameter's 50. So I can remove these
variables from the top, and I'm going to hit Save. And now I'm going to run this. Aha. Now, look at this. This is also a key
moment because, boy, are you going to have a
lot of errors happening when you run your code. So I'm going to zoom
in to the bottom here. And we can see,
what is this error? Uncaught reference error--
x is not defined on line 20. So I'm going to zoom back out. We're going to go
down to line 20. Ah, x is not defined. Well, x is no longer defined. I didn't declare a
variable named x. What I did is I declared a
variable named circle, which is an object, and
one of the fields, one of the pieces of
data in that object is x. So how do I get, then, that x
which is inside of the circle? And the way that you do
that is with something known as dot syntax. Right? When I just had this
variable, variable x, I just said ellipse at x. So now, what do I want to do? I want to draw the
ellipse at what? I want to draw the
ellipse at the circle's x, the x inside circle. And the way that I get there
is I refer to the variable name circle, and I get to that x
value inside with a dot, .x, circle.x. OK. Let's go back, now, over
here and come down to here, and I'm going to say circle.x,
circle.y, circle.diameter, and circle.diameter. OK. Oh, and look at this. I've already forgotten. I was going to--
almost ran this again, and it's going to say, uncaught
error, because on line 22, x is not defined because
I need to change this to circle.x and circle.x. So I run this, and we've got
the same exact program now. Again, nothing new
has happened here. It's the same exact
program as before. But I did do
something interesting, which I organized a
bunch of variables into something, which leads
to me to a point where maybe this might be useful
if I were to make two of them, circle1 and circle2. This way, I don't have
all these x1, x2, y1, y2, everything floating around. So this way of organizing
your collections of variables that are being used together
conceptually into an object can really help you organize
and keep track of things and lays a good foundation
for a lot of things. There's a lot more work
to do with object-oriented programming later, and
it also sets a foundation for working with data that
comes from other sources because we'll have
exactly the same syntax. So as an exercise that
you might try for yourself is see if you can
take something you're working on, reorganize your
variables into these objects. And if you're looking at this
one, try to make two objects. Try to maybe make your
own color object that has an r, a g, a b, and
an alpha, perhaps, in it. Those are things that
you could try to do. And hopefully this video was
useful and interesting to you. And I finished recording it. Excellent. OK, goodbye.
