< Return to Video

Parámetros de una función (Versión en Video)

  • 0:01 - 0:06
    Estamos de regreso en nuestro programa para dibujar a "Winston", y he añadido algo de texto en él.
  • 0:06 - 0:11
    Lo que quiero hacer es posicionar a "Winston" debajo de cada una de estas etiquetas,
  • 0:11 - 0:13
    para mostrarlo en cada etapa de la vida.
  • 0:13 - 0:15
    Por ahora él está por todos lados.
  • 0:15 - 0:20
    Eso es porque estamos asignando a "faceX" y "faceY" números aleatorios dentro de la función.
  • 0:20 - 0:27
    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:27 - 0:31
    Y luego quiero poder especificar esta posición cada vez que llame a la función,
  • 0:31 - 0:34
    de la misma manera que hicimos con "ellipse()" y con "rect()".
  • 0:34 - 0:40
    ¿Está bien? Quiero poner un "Winston" aquí, y un "Winston" aquí, y un" Winston" aquí y un "Winston" aquí,
  • 0:40 - 0:45
    y no sólo en lugares aleatorios cada vez
    que llamo la función.
  • 0:45 - 0:49
    Así que para hacer eso, tenemos que especificar "parámetros" para la función,
  • 0:49 - 0:54
    tanto en nuestra definición de la función - aquí en la parte superior -
  • 0:54 - 0:58
    como en la llamada a la función, aquí abajo, cuando en realidad llamamos a la función.
  • 0:58 - 1:03
    Así que para la función "drawWinston()", vamos a pasar "faceX" y "faceY",
  • 1:03 - 1:10
    para que use los valores que pasamos en lugar de generarlos aleatoriamente.
  • 1:10 - 1:15
    Comencemos por pensar en los parámetros que vamos a enviar en estas llamadas a la función aquí abajo.
  • 1:15 - 1:20
    Queremos posicionar a "Winston" debajo de cada texto, así que probablemente queremos que la "x" y "y"
  • 1:20 - 1:25
    de cada "Winston" sea muy similar a los números que pasamos en la función "text()".
  • 1:25 - 1:38
    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...
  • 1:38 - 1:43
    10, 230... 200, 230. Son las mismas coordenadas que las del texto.
  • 1:43 - 1:50
    Sólo estoy aumentando 10 en cada "y", porque quiero que quede un poco más abajo.
  • 1:50 - 1:56
    Ok, pero "Winston" no se ha movido. Esto es porque no le hemos dicho a nuestra función aquí arriba
  • 1:56 - 2:00
    que le estamos pasando los parámetros, así que sigue usando los valores aleatorios.
  • 2:00 - 2:04
    Entonces con el fin de decirle a esta función: "Oye te vamos a pasar esta información",
  • 2:04 - 2:09
    tenemos que dar los nombres de los parámetros dentro de estos paréntesis.
  • 2:09 - 2:17
    Así que los llamaremos "faceX" y "faceY", y los separamos por una coma, y los vamos a llamar así porque
  • 2:17 - 2:21
    así es como los estábamos usando para referirnos a ellos dentro de la función.
  • 2:21 - 2:25
    ¿Ok? De esta manera no tenemos que reescribir el resto de nuestro código.
  • 2:25 - 2:29
    Pero sigue sin pasar nada; "Winston" está por todos lados.
  • 2:29 - 2:36
    Bueno, si observamos aquí arriba en nuestra función, estamos sobreescribiendo "faceX" y "faceY" con valores aleatorios.
  • 2:36 - 2:40
    Así que todo lo que tenemos que hacer
    es borrar estas líneas...
  • 2:40 - 2:50
    ¡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í.
  • 2:50 - 2:55
    Ahora, como puedes ver, no posicioné correctamente a "Winston", porque olvidé
  • 2:55 - 2:59
    que el texto se posiciona a partir de la esquina superior izquierda,
  • 2:59 - 3:07
    y la cara se posiciona a partir del centro. Entonces sólo tengo que jugar un poco con mis números aquí, ¿de acuerdo?
  • 3:07 - 3:13
    Probablemente necesito mover la "x",
    por encima, ok... este es nuestro niño...
  • 3:13 - 3:19
    Continuamos, y ahora todo lo que tengo que hacer es cambiar lo que estoy pasando a la función,
  • 3:19 - 3:22
    no tengo que cambiar la definición de función en absoluto,
  • 3:22 - 3:29
    porque la función siempre va a tomar los valores que le pasemos, ¿ok? Como lo hace con "ellipse()" y "rect()".
  • 3:29 - 3:34
    Ok, ya lo posicioné más o menos, pero
    lo que vi es que "Winston" es muy grande.
  • 3:34 - 3:36
    Está sobre todo, no cabe.
  • 3:36 - 3:39
    Bueno, como escribí todo el código para dibujarlo en una función,
  • 3:39 - 3:45
    puedo cambiar el tamaño de todos ellos cambiando sólo la línea de código que dibuja las elipses.
  • 3:45 - 3:51
    Así que lo hacemos de 190, sí, "Winston" está a dieta, de 190.
  • 3:51 - 4:01
    Muy bien, ahora él va a quedar mejor y yo podría seguir ajustándolo para que en realidad quede ahí dentro, ¿cierto?
  • 4:01 - 4:09
    Interesante. Vamos a hacer una revisión final de lo que hace este código. Define una función llamada "drawWinston()",
  • 4:09 - 4:15
    y nos dice que esta función toma dos valores, etiquetados como "faceX" y "faceY",
  • 4:15 - 4:20
    y estos valores vienen básicamente como variables que podemos usar en cualquier lugar dentro de nuestra función,
  • 4:20 - 4:25
    así como usamos las variables declaradas en la parte de arriba.
  • 4:25 - 4:30
    Entonces podemos llamar esta función siempre que queramos después de que la declaramos,
  • 4:30 - 4:35
    y le podemos pasar valores diferentes, valores nuevos que va a usar cada vez.
  • 4:35 - 4:38
    Así que ahora han visto lo que es realmente interesante de las funciones.
  • 4:38 - 4:41
    Podemos llegar a un código que pensamos que podría ser muy útil para reutilizar,
  • 4:41 - 4:47
    pero podemos también usar parámetros y decir: "Oye, aquí hay una cosita que puedes cambiar en este código para personalizarlo"
  • 4:47 - 4:53
    Es como una receta. Escribes las instrucciones generales, y te das cuenta de repente que necesitas alimentar 4 "Wintons" en lugar de 1,
  • 4:53 - 4:58
    no tienes que empezar todo otra vez, sólo modificas las instrucciones originales y multiplicas todo por 4.
  • 4:58 - 5:03
    ¡Así que ahora puedes empezar a pensar en las recetas de tu código! Yummy
Title:
Parámetros de una función (Versión en Video)
Description:

more » « less
Video Language:
English
Duration:
05:05

Spanish, Mexican subtitles

Revisions