WEBVTT

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

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

00:00:11.072 --> 00:00:13.210
para mostrarlo en cada etapa de la vida.

00:00:13.210 --> 00:00:15.197
Por ahora él está por todos lados.

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

00:00:20.449 --> 00: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'"

00:00:26.714 --> 00:00:31.046
Y luego quiero poder especificar esta posición cada vez que llame a la función,


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

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

00:00:40.460 --> 00:00:44.623
y no sólo en lugares aleatorios cada vez 
que llamo la función.

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

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

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

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

00:01:03.264 --> 00:01:10.354
para que use los valores que pasamos en lugar de generarlos aleatoriamente.

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

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

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

00:01:25.131 --> 00: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...

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

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

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

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

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

00:02:04.373 --> 00:02:09.208
tenemos que dar los nombres de los parámetros dentro de estos paréntesis.

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

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

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

00:02:25.462 --> 00:02:29.333
Pero sigue sin pasar nada; "Winston" está por todos lados.

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

00:02:35.873 --> 00:02:39.793
Así que todo lo que tenemos que hacer 
es borrar estas líneas...

00:02:39.793 --> 00: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í.

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

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

00:02:58.787 --> 00: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?

00:03:06.773 --> 00:03:13.238
Probablemente necesito mover la "x", 
por encima, ok... este es nuestro niño...

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

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

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

00:03:28.868 --> 00:03:33.708
Ok, ya lo posicioné más o menos, pero
lo que vi es que "Winston" es muy grande.

00:03:33.708 --> 00:03:35.956
Está sobre todo, no cabe.

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

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

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

00:03:51.126 --> 00: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?

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

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

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

00:04:20.305 --> 00:04:25.165
así como usamos las variables declaradas en la parte de arriba.

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

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

00:04:35.001 --> 00:04:38.230
Así que ahora han visto lo que es realmente interesante de las funciones.

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

00:04:41.230 --> 00: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"

00:04:46.910 --> 00: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,

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

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