0:00:01.056,0:00:04.067
Let's keep exploring [br]what we can do with objects.

0:00:04.067,0:00:07.779
We're back with the program [br]that we used in the functions tutorial.

0:00:08.339,0:00:11.839
This program has this drawWinston [br]function which knows how to draw

0:00:11.839,0:00:14.178
Winston at a certain X and Y.

0:00:14.678,0:00:18.128
And then down here, [br]we call drawWinston four times,

0:00:18.128,0:00:21.043
each with a different set [br]of X and Y coordinates.

0:00:21.504,0:00:25.709
Well, you know me, when I look [br]at those four drawWinston calls

0:00:25.911,0:00:30.430
that are so similar looking,[br]all I can think about is how much better

0:00:30.430,0:00:35.802
it would be if we could use a loop [br]and just call it one time inside the loop

0:00:35.802,0:00:39.171
changing the X and Y [br]in each iteration of the loop.

0:00:39.861,0:00:44.361
So, to do that, we need to find [br]a way to store these X and Y positions

0:00:44.361,0:00:47.671
in an array so we can loop through it.

0:00:47.671,0:00:51.932
Well, we have two sets of values,[br]so what we could do is have two arrays,

0:00:51.932,0:00:56.030
one for X positions[br]and one for Y positions.

0:00:56.030,0:01:01.262
So, X positions we might have 99, [br]294, 101, and 294,

0:01:02.281,0:01:08.812
and Y positions [br]we'll have 117, 117, 316, 316.

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

0:01:14.472,0:01:18.673
i < xPositions.length; i++

0:01:19.032,0:01:22.302
So we're going through each element [br]in xPositions and we'll say

0:01:22.302,0:01:29.382
drawWinston(xPositions[i], [br]yPositions[i]);

0:01:30.313,0:01:34.944
Okay, so, let's see [br]if that works by deleting...

0:01:34.944,0:01:36.442
Alright, that worked.

0:01:36.442,0:01:40.282
So now we can actually just call this, [br]we just have this one line of code

0:01:40.282,0:01:43.971
that does drawWinston, [br]but it does it for every position

0:01:43.971,0:01:45.422
in the xPositions array.

0:01:45.552,0:01:49.057
So, we can go and add more to this [br]and by saying like... 10,

0:01:49.057,0:01:57.236
then we add 1, and then 1, [br]and then 1, and then 100, and 1.

0:01:58.572,0:02:03.106
Now, now it's getting to look[br]a little bit messy and I don't like it

0:02:03.106,0:02:08.227
because it's really hard for me to see [br]which Xs relate to which Ys.

0:02:08.438,0:02:14.959
I want to be able to look at a glance [br]and know what my X and Y pairs are,

0:02:14.959,0:02:18.488
instead of having to make sure [br]that I perfectly align them up

0:02:18.488,0:02:20.759
above each other, like this maybe.

0:02:22.529,0:02:26.979
So, I want to find a different way [br]of storing these positions.

0:02:26.979,0:02:30.759
One idea is that we could [br]actually store them as objects.

0:02:31.000,0:02:35.079
Think about it, each position is [br]really two bits of information:

0:02:35.079,0:02:39.388
the X and the Y. So, we could have [br]an object which has X and Y properties,

0:02:39.388,0:02:43.388
and then we could have an array [br]of objects with all these X

0:02:43.388,0:02:45.638
and Y positions.[br]So, let's do that.

0:02:46.258,0:02:51.129
We'll say var positions equals an array.

0:02:51.129,0:02:56.110
But, each element, instead of being [br]a number, is going to be an object.

0:02:56.365,0:03:00.329
So, here we have our curly brackets [br]and then we're just going to say

0:03:00.329,0:03:04.710
X: 99, Y: 117.

0:03:05.559,0:03:08.921
Okay, so now we have one [br]of our positions in here,

0:03:08.921,0:03:13.110
and then we'll go add another one here.

0:03:14.360,0:03:21.181
Alright, X should be 294, 117, [br]the third one is going to be 101,

0:03:22.979,0:03:30.349
316, and the final one is 294 and 316.

0:03:31.671,0:03:36.101
Okay, so now we have an array [br]of objects where each object has

0:03:36.101,0:03:38.080
X and Y properties in it.

0:03:39.240,0:03:42.552
So down here, in our for loop [br]we'll just change this to iterate

0:03:42.552,0:03:48.311
through <i>positions.length</i>.[br]Then we'll pass in the object.

0:03:48.467,0:03:52.818
Now, right now it's passing [br]the entire object, but we want to pass

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

0:03:59.195,0:04:00.692
Tada!

0:04:00.692,0:04:03.841
Now, we can get rid [br]of these old, clustered arrays.

0:04:04.563,0:04:09.585
Great, so this looks a lot nicer to me [br]and makes the code much more readable,

0:04:09.710,0:04:12.618
and any time we can have [br]more readable code, it's better.

0:04:13.178,0:04:16.330
It also makes it easier to add, [br]so if I want to add one,

0:04:16.330,0:04:23.540
I'll actually just add the pair together, [br]and then we can say X is 200, Y, 200,

0:04:23.577,0:04:25.709
get a little Winston in the middle there.

0:04:26.539,0:04:27.597
Cool.

0:04:27.930,0:04:30.979
Now I want to show you something [br]even fancier than this.

0:04:31.811,0:04:36.361
Notice how our function right now [br]accepts two numbers

0:04:36.361,0:04:39.150
and then uses those two numbers.

0:04:39.150,0:04:42.290
Well, we could change our function [br]so that it expects an object

0:04:42.290,0:04:45.261
and then it gets the X [br]and Y from that object,

0:04:45.261,0:04:49.062
meaning that down here [br]we could just pass the object.

0:04:50.021,0:04:51.499
Let's try that.

0:04:51.499,0:04:54.071
We pass the object, now it's broken.

0:04:54.071,0:04:57.680
That's because our function [br]still is expecting two objects

0:04:57.680,0:05:00.266
and it's only getting one, [br]so we'll change it

0:05:00.266,0:05:05.071
to say it's getting facePosition, [br]and now we get an error

0:05:05.071,0:05:09.652
that faceX is not defined [br]because before we were passing in faceX

0:05:09.652,0:05:13.073
as an argument but now it doesn't exist, [br]we're only getting an object.

0:05:13.073,0:05:19.011
So, what we could do, is save [br]the X position from the object

0:05:19.011,0:05:21.264
inside the faceX variable.

0:05:21.264,0:05:24.952
So we're saying that we got this object, [br]we know this object has an X property,

0:05:24.952,0:05:28.463
so we're just going to store [br]that into the faceX variable.

0:05:28.463,0:05:33.762
We can do the same thing [br]with Y, so faceY = facePosition.y.

0:05:33.762,0:05:35.069
Tada!

0:05:35.069,0:05:38.537
And then, you know, the rest [br]of the function uses faceX and faceY.

0:05:38.537,0:05:40.332
Now, we have to make sure [br]that we spell them correctly,

0:05:40.332,0:05:44.149
if we did xx, it's not going to work [br]because that's not what it is down here

0:05:44.149,0:05:47.763
in our array of objects, [br]so it needs to match.

0:05:49.111,0:05:52.223
This is pretty neat because now you can [br]have arrays of objects,

0:05:52.223,0:05:54.422
you can have functions [br]that take in objects

0:05:54.540,0:05:59.092
and you'll really find that your programs [br]can be very powerful with the way

0:05:59.092,0:06:00.780
that they structure their data

0:06:00.780,0:06:04.192
especially since it's so often [br]to want to pair X and Y together,

0:06:04.192,0:06:05.460
I think you'll find them

0:06:05.460,0:06:09.091
especially useful in all your drawing [br]and animation programs here.

0:06:09.091,0:06:10.987
So, go to it and have fun!