-
Sigamos explorando lo que podemos hacer con objetos.
-
Regresamos al programa que usamos en el tutorial de funciones.
-
Este programa tiene la función "drawWinston" que dibuja a "Winston" en un cierto punto "x,y".
-
Y aquí abajo, llamamos la función "drawWinston" 4 veces, cada vez con un diferente conjunto de coordenadas "x,y".
-
Bueno, ustedes me conocen y saben que cuando veo cuatro llamadas a la función "drawWinston" que se ven tan similares,
-
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.
-
Así que para hacer eso, necesitamos encontrar una manera de almacenar estas posiciones de "x" y "y" en un arreglo para que podamos recorrerlo.
-
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".
-
Entonces, para las posiciones de "x" tenemos 99, 294, 101 y 294, y para las posiciones de "y" tenemos 117, 117, 316, 316.
-
Ok, ahora podemos recorrer el arreglo con un ciclo "for" con la variable "i = 0; i < xPositions.lenght; i++"
-
Así que recorremos cada elemento en "xPositions" y decimos "drawWinston(xPositions[i],yPositions[i]);"
-
Ok, vamos a ver si funciona, borramos esto...
-
Muy bien, funciona.
-
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".
-
Podemos añadir más posiciones a esto escribiendo algo como 10, luego ponemos 1, luego 1, luego 1, luego 100, y 1.
-
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".
-
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.
-
Así que quiero encontrar una manera diferente de almacenar estas posiciones.
-
Una idea es que podemos almacenarlas como objetos.
-
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".
-
Hagámoslo.
-
Tenemos la variable "positions" igual a un arreglo.
-
Pero cada elemento del arreglo en lugar de ser un número, será un objeto.
-
Entonces aquí tenemos nuestras llaves y decimos "x: 99, y: 117".
-
Ok, ahora tenemos nuestra primer posición aquí, y vamos a añadir otra aquí.
-
Muy bien, "x" debe ser 294, 117, la tercera es 101, 316, y la última es 294 y 316.
-
Ok, ahora tenemos un arreglo de objetos y cada objeto tiene las propiedades "x" y "y".
-
Aquí abajo, en nuestro ciclo "for" sólo tenemos que cambiar esto para recorrer hasta "positions.lenght".
-
Después tenemos que pasar el objeto.
-
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".
-
¡Tan tan!
-
Ahora ya nos podemos deshacer de este grupo de arreglos.
-
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.
-
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.
-
Genial.
-
Ahora quiero mostrarles algo más interesante.
-
Noten que nuestra función actualmente acepta dos números y luego usa esos dos números.
-
Bueno, podemos cambiar nuestra función para que reciba un objeto y luego obtenga la "x" y la "y" de ese objeto,
-
significa que aquí podríamos pasar sólo ese objeto.
-
Tratemos de hacerlo.
-
Pasamos el objeto, ahora no funciona.
-
Porque nuestra función sigue esperando dos objetos y sólo está recibiendo uno, así que tenemos que cambiar eso,
-
y decirle que reciba "facePosition", y ahora tenemos un error porque "faceX" no está definida, porque antes
-
pasabamos el argumento en "faceX" pero ahora no existe, sólo estamos recibiendo un objeto.
-
Así que lo que podemos hacer es obtener la posición de "x" del objeto y ponerla en la variable "faceX"
-
Lo que estamos haciendo es recibir este objeto y sabemos que tiene la propiedad "x", así que la almacenamos en la variable "faceX".
-
Podemos hacer lo mismo con la "y", así que escribimos "faceY = facePosition.y".
-
¡Tan tan!
-
Y luego, ya sabes, el resto de la función usa "faceX" y "faceY".
-
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
-
en nuestro arreglo de objetos, así que es necesario que coincidan.
-
Esto es muy sencillo porque ahora puedes tener arreglos de objetos, puedes tener funciones que usen objetos,
-
y puedes darte cuenta que tus programas se vuelven muy poderosos por la manera en que se estructuran los datos,
-
especialmente porque es muy frecuente que queramos usar "x" y "y" juntas. Pienso que esto
-
te será muy útil en tus programas de dibujo y animación.
-
Así que ¡practícalo y diviértete!