1
00:00:01,056 --> 00:00:04,067
Let's keep exploring
what we can do with objects.
2
00:00:04,067 --> 00:00:07,779
We're back with the program
that we used in the functions tutorial.
3
00:00:08,339 --> 00:00:11,839
This program has this drawWinston
function which knows how to draw
4
00:00:11,839 --> 00:00:14,178
Winston at a certain X and Y.
5
00:00:14,678 --> 00:00:18,128
And then down here,
we call drawWinston four times,
6
00:00:18,128 --> 00:00:21,043
each with a different set
of X and Y coordinates.
7
00:00:21,504 --> 00:00:25,709
Well, you know me, when I look
at those four drawWinston calls
8
00:00:25,911 --> 00:00:30,430
that are so similar looking,
all I can think about is how much better
9
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
10
00:00:35,802 --> 00:00:39,171
changing the X and Y
in each iteration of the loop.
11
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
12
00:00:44,361 --> 00:00:47,671
in an array so we can loop through it.
13
00:00:47,671 --> 00:00:51,932
Well, we have two sets of values,
so what we could do is have two arrays,
14
00:00:51,932 --> 00:00:56,030
one for X positions
and one for Y positions.
15
00:00:56,030 --> 00:01:01,262
So, X positions we might have 99,
294, 101, and 294,
16
00:01:02,281 --> 00:01:08,812
and Y positions
we'll have 117, 117, 316, 316.
17
00:01:09,564 --> 00:01:14,472
Okay, and now we can loop through
those with our for-loop var i = 0;
18
00:01:14,472 --> 00:01:18,673
i < xPositions.length; i++
19
00:01:19,032 --> 00:01:22,302
So we're going through each element
in xPositions and we'll say
20
00:01:22,302 --> 00:01:29,382
drawWinston(xPositions[i],
yPositions[i]);
21
00:01:30,313 --> 00:01:34,944
Okay, so, let's see
if that works by deleting...
22
00:01:34,944 --> 00:01:36,442
Alright, that worked.
23
00:01:36,442 --> 00:01:40,282
So now we can actually just call this,
we just have this one line of code
24
00:01:40,282 --> 00:01:43,971
that does drawWinston,
but it does it for every position
25
00:01:43,971 --> 00:01:45,422
in the xPositions array.
26
00:01:45,552 --> 00:01:49,057
So, we can go and add more to this
and by saying like... 10,
27
00:01:49,057 --> 00:01:57,236
then we add 1, and then 1,
and then 1, and then 100, and 1.
28
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
29
00:02:03,106 --> 00:02:08,227
because it's really hard for me to see
which Xs relate to which Ys.
30
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,
31
00:02:14,959 --> 00:02:18,488
instead of having to make sure
that I perfectly align them up
32
00:02:18,488 --> 00:02:20,759
above each other, like this maybe.
33
00:02:22,529 --> 00:02:26,979
So, I want to find a different way
of storing these positions.
34
00:02:26,979 --> 00:02:30,759
One idea is that we could
actually store them as objects.
35
00:02:31,000 --> 00:02:35,079
Think about it, each position is
really two bits of information:
36
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,
37
00:02:39,388 --> 00:02:43,388
and then we could have an array
of objects with all these X
38
00:02:43,388 --> 00:02:45,638
and Y positions.
So, let's do that.
39
00:02:46,258 --> 00:02:51,129
We'll say var positions equals an array.
40
00:02:51,129 --> 00:02:56,110
But, each element, instead of being
a number, is going to be an object.
41
00:02:56,365 --> 00:03:00,329
So, here we have our curly brackets
and then we're just going to say
42
00:03:00,329 --> 00:03:04,710
X: 99, Y: 117.
43
00:03:05,559 --> 00:03:08,921
Okay, so now we have one
of our positions in here,
44
00:03:08,921 --> 00:03:13,110
and then we'll go add another one here.
45
00:03:14,360 --> 00:03:21,181
Alright, X should be 294, 117,
the third one is going to be 101,
46
00:03:22,979 --> 00:03:30,349
316, and the final one is 294 and 316.
47
00:03:31,671 --> 00:03:36,101
Okay, so now we have an array
of objects where each object has
48
00:03:36,101 --> 00:03:38,080
X and Y properties in it.
49
00:03:39,240 --> 00:03:42,552
So down here, in our for loop
we'll just change this to iterate
50
00:03:42,552 --> 00:03:48,311
through positions.length.
Then we'll pass in the object.
51
00:03:48,467 --> 00:03:52,818
Now, right now it's passing
the entire object, but we want to pass
52
00:03:52,818 --> 00:03:58,768
the X and the Y, so we need
positions[i].x and positions[i].y.
53
00:03:59,195 --> 00:04:00,692
Tada!
54
00:04:00,692 --> 00:04:03,841
Now, we can get rid
of these old, clustered arrays.
55
00:04:04,563 --> 00:04:09,585
Great, so this looks a lot nicer to me
and makes the code much more readable,
56
00:04:09,710 --> 00:04:12,618
and any time we can have
more readable code, it's better.
57
00:04:13,178 --> 00:04:16,330
It also makes it easier to add,
so if I want to add one,
58
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,
59
00:04:23,577 --> 00:04:25,709
get a little Winston in the middle there.
60
00:04:26,539 --> 00:04:27,597
Cool.
61
00:04:27,930 --> 00:04:30,979
Now I want to show you something
even fancier than this.
62
00:04:31,811 --> 00:04:36,361
Notice how our function right now
accepts two numbers
63
00:04:36,361 --> 00:04:39,150
and then uses those two numbers.
64
00:04:39,150 --> 00:04:42,290
Well, we could change our function
so that it expects an object
65
00:04:42,290 --> 00:04:45,261
and then it gets the X
and Y from that object,
66
00:04:45,261 --> 00:04:49,062
meaning that down here
we could just pass the object.
67
00:04:50,021 --> 00:04:51,499
Let's try that.
68
00:04:51,499 --> 00:04:54,071
We pass the object, now it's broken.
69
00:04:54,071 --> 00:04:57,680
That's because our function
still is expecting two objects
70
00:04:57,680 --> 00:05:00,266
and it's only getting one,
so we'll change it
71
00:05:00,266 --> 00:05:05,071
to say it's getting facePosition,
and now we get an error
72
00:05:05,071 --> 00:05:09,652
that faceX is not defined
because before we were passing in faceX
73
00:05:09,652 --> 00:05:13,073
as an argument but now it doesn't exist,
we're only getting an object.
74
00:05:13,073 --> 00:05:19,011
So, what we could do, is save
the X position from the object
75
00:05:19,011 --> 00:05:21,264
inside the faceX variable.
76
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,
77
00:05:24,952 --> 00:05:28,463
so we're just going to store
that into the faceX variable.
78
00:05:28,463 --> 00:05:33,762
We can do the same thing
with Y, so faceY = facePosition.y.
79
00:05:33,762 --> 00:05:35,069
Tada!
80
00:05:35,069 --> 00:05:38,537
And then, you know, the rest
of the function uses faceX and faceY.
81
00:05:38,537 --> 00:05:40,332
Now, we have to make sure
that we spell them correctly,
82
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
83
00:05:44,149 --> 00:05:47,763
in our array of objects,
so it needs to match.
84
00:05:49,111 --> 00:05:52,223
This is pretty neat because now you can
have arrays of objects,
85
00:05:52,223 --> 00:05:54,422
you can have functions
that take in objects
86
00:05:54,540 --> 00:05:59,092
and you'll really find that your programs
can be very powerful with the way
87
00:05:59,092 --> 00:06:00,780
that they structure their data
88
00:06:00,780 --> 00:06:04,192
especially since it's so often
to want to pair X and Y together,
89
00:06:04,192 --> 00:06:05,460
I think you'll find them
90
00:06:05,460 --> 00:06:09,091
especially useful in all your drawing
and animation programs here.
91
00:06:09,091 --> 00:06:10,987
So, go to it and have fun!