Let's keep exploring 
what we can do with objects.

We're back with the program 
that we used in the functions tutorial.

This program has this drawWinston 
function which knows how to draw

Winston at a certain X and Y.

And then down here, 
we call drawWinston four times,

each with a different set 
of X and Y coordinates.

Well, you know me, when I look 
at those four drawWinston calls

that are so similar looking,
all I can think about is how much better

it would be if we could use a loop 
and just call it one time inside the loop

changing the X and Y 
in each iteration of the loop.

So, to do that, we need to find 
a way to store these X and Y positions

in an array so we can loop through it.

Well, we have two sets of values,
so what we could do is have two arrays,

one for X positions
and one for Y positions.

So, X positions we might have 99, 
294, 101, and 294,

and Y positions 
we'll have 117, 117, 316, 316.

Okay, and now we can loop through 
those with our for-loop var i = 0;

i < xPositions.length; i++

So we're going through each element 
in xPositions and we'll say

drawWinston(xPositions[i], 
yPositions[i]);

Okay, so, let's see 
if that works by deleting...

Alright, that worked.

So now we can actually just call this, 
we just have this one line of code

that does drawWinston, 
but it does it for every position

in the xPositions array.

So, we can go and add more to this 
and by saying like... 10,

then we add 1, and then 1, 
and then 1, and then 100, and 1.

Now, now it's getting to look
a little bit messy and I don't like it

because it's really hard for me to see 
which Xs relate to which Ys.

I want to be able to look at a glance 
and know what my X and Y pairs are,

instead of having to make sure 
that I perfectly align them up

above each other, like this maybe.

So, I want to find a different way 
of storing these positions.

One idea is that we could 
actually store them as objects.

Think about it, each position is 
really two bits of information:

the X and the Y. So, we could have 
an object which has X and Y properties,

and then we could have an array 
of objects with all these X

and Y positions.
So, let's do that.

We'll say var positions equals an array.

But, each element, instead of being 
a number, is going to be an object.

So, here we have our curly brackets 
and then we're just going to say

X: 99, Y: 117.

Okay, so now we have one 
of our positions in here,

and then we'll go add another one here.

Alright, X should be 294, 117, 
the third one is going to be 101,

316, and the final one is 294 and 316.

Okay, so now we have an array 
of objects where each object has

X and Y properties in it.

So down here, in our for loop 
we'll just change this to iterate

through <i>positions.length</i>.
Then we'll pass in the object.

Now, right now it's passing 
the entire object, but we want to pass

the X and the Y, so we need
<i>positions[i].x</i> and <i>positions[i].y</i>.

Tada!

Now, we can get rid 
of these old, clustered arrays.

Great, so this looks a lot nicer to me 
and makes the code much more readable,

and any time we can have 
more readable code, it's better.

It also makes it easier to add, 
so if I want to add one,

I'll actually just add the pair together, 
and then we can say X is 200, Y, 200,

get a little Winston in the middle there.

Cool.

Now I want to show you something 
even fancier than this.

Notice how our function right now 
accepts two numbers

and then uses those two numbers.

Well, we could change our function 
so that it expects an object

and then it gets the X 
and Y from that object,

meaning that down here 
we could just pass the object.

Let's try that.

We pass the object, now it's broken.

That's because our function 
still is expecting two objects

and it's only getting one, 
so we'll change it

to say it's getting facePosition, 
and now we get an error

that faceX is not defined 
because before we were passing in faceX

as an argument but now it doesn't exist, 
we're only getting an object.

So, what we could do, is save 
the X position from the object

inside the faceX variable.

So we're saying that we got this object, 
we know this object has an X property,

so we're just going to store 
that into the faceX variable.

We can do the same thing 
with Y, so faceY = facePosition.y.

Tada!

And then, you know, the rest 
of the function uses faceX and faceY.

Now, we have to make sure 
that we spell them correctly,

if we did xx, it's not going to work 
because that's not what it is down here

in our array of objects, 
so it needs to match.

This is pretty neat because now you can 
have arrays of objects,

you can have functions 
that take in objects

and you'll really find that your programs 
can be very powerful with the way

that they structure their data

especially since it's so often 
to want to pair X and Y together,

I think you'll find them

especially useful in all your drawing 
and animation programs here.

So, go to it and have fun!