Arreglos de Objetos (Versión en Video)

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!