0:00:00.877,0:00:06.001
Estamos de regreso en nuestro programa para dibujar a "Winston", y he añadido algo de texto en él.

0:00:06.001,0:00:11.072
Lo que quiero hacer es posicionar a "Winston" debajo de cada una de estas etiquetas,

0:00:11.072,0:00:13.210
para mostrarlo en cada etapa de la vida.

0:00:13.210,0:00:15.197
Por ahora él está por todos lados.

0:00:15.197,0:00:20.449
Eso es porque estamos asignando a "faceX" y "faceY" números aleatorios dentro de la función.

0:00:20.449,0:00:26.714
En lugar de eso, lo que queremos hacer es decir: "Oye, aquí está la posición exacta en la que quiero dibujar a 'Winston'"

0:00:26.714,0:00:31.046
Y luego quiero poder especificar esta posición cada vez que llame a la función,[br]

0:00:31.046,0:00:34.046
de la misma manera que hicimos con "ellipse()" y con "rect()".

0:00:34.046,0:00:40.460
¿Está bien? Quiero poner un "Winston" aquí, y un "Winston" aquí, y un" Winston" aquí y un "Winston" aquí,

0:00:40.460,0:00:44.623
y no sólo en lugares aleatorios cada vez [br]que llamo la función.

0:00:44.623,0:00:49.046
Así que para hacer eso, tenemos que especificar "parámetros" para la función,

0:00:49.046,0:00:53.716
tanto en nuestra definición de la función - aquí en la parte superior -

0:00:53.716,0:00:58.032
como en la llamada a la función, aquí abajo, cuando en realidad llamamos a la función.

0:00:58.032,0:01:03.264
Así que para la función "drawWinston()", vamos a pasar "faceX" y "faceY",

0:01:03.264,0:01:10.354
para que use los valores que pasamos en lugar de generarlos aleatoriamente.

0:01:10.354,0:01:15.207
Comencemos por pensar en los parámetros que vamos a enviar en estas llamadas a la función aquí abajo.

0:01:15.207,0:01:20.071
Queremos posicionar a "Winston" debajo de cada texto, así que probablemente queremos que la "x" y "y"

0:01:20.071,0:01:25.131
de cada "Winston" sea muy similar a los números que pasamos en la función "text()".

0:01:25.131,0:01:37.708
Probablemente, sólo unos 10 pixeles más abajo en la "y". Así que la primera podría ser 10 y 30, y luego 200, 30...

0:01:37.708,0:01:43.436
10, 230... 200, 230. Son las mismas coordenadas que las del texto.

0:01:43.436,0:01:49.596
Sólo estoy aumentando 10 en cada "y", porque quiero que quede un poco más abajo.

0:01:49.596,0:01:55.547
Ok, pero "Winston" no se ha movido. Esto es porque no le hemos dicho a nuestra función aquí arriba

0:01:55.547,0:02:00.127
que le estamos pasando los parámetros, así que sigue usando los valores aleatorios.

0:02:00.127,0:02:04.373
Entonces con el fin de decirle a esta función: "Oye te vamos a pasar esta información",

0:02:04.373,0:02:09.208
tenemos que dar los nombres de los parámetros dentro de estos paréntesis.

0:02:09.208,0:02:17.378
Así que los llamaremos "faceX" y "faceY", y los separamos por una coma, y los vamos a llamar así porque

0:02:17.378,0:02:21.192
así es como los estábamos usando para referirnos a ellos dentro de la función.

0:02:21.192,0:02:25.462
¿Ok? De esta manera no tenemos que reescribir el resto de nuestro código.

0:02:25.462,0:02:29.333
Pero sigue sin pasar nada; "Winston" está por todos lados.

0:02:29.333,0:02:35.873
Bueno, si observamos aquí arriba en nuestra función, estamos sobreescribiendo "faceX" y "faceY" con valores aleatorios.

0:02:35.873,0:02:39.793
Así que todo lo que tenemos que hacer [br]es borrar estas líneas...

0:02:39.793,0:02:50.333
¡Tan tan!, Ahora estamos pasando "faceX" y "faceY" a la función y la función está usando los valores que le estamos asignando aquí.

0:02:50.333,0:02:55.177
Ahora, como puedes ver, no posicioné correctamente a "Winston", porque olvidé

0:02:55.177,0:02:58.787
que el texto se posiciona a partir de la esquina superior izquierda,

0:02:58.787,0:03:06.773
y la cara se posiciona a partir del centro. Entonces sólo tengo que jugar un poco con mis números aquí, ¿de acuerdo?

0:03:06.773,0:03:13.238
Probablemente necesito mover la "x", [br]por encima, ok... este es nuestro niño...

0:03:13.238,0:03:18.733
Continuamos, y ahora todo lo que tengo que hacer es cambiar lo que estoy pasando a la función,

0:03:18.733,0:03:22.413
no tengo que cambiar la definición de función en absoluto,

0:03:22.413,0:03:28.868
porque la función siempre va a tomar los valores que le pasemos, ¿ok? Como lo hace con "ellipse()" y "rect()".

0:03:28.868,0:03:33.708
Ok, ya lo posicioné más o menos, pero[br]lo que vi es que "Winston" es muy grande.

0:03:33.708,0:03:35.956
Está sobre todo, no cabe.

0:03:35.956,0:03:39.087
Bueno, como escribí todo el código para dibujarlo en una función,

0:03:39.087,0:03:45.497
puedo cambiar el tamaño de todos ellos cambiando sólo la línea de código que dibuja las elipses.

0:03:45.497,0:03:51.126
Así que lo hacemos de 190, sí, "Winston" está a dieta, de 190.

0:03:51.126,0:04:01.414
Muy bien, ahora él va a quedar mejor y yo podría seguir ajustándolo para que en realidad quede ahí dentro, ¿cierto?

0:04:01.414,0:04:09.341
Interesante. Vamos a hacer una revisión final de lo que hace este código. Define una función llamada "drawWinston()",

0:04:09.341,0:04:15.193
y nos dice que esta función toma dos valores, etiquetados como "faceX" y "faceY",

0:04:15.193,0:04:20.305
y estos valores vienen básicamente como variables que podemos usar en cualquier lugar dentro de nuestra función,

0:04:20.305,0:04:25.165
así como usamos las variables declaradas en la parte de arriba.

0:04:25.165,0:04:30.321
Entonces podemos llamar esta función siempre que queramos después de que la declaramos,

0:04:30.321,0:04:35.001
y le podemos pasar valores diferentes, valores nuevos que va a usar cada vez.

0:04:35.001,0:04:38.230
Así que ahora han visto lo que es realmente interesante de las funciones.

0:04:38.230,0:04:41.230
Podemos llegar a un código que pensamos que podría ser muy útil para reutilizar,

0:04:41.230,0:04:46.910
pero podemos también usar parámetros y decir: "Oye, aquí hay una cosita que puedes cambiar en este código para personalizarlo"

0:04:46.910,0:04:53.342
Es como una receta. Escribes las instrucciones generales, y te das cuenta de repente que necesitas alimentar 4 "Wintons" en lugar de 1,

0:04:53.342,0:04:58.205
no tienes que empezar todo otra vez, sólo modificas las instrucciones originales y multiplicas todo por 4.

0:04:58.205,0:05:02.965
¡Así que ahora puedes empezar a pensar en las recetas de tu código! Yummy