Funciones (Versión en Video)

Ahora hablemos sobre algo que has estado usando

todo este tiempo: Funciones.

Cada vez que has usado comandos como "rect()" o "fill()" o "text()",

has estado llamando funciones, y esas funciones han dibujado

lo que les has dicho que hagan.

¿Qué es una función en realidad?

Es una colección de código que agrupamos

y le damos un nombre porque queremos poder

usar la funcionalidad de ese código muchas veces.

Piensa en "rect()".
¿Qué es lo que hace "rect()"?

Sólo dibuja cuatro líneas, ¿cierto?

Podríamos hacer lo mismo usando nuestra función "line()", ¿cierto?

Y aquí tenemos lo que parece un rectángulo.

Pero nos damos cuenta de que lo que queremos hacer

es dibujar un rectángulo muchas veces,

y sería realmente molesto

hacer el cálculo cada vez, para tratar de averiguar

cómo dibujar una línea de una esquina a la siguiente

y a la siguiente y a la siguiente.

Así que en lugar de eso, sólo hacemos una función "rect()",

y esa función hace exactamente lo mismo

que esas cuatro líneas de código, pero con menos código.

Eso es muy interesante, y "rect()" es una de esas funciones

que tenemos disponibles para todos los programas

que usamos aquí en Khan Academy.

Pero también tú puedes hacer tus propias funciones

para usar en cada uno de tus programas.

Por ejemplo, digamos que estamos haciendo un programa

y queremos dibujar a "Winston" muchas veces,

tal vez porque vamos a contar la historia de "Winston"

y vamos a mostrarlo en cada etapa de su vida.

Así que aquí tenemos lo que podría ser el principio del nuestro código para dibujar a "Winston":

Tenemos las variables "faceX" y "faceY"

para almacenar el centro de la cara,

y luego dibujamos los ojos y la boca

en relación con esas variables.

En este momento el programa ve el código,

y no está dentro de ninguna función, así que lo ejecuta,

y lo ejecuta sólo una vez.

Ok, vamos a convertir esto en una función.

Para hacerlo, lo hacemos muy similar a la manera en que

declaramos una variable, porque en realidad

es lo que estamos haciendo.

Así que escribimos "var drawWinston",

Y le damos un nombre lindo, muy descriptivo,

y luego "=", pero aquí, en lugar de escribir un número o una cadena de caracteres,

vamos a escribir "function", debes asegurarte de escribirlo correctamente,

y luego paréntesis vacíos "()" y luego una llave que abre "{"

y luego una llave que cierra "}" y punto y coma ";".

Ok, entonces lo que necesitamos hacer es poner todo

lo que queremos dentro de nuestra función entre la llave que abre y la que cierra.

Así que tomamos todo este código de aquí,

y lo ponemos en nuestra función, indentando bien, y ¡tan tan!

Así que lo que ahora tenemos es esta variable

que está almacenando una función - lo que hicimos básicamente fue darle

una etiqueta a este bloque de código de manera que podamos decirle

a nuestro programa en cualquier momento,

"¡Oye, encuentra este bloque de código con esta etiqueta y ejecútalo!"

Estamos haciendo que este fragmento de código sea re-usable.

Pero ahora fíjate, ¡que ya no tenemos a "Winston"!

¡Perdimos a "Winston"! ¿A dónde se fue?

Ok, lo que sucedió es que una vez que pusimos este código dentro de una función,

le dijimos a nuestro programa: "oye, aquí hay un pedazo de código

que quiero ejecutar más tarde,

pero sólo cuando te diga que lo ejecutes".

Así que tenemos que decirle al programa que ejecute el código, lo que significa que necesitamos

llamar la función, de la misma manera en que lo hacemos con "ellipse()" y "rect()" y "line()".

Así que sólo escribimos el nombre de la función ("drawWinston")

seguido de los paréntesis que abren y cierran,

y por supuesto, nuestro punto y coma, y ¡tan tan!

¡Tenemos a "Winston"!

Ok, pienso que está muy bien, pero tal vez no piensen que está bien

porque todo lo que hemos hecho es que nuestro programa haga exactamente

lo mismo que hacía antes.
Un poco tonto, ¿no?

El punto es que a las funciones las podemos reutilizar.

Así que hagámoslo ahora.

Podemos copiar y pegar la llamada a la función, ¡tan tan!, ¡tan tan!, una y otra vez.

Mmm, pero se ve igual, bueno, funciona.

Está dibujando muchos "Winstons" pero el problema

es que todos están en el mismo lugar.

Si tuviéramos vista de rayos x, veríamos

tres "Winstons", pero no la tenemos.

(No sé si tú la tengas.)

Pero podemos hacer un pequeño cambio en nuestra función

que hará que sea obvio.

Entonces ¿ves que "faceX" y "faceY" siempre están en 202 y 208?

Podemos cambiar esto usando la función "random()",

digamos "random() form 50 to 350", y eso genera

un número aleatorio entre estos dos, y podemos hacer lo mismo aquí,

y cada vez que llamamos la función, genera un nuevo número aleatorio,

y si presionamos "Restart", podemos tener "Winstons" aleatorios.

¡Genial! ¡Whoo!

Muy bien, pienso que esto es genial porque tendríamos

mucho código para escribir esto si no lo tuviéramos en una función.

Tendríamos tres veces esta cantidad de código.

Pero todavía no es tan útil como podría ser,

porque probablemente no queramos tener "Winstons" aleatorios.

Probablemente queremos poder posicionar a "Winston"

en puntos específicos de la pantalla.

Así que mantente en contacto, porque próximamente hablaremos sobre cómo pasar parámentros

a nuestras funciones, y entonces

podrás hacer eso exactamente.