WEBVTT 00:00:00.967 --> 00:00:03.959 Sigamos explorando lo que podemos hacer con objetos. 00:00:03.959 --> 00:00:07.985 Regresamos al programa que usamos en el tutorial de funciones. 00:00:07.985 --> 00:00:14.273 Este programa tiene la función "drawWinston" que dibuja a "Winston" en un cierto punto "x,y". 00:00:14.273 --> 00:00:21.520 Y aquí abajo, llamamos la función "drawWinston" 4 veces, cada vez con un diferente conjunto de coordenadas "x,y". 00:00:21.520 --> 00:00:28.247 Bueno, ustedes me conocen y saben que cuando veo cuatro llamadas a la función "drawWinston" que se ven tan similares, 00:00:28.247 --> 00: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. 00:00:39.674 --> 00: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. 00:00:47.036 --> 00: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". 00:00:55.816 --> 00: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. 00:01:09.248 --> 00:01:18.399 Ok, ahora podemos recorrer el arreglo con un ciclo "for" con la variable "i = 0; i < xPositions.lenght; i++" 00:01:18.399 --> 00:01:29.727 Así que recorremos cada elemento en "xPositions" y decimos "drawWinston(xPositions[i],yPositions[i]);" 00:01:29.727 --> 00:01:33.926 Ok, vamos a ver si funciona, borramos esto... 00:01:33.926 --> 00:01:36.200 Muy bien, funciona. 00:01:36.200 --> 00: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". 00:01:44.645 --> 00: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. 00:01:57.889 --> 00: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". 00:02:08.212 --> 00: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. 00:02:21.315 --> 00:02:26.729 Así que quiero encontrar una manera diferente de almacenar estas posiciones. 00:02:26.729 --> 00:02:30.791 Una idea es que podemos almacenarlas como objetos. 00:02:30.791 --> 00: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". 00:02:44.058 --> 00:02:45.758 Hagámoslo. 00:02:45.758 --> 00:02:51.395 Tenemos la variable "positions" igual a un arreglo. 00:02:51.395 --> 00:02:55.852 Pero cada elemento del arreglo en lugar de ser un número, será un objeto. 00:02:55.852 --> 00:03:04.691 Entonces aquí tenemos nuestras llaves y decimos "x: 99, y: 117". 00:03:04.691 --> 00:03:13.392 Ok, ahora tenemos nuestra primer posición aquí, y vamos a añadir otra aquí. 00:03:13.392 --> 00:03:30.897 Muy bien, "x" debe ser 294, 117, la tercera es 101, 316, y la última es 294 y 316. 00:03:30.897 --> 00:03:37.524 Ok, ahora tenemos un arreglo de objetos y cada objeto tiene las propiedades "x" y "y". 00:03:37.524 --> 00:03:44.228 Aquí abajo, en nuestro ciclo "for" sólo tenemos que cambiar esto para recorrer hasta "positions.lenght". 00:03:44.228 --> 00:03:48.993 Después tenemos que pasar el objeto. 00:03:48.993 --> 00: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". 00:03:58.851 --> 00:04:00.228 ¡Tan tan! 00:04:00.228 --> 00:04:03.969 Ahora ya nos podemos deshacer de este grupo de arreglos. 00:04:03.969 --> 00: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. 00:04:12.687 --> 00: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. 00:04:26.605 --> 00:04:27.591 Genial. 00:04:27.591 --> 00:04:31.266 Ahora quiero mostrarles algo más interesante. 00:04:31.266 --> 00:04:38.635 Noten que nuestra función actualmente acepta dos números y luego usa esos dos números. 00:04:38.635 --> 00: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, 00:04:44.657 --> 00:04:49.230 significa que aquí podríamos pasar sólo ese objeto. 00:04:49.230 --> 00:04:50.846 Tratemos de hacerlo. 00:04:50.846 --> 00:04:53.596 Pasamos el objeto, ahora no funciona. 00:04:53.596 --> 00:05:00.178 Porque nuestra función sigue esperando dos objetos y sólo está recibiendo uno, así que tenemos que cambiar eso, 00:05:00.178 --> 00:05:07.433 y decirle que reciba "facePosition", y ahora tenemos un error porque "faceX" no está definida, porque antes 00:05:07.433 --> 00:05:13.501 pasabamos el argumento en "faceX" pero ahora no existe, sólo estamos recibiendo un objeto. 00:05:13.501 --> 00:05:20.899 Así que lo que podemos hacer es obtener la posición de "x" del objeto y ponerla en la variable "faceX" 00:05:20.899 --> 00: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". 00:05:27.684 --> 00:05:33.637 Podemos hacer lo mismo con la "y", así que escribimos "faceY = facePosition.y". 00:05:33.637 --> 00:05:34.850 ¡Tan tan! 00:05:34.850 --> 00:05:38.167 Y luego, ya sabes, el resto de la función usa "faceX" y "faceY". 00:05:38.167 --> 00: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 00:05:43.968 --> 00:05:48.125 en nuestro arreglo de objetos, así que es necesario que coincidan. 00:05:48.125 --> 00:05:53.941 Esto es muy sencillo porque ahora puedes tener arreglos de objetos, puedes tener funciones que usen objetos, 00:05:53.941 --> 00:06:00.160 y puedes darte cuenta que tus programas se vuelven muy poderosos por la manera en que se estructuran los datos, 00:06:00.160 --> 00:06:05.184 especialmente porque es muy frecuente que queramos usar "x" y "y" juntas. Pienso que esto 00:06:05.184 --> 00:06:08.926 te será muy útil en tus programas de dibujo y animación. 00:06:08.926 --> 00:06:11.600 Así que ¡practícalo y diviértete!