1
00:00:00,967 --> 00:00:03,959
Sigamos explorando lo que podemos hacer con objetos.

2
00:00:03,959 --> 00:00:07,985
Regresamos al programa que usamos en el tutorial de funciones.

3
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".

4
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".

5
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,

6
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.

7
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.

8
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".

9
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.

10
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++"

11
00:01:18,399 --> 00:01:29,727
Así que recorremos cada elemento en "xPositions" y decimos "drawWinston(xPositions[i],yPositions[i]);"

12
00:01:29,727 --> 00:01:33,926
Ok, vamos a ver si funciona, borramos esto...

13
00:01:33,926 --> 00:01:36,200
Muy bien, funciona.

14
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".

15
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.

16
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".

17
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.

18
00:02:21,315 --> 00:02:26,729
Así que quiero encontrar una manera diferente de almacenar estas posiciones.

19
00:02:26,729 --> 00:02:30,791
Una idea es que podemos almacenarlas como objetos.

20
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".

21
00:02:44,058 --> 00:02:45,758
Hagámoslo.

22
00:02:45,758 --> 00:02:51,395
Tenemos la variable "positions" igual a un arreglo.

23
00:02:51,395 --> 00:02:55,852
Pero cada elemento del arreglo en lugar de ser un número, será un objeto.

24
00:02:55,852 --> 00:03:04,691
Entonces aquí tenemos nuestras llaves y decimos "x: 99, y: 117".

25
00:03:04,691 --> 00:03:13,392
Ok, ahora tenemos nuestra primer posición aquí, y vamos a añadir otra aquí.

26
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.

27
00:03:30,897 --> 00:03:37,524
Ok, ahora tenemos un arreglo de objetos y cada objeto tiene las propiedades "x" y "y".

28
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".

29
00:03:44,228 --> 00:03:48,993
Después tenemos que pasar el objeto.

30
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".

31
00:03:58,851 --> 00:04:00,228
¡Tan tan!

32
00:04:00,228 --> 00:04:03,969
Ahora ya nos podemos deshacer de este grupo de arreglos.

33
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.

34
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.

35
00:04:26,605 --> 00:04:27,591
Genial.

36
00:04:27,591 --> 00:04:31,266
Ahora quiero mostrarles algo más interesante.

37
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.

38
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,

39
00:04:44,657 --> 00:04:49,230
significa que aquí podríamos pasar sólo ese objeto.

40
00:04:49,230 --> 00:04:50,846
Tratemos de hacerlo.

41
00:04:50,846 --> 00:04:53,596
Pasamos el objeto, ahora no funciona.

42
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,

43
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

44
00:05:07,433 --> 00:05:13,501
pasabamos el argumento en "faceX" pero ahora no existe, sólo estamos recibiendo un objeto.

45
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"

46
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".

47
00:05:27,684 --> 00:05:33,637
Podemos hacer lo mismo con la "y", así que escribimos "faceY = facePosition.y".

48
00:05:33,637 --> 00:05:34,850
¡Tan tan!

49
00:05:34,850 --> 00:05:38,167
Y luego, ya sabes, el resto de la función usa "faceX" y "faceY".

50
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

51
00:05:43,968 --> 00:05:48,125
en nuestro arreglo de objetos, así que es necesario que coincidan.

52
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,

53
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,

54
00:06:00,160 --> 00:06:05,184
especialmente porque es muy frecuente que queramos usar "x" y "y" juntas. Pienso que esto

55
00:06:05,184 --> 00:06:08,926
te será muy útil en tus programas de dibujo y animación.

56
00:06:08,926 --> 00:06:11,600
Así que ¡practícalo y diviértete!