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

Lo que quiero hacer es posicionar a "Winston" debajo de cada una de estas etiquetas,

para mostrarlo en cada etapa de la vida.

Por ahora él está por todos lados.

Eso es porque estamos asignando a "faceX" y "faceY" números aleatorios dentro de la función.

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

Y luego quiero poder especificar esta posición cada vez que llame a la función,

de la misma manera que hicimos con "ellipse()" y con "rect()".

¿Está bien? Quiero poner un "Winston" aquí, y un "Winston" aquí, y un" Winston" aquí y un "Winston" aquí,

y no sólo en lugares aleatorios cada vez 
que llamo la función.

Así que para hacer eso, tenemos que especificar "parámetros" para la función,

tanto en nuestra definición de la función - aquí en la parte superior -

como en la llamada a la función, aquí abajo, cuando en realidad llamamos a la función.

Así que para la función "drawWinston()", vamos a pasar "faceX" y "faceY",

para que use los valores que pasamos en lugar de generarlos aleatoriamente.

Comencemos por pensar en los parámetros que vamos a enviar en estas llamadas a la función aquí abajo.

Queremos posicionar a "Winston" debajo de cada texto, así que probablemente queremos que la "x" y "y"

de cada "Winston" sea muy similar a los números que pasamos en la función "text()".

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

10, 230... 200, 230. Son las mismas coordenadas que las del texto.

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

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

que le estamos pasando los parámetros, así que sigue usando los valores aleatorios.

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

tenemos que dar los nombres de los parámetros dentro de estos paréntesis.

Así que los llamaremos "faceX" y "faceY", y los separamos por una coma, y los vamos a llamar así porque

así es como los estábamos usando para referirnos a ellos dentro de la función.

¿Ok? De esta manera no tenemos que reescribir el resto de nuestro código.

Pero sigue sin pasar nada; "Winston" está por todos lados.

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

Así que todo lo que tenemos que hacer 
es borrar estas líneas...

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

Ahora, como puedes ver, no posicioné correctamente a "Winston", porque olvidé

que el texto se posiciona a partir de la esquina superior izquierda,

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

Probablemente necesito mover la "x", 
por encima, ok... este es nuestro niño...

Continuamos, y ahora todo lo que tengo que hacer es cambiar lo que estoy pasando a la función,

no tengo que cambiar la definición de función en absoluto,

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

Ok, ya lo posicioné más o menos, pero
lo que vi es que "Winston" es muy grande.

Está sobre todo, no cabe.

Bueno, como escribí todo el código para dibujarlo en una función,

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

Así que lo hacemos de 190, sí, "Winston" está a dieta, de 190.

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

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

y nos dice que esta función toma dos valores, etiquetados como "faceX" y "faceY",

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

así como usamos las variables declaradas en la parte de arriba.

Entonces podemos llamar esta función siempre que queramos después de que la declaramos,

y le podemos pasar valores diferentes, valores nuevos que va a usar cada vez.

Así que ahora han visto lo que es realmente interesante de las funciones.

Podemos llegar a un código que pensamos que podría ser muy útil para reutilizar,

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

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

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

¡Así que ahora puedes empezar a pensar en las recetas de tu código! Yummy