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

2
00:00:06,001 --> 00:00:11,072
Lo que quiero hacer es posicionar a "Winston" debajo de cada una de estas etiquetas,

3
00:00:11,072 --> 00:00:13,210
para mostrarlo en cada etapa de la vida.

4
00:00:13,210 --> 00:00:15,197
Por ahora él está por todos lados.

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

6
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'"

7
00:00:26,714 --> 00:00:31,046
Y luego quiero poder especificar esta posición cada vez que llame a la función,


8
00:00:31,046 --> 00:00:34,046
de la misma manera que hicimos con "ellipse()" y con "rect()".

9
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í,

10
00:00:40,460 --> 00:00:44,623
y no sólo en lugares aleatorios cada vez 
que llamo la función.

11
00:00:44,623 --> 00:00:49,046
Así que para hacer eso, tenemos que especificar "parámetros" para la función,

12
00:00:49,046 --> 00:00:53,716
tanto en nuestra definición de la función - aquí en la parte superior -

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

14
00:00:58,032 --> 00:01:03,264
Así que para la función "drawWinston()", vamos a pasar "faceX" y "faceY",

15
00:01:03,264 --> 00:01:10,354
para que use los valores que pasamos en lugar de generarlos aleatoriamente.

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

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

18
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()".

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

20
00:01:37,708 --> 00:01:43,436
10, 230... 200, 230. Son las mismas coordenadas que las del texto.

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

22
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

23
00:01:55,547 --> 00:02:00,127
que le estamos pasando los parámetros, así que sigue usando los valores aleatorios.

24
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",

25
00:02:04,373 --> 00:02:09,208
tenemos que dar los nombres de los parámetros dentro de estos paréntesis.

26
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

27
00:02:17,378 --> 00:02:21,192
así es como los estábamos usando para referirnos a ellos dentro de la función.

28
00:02:21,192 --> 00:02:25,462
¿Ok? De esta manera no tenemos que reescribir el resto de nuestro código.

29
00:02:25,462 --> 00:02:29,333
Pero sigue sin pasar nada; "Winston" está por todos lados.

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

31
00:02:35,873 --> 00:02:39,793
Así que todo lo que tenemos que hacer 
es borrar estas líneas...

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

33
00:02:50,333 --> 00:02:55,177
Ahora, como puedes ver, no posicioné correctamente a "Winston", porque olvidé

34
00:02:55,177 --> 00:02:58,787
que el texto se posiciona a partir de la esquina superior izquierda,

35
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?

36
00:03:06,773 --> 00:03:13,238
Probablemente necesito mover la "x", 
por encima, ok... este es nuestro niño...

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

38
00:03:18,733 --> 00:03:22,413
no tengo que cambiar la definición de función en absoluto,

39
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()".

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

41
00:03:33,708 --> 00:03:35,956
Está sobre todo, no cabe.

42
00:03:35,956 --> 00:03:39,087
Bueno, como escribí todo el código para dibujarlo en una función,

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

44
00:03:45,497 --> 00:03:51,126
Así que lo hacemos de 190, sí, "Winston" está a dieta, de 190.

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

46
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()",

47
00:04:09,341 --> 00:04:15,193
y nos dice que esta función toma dos valores, etiquetados como "faceX" y "faceY",

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

49
00:04:20,305 --> 00:04:25,165
así como usamos las variables declaradas en la parte de arriba.

50
00:04:25,165 --> 00:04:30,321
Entonces podemos llamar esta función siempre que queramos después de que la declaramos,

51
00:04:30,321 --> 00:04:35,001
y le podemos pasar valores diferentes, valores nuevos que va a usar cada vez.

52
00:04:35,001 --> 00:04:38,230
Así que ahora han visto lo que es realmente interesante de las funciones.

53
00:04:38,230 --> 00:04:41,230
Podemos llegar a un código que pensamos que podría ser muy útil para reutilizar,

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

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

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

57
00:04:58,205 --> 00:05:02,965
¡Así que ahora puedes empezar a pensar en las recetas de tu código! Yummy