0:00:01.383,0:00:03.649
Ahora hablemos sobre algo que has estado usando

0:00:03.649,0:00:05.685
todo este tiempo: Funciones.

0:00:05.685,0:00:09.140
Cada vez que has usado comandos como "rect()" o "fill()" o "text()",

0:00:09.140,0:00:12.376
has estado llamando funciones, y esas funciones han dibujado

0:00:12.376,0:00:14.902
lo que les has dicho que hagan.

0:00:14.902,0:00:16.536
¿Qué es una función en realidad?

0:00:16.536,0:00:19.233
Es una colección de código que agrupamos

0:00:19.233,0:00:21.240
y le damos un nombre porque queremos poder

0:00:21.240,0:00:23.538
usar la funcionalidad de ese código muchas veces.

0:00:23.538,0:00:25.981
Piensa en "rect()".[br]¿Qué es lo que hace "rect()"?

0:00:25.981,0:00:28.551
Sólo dibuja cuatro líneas, ¿cierto?

0:00:28.551,0:00:31.541
Podríamos hacer lo mismo usando nuestra función "line()", ¿cierto?

0:00:31.541,0:00:33.847
Y aquí tenemos lo que parece un rectángulo.

0:00:33.847,0:00:36.751
Pero nos damos cuenta de que lo que queremos hacer

0:00:36.751,0:00:39.322
es dibujar un rectángulo muchas veces,

0:00:39.322,0:00:40.773
y sería realmente molesto

0:00:40.773,0:00:42.784
hacer el cálculo cada vez, para tratar de averiguar

0:00:42.784,0:00:44.282
cómo dibujar una línea de una esquina a la siguiente

0:00:44.282,0:00:45.818
y a la siguiente y a la siguiente.

0:00:45.818,0:00:48.538
Así que en lugar de eso, sólo hacemos una función "rect()",

0:00:48.538,0:00:50.628
y esa función hace exactamente lo mismo

0:00:50.628,0:00:54.888
que esas cuatro líneas de código, pero con menos código.

0:00:54.888,0:00:58.399
Eso es muy interesante, y "rect()" es una de esas funciones

0:00:58.399,0:01:00.519
que tenemos disponibles para todos los programas

0:01:00.519,0:01:02.729
que usamos aquí en Khan Academy.

0:01:02.729,0:01:05.339
Pero también tú puedes hacer tus propias funciones

0:01:05.339,0:01:07.899
para usar en cada uno de tus programas.

0:01:07.899,0:01:11.020
Por ejemplo, digamos que estamos haciendo un programa

0:01:11.020,0:01:14.024
y queremos dibujar a "Winston" muchas veces,

0:01:14.024,0:01:17.017
tal vez porque vamos a contar la historia de "Winston"

0:01:17.017,0:01:20.190
y vamos a mostrarlo en cada etapa de su vida.

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

0:01:24.243,0:01:27.106
Tenemos las variables "faceX" y "faceY"

0:01:27.106,0:01:29.029
para almacenar el centro de la cara,

0:01:29.029,0:01:30.933
y luego dibujamos los ojos y la boca

0:01:30.933,0:01:33.039
en relación con esas variables.

0:01:33.039,0:01:34.732
En este momento el programa ve el código,

0:01:34.732,0:01:37.325
y no está dentro de ninguna función, así que lo ejecuta,

0:01:37.325,0:01:39.739
y lo ejecuta sólo una vez.

0:01:39.739,0:01:43.717
Ok, vamos a convertir esto en una función.

0:01:43.717,0:01:46.439
Para hacerlo, lo hacemos muy similar a la manera en que

0:01:46.439,0:01:48.307
declaramos una variable, porque en realidad

0:01:48.307,0:01:49.765
es lo que estamos haciendo.

0:01:49.765,0:01:52.077
Así que escribimos "var drawWinston",

0:01:52.077,0:01:54.551
Y le damos un nombre lindo, muy descriptivo,

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

0:01:59.037,0:02:02.721
vamos a escribir "function", debes asegurarte de escribirlo correctamente,

0:02:02.721,0:02:08.357
y luego paréntesis vacíos "()" y luego una llave que abre "{"

0:02:08.357,0:02:11.563
y luego una llave que cierra "}" y punto y coma ";".

0:02:11.563,0:02:14.490
Ok, entonces lo que necesitamos hacer es poner todo

0:02:14.490,0:02:19.454
lo que queremos dentro de nuestra función entre la llave que abre y la que cierra.

0:02:19.454,0:02:22.130
Así que tomamos todo este código de aquí,

0:02:22.130,0:02:26.816
y lo ponemos en nuestra función, indentando bien, y ¡tan tan!

0:02:26.816,0:02:28.970
Así que lo que ahora tenemos es esta variable

0:02:28.970,0:02:32.379
que está almacenando una función - lo que hicimos básicamente fue darle

0:02:32.379,0:02:35.759
una etiqueta a este bloque de código de manera que podamos decirle

0:02:35.759,0:02:37.859
a nuestro programa en cualquier momento,

0:02:37.859,0:02:40.765
"¡Oye, encuentra este bloque de código con esta etiqueta y ejecútalo!"

0:02:40.765,0:02:43.551
Estamos haciendo que este fragmento de código sea re-usable.

0:02:43.551,0:02:46.535
Pero ahora fíjate, ¡que ya no tenemos a "Winston"!

0:02:46.535,0:02:49.357
¡Perdimos a "Winston"! ¿A dónde se fue?

0:02:49.357,0:02:53.025
Ok, lo que sucedió es que una vez que pusimos este código dentro de una función,

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

0:02:55.907,0:02:57.842
que quiero ejecutar más tarde,

0:02:57.842,0:03:00.807
pero sólo cuando te diga que lo ejecutes".

0:03:00.807,0:03:04.288
Así que tenemos que decirle al programa que ejecute el código, lo que significa que necesitamos

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

0:03:09.400,0:03:13.753
Así que sólo escribimos el nombre de la función ("drawWinston")

0:03:13.753,0:03:16.376
seguido de los paréntesis que abren y cierran,

0:03:16.376,0:03:18.959
y por supuesto, nuestro punto y coma, y ¡tan tan!

0:03:18.959,0:03:20.942
¡Tenemos a "Winston"!

0:03:20.942,0:03:24.237
Ok, pienso que está muy bien, pero tal vez no piensen que está bien

0:03:24.237,0:03:27.373
porque todo lo que hemos hecho es que nuestro programa haga exactamente

0:03:27.373,0:03:30.239
lo mismo que hacía antes.[br]Un poco tonto, ¿no?

0:03:30.239,0:03:32.920
El punto es que a las funciones las podemos reutilizar.

0:03:32.920,0:03:34.957
Así que hagámoslo ahora.

0:03:34.957,0:03:41.162
Podemos copiar y pegar la llamada a la función, ¡tan tan!, ¡tan tan!, una y otra vez.

0:03:41.162,0:03:46.572
Mmm, pero se ve igual, bueno, funciona.

0:03:46.572,0:03:48.998
Está dibujando muchos "Winstons" pero el problema

0:03:48.998,0:03:51.234
es que todos están en el mismo lugar.

0:03:51.234,0:03:54.428
Si tuviéramos vista de rayos x, veríamos

0:03:54.428,0:03:57.631
tres "Winstons", pero no la tenemos.

0:03:57.631,0:04:00.334
(No sé si tú la tengas.)

0:04:00.334,0:04:03.440
Pero podemos hacer un pequeño cambio en nuestra función

0:04:03.440,0:04:05.056
que hará que sea obvio.

0:04:05.056,0:04:08.825
Entonces ¿ves que "faceX" y "faceY" siempre están en 202 y 208?

0:04:08.825,0:04:11.587
Podemos cambiar esto usando la función "random()",

0:04:11.587,0:04:14.849
digamos "random() form 50 to 350", y eso genera

0:04:14.849,0:04:19.183
un número aleatorio entre estos dos, y podemos hacer lo mismo aquí,

0:04:19.183,0:04:23.023
y cada vez que llamamos la función, genera un nuevo número aleatorio,

0:04:23.023,0:04:26.566
y si presionamos "Restart", podemos tener "Winstons" aleatorios.

0:04:26.566,0:04:29.359
¡Genial! ¡Whoo!

0:04:29.359,0:04:32.095
Muy bien, pienso que esto es genial porque tendríamos

0:04:32.095,0:04:34.916
mucho código para escribir esto si no lo tuviéramos en una función.

0:04:34.916,0:04:38.317
Tendríamos tres veces esta cantidad de código.

0:04:38.317,0:04:40.960
Pero todavía no es tan útil como podría ser,

0:04:40.960,0:04:43.796
porque probablemente no queramos tener "Winstons" aleatorios.

0:04:43.796,0:04:45.736
Probablemente queremos poder posicionar a "Winston"

0:04:45.736,0:04:47.846
en puntos específicos de la pantalla.

0:04:47.846,0:04:49.943
Así que mantente en contacto, porque próximamente hablaremos sobre cómo pasar parámentros

0:04:49.943,0:04:52.483
a nuestras funciones, y entonces

0:04:52.000,0:04:54.710
podrás hacer eso exactamente.