WEBVTT

00:00:01.383 --> 00:00:03.649
Ahora hablemos sobre algo que has estado usando

00:00:03.649 --> 00:00:05.685
todo este tiempo: Funciones.

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

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

00:00:12.376 --> 00:00:14.902
lo que les has dicho que hagan.

00:00:14.902 --> 00:00:16.536
¿Qué es una función en realidad?

00:00:16.536 --> 00:00:19.233
Es una colección de código que agrupamos

00:00:19.233 --> 00:00:21.240
y le damos un nombre porque queremos poder

00:00:21.240 --> 00:00:23.538
usar la funcionalidad de ese código muchas veces.

00:00:23.538 --> 00:00:25.981
Piensa en "rect()".
¿Qué es lo que hace "rect()"?

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

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

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

00:00:33.847 --> 00:00:36.751
Pero nos damos cuenta de que lo que queremos hacer

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

00:00:39.322 --> 00:00:40.773
y sería realmente molesto

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

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

00:00:44.282 --> 00:00:45.818
y a la siguiente y a la siguiente.

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

00:00:48.538 --> 00:00:50.628
y esa función hace exactamente lo mismo

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

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

00:00:58.399 --> 00:01:00.519
que tenemos disponibles para todos los programas

00:01:00.519 --> 00:01:02.729
que usamos aquí en Khan Academy.

00:01:02.729 --> 00:01:05.339
Pero también tú puedes hacer tus propias funciones

00:01:05.339 --> 00:01:07.899
para usar en cada uno de tus programas.

00:01:07.899 --> 00:01:11.020
Por ejemplo, digamos que estamos haciendo un programa

00:01:11.020 --> 00:01:14.024
y queremos dibujar a "Winston" muchas veces,

00:01:14.024 --> 00:01:17.017
tal vez porque vamos a contar la historia de "Winston"

00:01:17.017 --> 00:01:20.190
y vamos a mostrarlo en cada etapa de su vida.

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

00:01:24.243 --> 00:01:27.106
Tenemos las variables "faceX" y "faceY"

00:01:27.106 --> 00:01:29.029
para almacenar el centro de la cara,

00:01:29.029 --> 00:01:30.933
y luego dibujamos los ojos y la boca

00:01:30.933 --> 00:01:33.039
en relación con esas variables.

00:01:33.039 --> 00:01:34.732
En este momento el programa ve el código,

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

00:01:37.325 --> 00:01:39.739
y lo ejecuta sólo una vez.

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

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

00:01:46.439 --> 00:01:48.307
declaramos una variable, porque en realidad

00:01:48.307 --> 00:01:49.765
es lo que estamos haciendo.

00:01:49.765 --> 00:01:52.077
Así que escribimos "var drawWinston",

00:01:52.077 --> 00:01:54.551
Y le damos un nombre lindo, muy descriptivo,

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

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

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

00:02:08.357 --> 00:02:11.563
y luego una llave que cierra "}" y punto y coma ";".

00:02:11.563 --> 00:02:14.490
Ok, entonces lo que necesitamos hacer es poner todo

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

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

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

00:02:26.816 --> 00:02:28.970
Así que lo que ahora tenemos es esta variable

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

00:02:32.379 --> 00:02:35.759
una etiqueta a este bloque de código de manera que podamos decirle

00:02:35.759 --> 00:02:37.859
a nuestro programa en cualquier momento,

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

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

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

00:02:46.535 --> 00:02:49.357
¡Perdimos a "Winston"! ¿A dónde se fue?

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

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

00:02:55.907 --> 00:02:57.842
que quiero ejecutar más tarde,

00:02:57.842 --> 00:03:00.807
pero sólo cuando te diga que lo ejecutes".

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

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

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

00:03:13.753 --> 00:03:16.376
seguido de los paréntesis que abren y cierran,

00:03:16.376 --> 00:03:18.959
y por supuesto, nuestro punto y coma, y ¡tan tan!

00:03:18.959 --> 00:03:20.942
¡Tenemos a "Winston"!

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

00:03:24.237 --> 00:03:27.373
porque todo lo que hemos hecho es que nuestro programa haga exactamente

00:03:27.373 --> 00:03:30.239
lo mismo que hacía antes.
Un poco tonto, ¿no?

00:03:30.239 --> 00:03:32.920
El punto es que a las funciones las podemos reutilizar.

00:03:32.920 --> 00:03:34.957
Así que hagámoslo ahora.

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

00:03:41.162 --> 00:03:46.572
Mmm, pero se ve igual, bueno, funciona.

00:03:46.572 --> 00:03:48.998
Está dibujando muchos "Winstons" pero el problema

00:03:48.998 --> 00:03:51.234
es que todos están en el mismo lugar.

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

00:03:54.428 --> 00:03:57.631
tres "Winstons", pero no la tenemos.

00:03:57.631 --> 00:04:00.334
(No sé si tú la tengas.)

00:04:00.334 --> 00:04:03.440
Pero podemos hacer un pequeño cambio en nuestra función

00:04:03.440 --> 00:04:05.056
que hará que sea obvio.

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

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

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

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

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

00:04:23.023 --> 00:04:26.566
y si presionamos "Restart", podemos tener "Winstons" aleatorios.

00:04:26.566 --> 00:04:29.359
¡Genial! ¡Whoo!

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

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

00:04:34.916 --> 00:04:38.317
Tendríamos tres veces esta cantidad de código.

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

00:04:40.960 --> 00:04:43.796
porque probablemente no queramos tener "Winstons" aleatorios.

00:04:43.796 --> 00:04:45.736
Probablemente queremos poder posicionar a "Winston"

00:04:45.736 --> 00:04:47.846
en puntos específicos de la pantalla.

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

00:04:49.943 --> 00:04:52.483
a nuestras funciones, y entonces

00:04:52.000 --> 00:04:54.710
podrás hacer eso exactamente.