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 positions.length. 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 positions[i].x and positions[i].y.
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!