-
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
