WEBVTT

00:00:01.056 --> 00:00:04.067
Let's keep exploring 
what we can do with objects.

00:00:04.067 --> 00:00:07.779
We're back with the program 
that we used in the functions tutorial.

00:00:08.339 --> 00:00:11.839
This program has this drawWinston 
function which knows how to draw

00:00:11.839 --> 00:00:14.178
Winston at a certain X and Y.

00:00:14.678 --> 00:00:18.128
And then down here, 
we call drawWinston four times,

00:00:18.128 --> 00:00:21.043
each with a different set 
of X and Y coordinates.

00:00:21.504 --> 00:00:25.709
Well, you know me, when I look 
at those four drawWinston calls

00:00:25.911 --> 00:00:30.430
that are so similar looking,
all I can think about is how much better

00:00:30.430 --> 00:00:35.802
it would be if we could use a loop 
and just call it one time inside the loop

00:00:35.802 --> 00:00:39.171
changing the X and Y 
in each iteration of the loop.

00:00:39.861 --> 00:00:44.361
So, to do that, we need to find 
a way to store these X and Y positions

00:00:44.361 --> 00:00:47.671
in an array so we can loop through it.

00:00:47.671 --> 00:00:51.932
Well, we have two sets of values,
so what we could do is have two arrays,

00:00:51.932 --> 00:00:56.030
one for X positions
and one for Y positions.

00:00:56.030 --> 00:01:01.262
So, X positions we might have 99, 
294, 101, and 294,

00:01:02.281 --> 00:01:08.812
and Y positions 
we'll have 117, 117, 316, 316.

00:01:09.564 --> 00:01:14.472
Okay, and now we can loop through 
those with our for-loop var i = 0;

00:01:14.472 --> 00:01:18.673
i < xPositions.length; i++

00:01:19.032 --> 00:01:22.302
So we're going through each element 
in xPositions and we'll say

00:01:22.302 --> 00:01:29.382
drawWinston(xPositions[i], 
yPositions[i]);

00:01:30.313 --> 00:01:34.944
Okay, so, let's see 
if that works by deleting...

00:01:34.944 --> 00:01:36.442
Alright, that worked.

00:01:36.442 --> 00:01:40.282
So now we can actually just call this, 
we just have this one line of code

00:01:40.282 --> 00:01:43.971
that does drawWinston, 
but it does it for every position

00:01:43.971 --> 00:01:45.422
in the xPositions array.

00:01:45.552 --> 00:01:49.057
So, we can go and add more to this 
and by saying like... 10,

00:01:49.057 --> 00:01:57.236
then we add 1, and then 1, 
and then 1, and then 100, and 1.

00:01:58.572 --> 00:02:03.106
Now, now it's getting to look
a little bit messy and I don't like it

00:02:03.106 --> 00:02:08.227
because it's really hard for me to see 
which Xs relate to which Ys.

00:02:08.438 --> 00:02:14.959
I want to be able to look at a glance 
and know what my X and Y pairs are,

00:02:14.959 --> 00:02:18.488
instead of having to make sure 
that I perfectly align them up

00:02:18.488 --> 00:02:20.759
above each other, like this maybe.

00:02:22.529 --> 00:02:26.979
So, I want to find a different way 
of storing these positions.

00:02:26.979 --> 00:02:30.759
One idea is that we could 
actually store them as objects.

00:02:31.000 --> 00:02:35.079
Think about it, each position is 
really two bits of information:

00:02:35.079 --> 00:02:39.388
the X and the Y. So, we could have 
an object which has X and Y properties,

00:02:39.388 --> 00:02:43.388
and then we could have an array 
of objects with all these X

00:02:43.388 --> 00:02:45.638
and Y positions.
So, let's do that.

00:02:46.258 --> 00:02:51.129
We'll say var positions equals an array.

00:02:51.129 --> 00:02:56.110
But, each element, instead of being 
a number, is going to be an object.

00:02:56.365 --> 00:03:00.329
So, here we have our curly brackets 
and then we're just going to say

00:03:00.329 --> 00:03:04.710
X: 99, Y: 117.

00:03:05.559 --> 00:03:08.921
Okay, so now we have one 
of our positions in here,

00:03:08.921 --> 00:03:13.110
and then we'll go add another one here.

00:03:14.360 --> 00:03:21.181
Alright, X should be 294, 117, 
the third one is going to be 101,

00:03:22.979 --> 00:03:30.349
316, and the final one is 294 and 316.

00:03:31.671 --> 00:03:36.101
Okay, so now we have an array 
of objects where each object has

00:03:36.101 --> 00:03:38.080
X and Y properties in it.

00:03:39.240 --> 00:03:42.552
So down here, in our for loop 
we'll just change this to iterate

00:03:42.552 --> 00:03:48.311
through <i>positions.length</i>.
Then we'll pass in the object.

00:03:48.467 --> 00:03:52.818
Now, right now it's passing 
the entire object, but we want to pass

00:03:52.818 --> 00:03:58.768
the X and the Y, so we need
<i>positions[i].x</i> and <i>positions[i].y</i>.

00:03:59.195 --> 00:04:00.692
Tada!

00:04:00.692 --> 00:04:03.841
Now, we can get rid 
of these old, clustered arrays.

00:04:04.563 --> 00:04:09.585
Great, so this looks a lot nicer to me 
and makes the code much more readable,

00:04:09.710 --> 00:04:12.618
and any time we can have 
more readable code, it's better.

00:04:13.178 --> 00:04:16.330
It also makes it easier to add, 
so if I want to add one,

00:04:16.330 --> 00:04:23.540
I'll actually just add the pair together, 
and then we can say X is 200, Y, 200,

00:04:23.577 --> 00:04:25.709
get a little Winston in the middle there.

00:04:26.539 --> 00:04:27.597
Cool.

00:04:27.930 --> 00:04:30.979
Now I want to show you something 
even fancier than this.

00:04:31.811 --> 00:04:36.361
Notice how our function right now 
accepts two numbers

00:04:36.361 --> 00:04:39.150
and then uses those two numbers.

00:04:39.150 --> 00:04:42.290
Well, we could change our function 
so that it expects an object

00:04:42.290 --> 00:04:45.261
and then it gets the X 
and Y from that object,

00:04:45.261 --> 00:04:49.062
meaning that down here 
we could just pass the object.

00:04:50.021 --> 00:04:51.499
Let's try that.

00:04:51.499 --> 00:04:54.071
We pass the object, now it's broken.

00:04:54.071 --> 00:04:57.680
That's because our function 
still is expecting two objects

00:04:57.680 --> 00:05:00.266
and it's only getting one, 
so we'll change it

00:05:00.266 --> 00:05:05.071
to say it's getting facePosition, 
and now we get an error

00:05:05.071 --> 00:05:09.652
that faceX is not defined 
because before we were passing in faceX

00:05:09.652 --> 00:05:13.073
as an argument but now it doesn't exist, 
we're only getting an object.

00:05:13.073 --> 00:05:19.011
So, what we could do, is save 
the X position from the object

00:05:19.011 --> 00:05:21.264
inside the faceX variable.

00:05:21.264 --> 00:05:24.952
So we're saying that we got this object, 
we know this object has an X property,

00:05:24.952 --> 00:05:28.463
so we're just going to store 
that into the faceX variable.

00:05:28.463 --> 00:05:33.762
We can do the same thing 
with Y, so faceY = facePosition.y.

00:05:33.762 --> 00:05:35.069
Tada!

00:05:35.069 --> 00:05:38.537
And then, you know, the rest 
of the function uses faceX and faceY.

00:05:38.537 --> 00:05:40.332
Now, we have to make sure 
that we spell them correctly,

00:05:40.332 --> 00:05:44.149
if we did xx, it's not going to work 
because that's not what it is down here

00:05:44.149 --> 00:05:47.763
in our array of objects, 
so it needs to match.

00:05:49.111 --> 00:05:52.223
This is pretty neat because now you can 
have arrays of objects,

00:05:52.223 --> 00:05:54.422
you can have functions 
that take in objects

00:05:54.540 --> 00:05:59.092
and you'll really find that your programs 
can be very powerful with the way

00:05:59.092 --> 00:06:00.780
that they structure their data

00:06:00.780 --> 00:06:04.192
especially since it's so often 
to want to pair X and Y together,

00:06:04.192 --> 00:06:05.460
I think you'll find them

00:06:05.460 --> 00:06:09.091
especially useful in all your drawing 
and animation programs here.

00:06:09.091 --> 00:06:10.987
So, go to it and have fun!