0:00:00.967,0:00:03.959
Sigamos explorando lo que podemos hacer con objetos.

0:00:03.959,0:00:07.985
Regresamos al programa que usamos en el tutorial de funciones.

0:00:07.985,0:00:14.273
Este programa tiene la función "drawWinston" que dibuja a "Winston" en un cierto punto "x,y".

0:00:14.273,0:00:21.520
Y aquí abajo, llamamos la función "drawWinston" 4 veces, cada vez con un diferente conjunto de coordenadas "x,y".

0:00:21.520,0:00:28.247
Bueno, ustedes me conocen y saben que cuando veo cuatro llamadas a la función "drawWinston" que se ven tan similares,

0:00:28.247,0:00:39.674
todo lo que puedo pensar es en la manera de mejorar este código usando un ciclo y llamar a la función sólo una vez dentro del ciclo, cambiando "x" y "y" en cada iteración del ciclo.

0:00:39.674,0:00:47.036
Así que para hacer eso, necesitamos encontrar una manera de almacenar estas posiciones de "x" y "y" en un arreglo para que podamos recorrerlo.

0:00:47.036,0:00:55.816
Bueno, tenemos dos conjuntos de valores, así que podemos tener dos arreglos. Uno para las posiciones de "x" y otro para las posiciones de "y".

0:00:55.816,0:01:09.248
Entonces, para las posiciones de "x" tenemos 99, 294, 101 y 294, y para las posiciones de "y" tenemos 117, 117, 316, 316.

0:01:09.248,0:01:18.399
Ok, ahora podemos recorrer el arreglo con un ciclo "for" con la variable "i = 0; i < xPositions.lenght; i++"

0:01:18.399,0:01:29.727
Así que recorremos cada elemento en "xPositions" y decimos "drawWinston(xPositions[i],yPositions[i]);"

0:01:29.727,0:01:33.926
Ok, vamos a ver si funciona, borramos esto...

0:01:33.926,0:01:36.200
Muy bien, funciona.

0:01:36.200,0:01:44.645
Entonces, ahora podemos simplemente llamar esto, ya sabes, tenemos sólo una línea de código que llama a "drawWinston", pero lo hace para cada posición en el arreglo "xPositions".

0:01:44.645,0:01:57.889
Podemos añadir más posiciones a esto escribiendo algo como 10, luego ponemos 1, luego 1, luego 1, luego 100, y 1.

0:01:57.889,0:02:08.212
Ahora esto se está volviendo un poco desastroso, y no me gusta porque en realidad es difícil ver cuál "x" está relacionada con cuál "y".

0:02:08.212,0:02:21.315
Y yo quisiera poder echar un vistazo y saber cuáles son mis pares "x,y", en lugar de tener que asegurarme de alinear perfectamente esto, tal vez.

0:02:21.315,0:02:26.729
Así que quiero encontrar una manera diferente de almacenar estas posiciones.

0:02:26.729,0:02:30.791
Una idea es que podemos almacenarlas como objetos.

0:02:30.791,0:02:44.058
Piensen en esto, cada posición en realidad tiene dos porciones de información: "x" y "y". Así que podemos tener un objeto que tenga las propiedades "x" y "y" y luego tener un arreglo de objetos con esas posiciones "x,y".

0:02:44.058,0:02:45.758
Hagámoslo.

0:02:45.758,0:02:51.395
Tenemos la variable "positions" igual a un arreglo.

0:02:51.395,0:02:55.852
Pero cada elemento del arreglo en lugar de ser un número, será un objeto.

0:02:55.852,0:03:04.691
Entonces aquí tenemos nuestras llaves y decimos "x: 99, y: 117".

0:03:04.691,0:03:13.392
Ok, ahora tenemos nuestra primer posición aquí, y vamos a añadir otra aquí.

0:03:13.392,0:03:30.897
Muy bien, "x" debe ser 294, 117, la tercera es 101, 316, y la última es 294 y 316.

0:03:30.897,0:03:37.524
Ok, ahora tenemos un arreglo de objetos y cada objeto tiene las propiedades "x" y "y".

0:03:37.524,0:03:44.228
Aquí abajo, en nuestro ciclo "for" sólo tenemos que cambiar esto para recorrer hasta "positions.lenght".

0:03:44.228,0:03:48.993
Después tenemos que pasar el objeto.

0:03:48.993,0:03:58.851
En este momento está pasando el objeto entero, pero lo que queremos es pasar la "x" y la "y", necesitamos "positions[i].x" y "positions[i].y".

0:03:58.851,0:04:00.228
¡Tan tan!

0:04:00.228,0:04:03.969
Ahora ya nos podemos deshacer de este grupo de arreglos.

0:04:03.969,0:04:12.687
Genial. Esto se ve mejor y hace que el código sea más fácil de leer, y es mejor tener un código fácil de leer.

0:04:12.687,0:04:26.605
También hace que sea más fácil agregar algo, así que si quiero añadir uno, y de hecho voy a añadir un par, escribo "x:" es 200, "y", 200, y tenemos un "Winston" justo en medio.

0:04:26.605,0:04:27.591
Genial.

0:04:27.591,0:04:31.266
Ahora quiero mostrarles algo más interesante.

0:04:31.266,0:04:38.635
Noten que nuestra función actualmente acepta dos números y luego usa esos dos números.

0:04:38.635,0:04:44.657
Bueno, podemos cambiar nuestra función para que reciba un objeto y luego obtenga la "x" y la "y" de ese objeto,

0:04:44.657,0:04:49.230
significa que aquí podríamos pasar sólo ese objeto.

0:04:49.230,0:04:50.846
Tratemos de hacerlo.

0:04:50.846,0:04:53.596
Pasamos el objeto, ahora no funciona.

0:04:53.596,0:05:00.178
Porque nuestra función sigue esperando dos objetos y sólo está recibiendo uno, así que tenemos que cambiar eso,

0:05:00.178,0:05:07.433
y decirle que reciba "facePosition", y ahora tenemos un error porque "faceX" no está definida, porque antes

0:05:07.433,0:05:13.501
pasabamos el argumento en "faceX" pero ahora no existe, sólo estamos recibiendo un objeto.

0:05:13.501,0:05:20.899
Así que lo que podemos hacer es obtener la posición de "x" del objeto y ponerla en la variable "faceX"

0:05:20.899,0:05:27.684
Lo que estamos haciendo es recibir este objeto y sabemos que tiene la propiedad "x", así que la almacenamos en la variable "faceX".

0:05:27.684,0:05:33.637
Podemos hacer lo mismo con la "y", así que escribimos "faceY = facePosition.y".

0:05:33.637,0:05:34.850
¡Tan tan!

0:05:34.850,0:05:38.167
Y luego, ya sabes, el resto de la función usa "faceX" y "faceY".

0:05:38.167,0:05:43.968
Ahora tenemos que estar seguros de que esté bien escrito, si ponemos "xx", no va a funcionar porque no es igual a lo que está aquí abajo

0:05:43.968,0:05:48.125
en nuestro arreglo de objetos, así que es necesario que coincidan.

0:05:48.125,0:05:53.941
Esto es muy sencillo porque ahora puedes tener arreglos de objetos, puedes tener funciones que usen objetos,

0:05:53.941,0:06:00.160
y puedes darte cuenta que tus programas se vuelven muy poderosos por la manera en que se estructuran los datos,

0:06:00.160,0:06:05.184
especialmente porque es muy frecuente que queramos usar "x" y "y" juntas. Pienso que esto

0:06:05.184,0:06:08.926
te será muy útil en tus programas de dibujo y animación.

0:06:08.926,0:06:11.600
Así que ¡practícalo y diviértete!