[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.38,0:00:03.65,Default,,0000,0000,0000,,Ahora hablemos sobre algo que has estado usando
Dialogue: 0,0:00:03.65,0:00:05.68,Default,,0000,0000,0000,,todo este tiempo: Funciones.
Dialogue: 0,0:00:05.68,0:00:09.14,Default,,0000,0000,0000,,Cada vez que has usado comandos como "rect()" o "fill()" o "text()",
Dialogue: 0,0:00:09.14,0:00:12.38,Default,,0000,0000,0000,,has estado llamando funciones, y esas funciones han dibujado
Dialogue: 0,0:00:12.38,0:00:14.90,Default,,0000,0000,0000,,lo que les has dicho que hagan.
Dialogue: 0,0:00:14.90,0:00:16.54,Default,,0000,0000,0000,,¿Qué es una función en realidad?
Dialogue: 0,0:00:16.54,0:00:19.23,Default,,0000,0000,0000,,Es una colección de código que agrupamos
Dialogue: 0,0:00:19.23,0:00:21.24,Default,,0000,0000,0000,,y le damos un nombre porque queremos poder
Dialogue: 0,0:00:21.24,0:00:23.54,Default,,0000,0000,0000,,usar la funcionalidad de ese código muchas veces.
Dialogue: 0,0:00:23.54,0:00:25.98,Default,,0000,0000,0000,,Piensa en "rect()".\N¿Qué es lo que hace "rect()"?
Dialogue: 0,0:00:25.98,0:00:28.55,Default,,0000,0000,0000,,Sólo dibuja cuatro líneas, ¿cierto?
Dialogue: 0,0:00:28.55,0:00:31.54,Default,,0000,0000,0000,,Podríamos hacer lo mismo usando nuestra función "line()", ¿cierto?
Dialogue: 0,0:00:31.54,0:00:33.85,Default,,0000,0000,0000,,Y aquí tenemos lo que parece un rectángulo.
Dialogue: 0,0:00:33.85,0:00:36.75,Default,,0000,0000,0000,,Pero nos damos cuenta de que lo que queremos hacer
Dialogue: 0,0:00:36.75,0:00:39.32,Default,,0000,0000,0000,,es dibujar un rectángulo muchas veces,
Dialogue: 0,0:00:39.32,0:00:40.77,Default,,0000,0000,0000,,y sería realmente molesto
Dialogue: 0,0:00:40.77,0:00:42.78,Default,,0000,0000,0000,,hacer el cálculo cada vez, para tratar de averiguar
Dialogue: 0,0:00:42.78,0:00:44.28,Default,,0000,0000,0000,,cómo dibujar una línea de una esquina a la siguiente
Dialogue: 0,0:00:44.28,0:00:45.82,Default,,0000,0000,0000,,y a la siguiente y a la siguiente.
Dialogue: 0,0:00:45.82,0:00:48.54,Default,,0000,0000,0000,,Así que en lugar de eso, sólo hacemos una función "rect()",
Dialogue: 0,0:00:48.54,0:00:50.63,Default,,0000,0000,0000,,y esa función hace exactamente lo mismo
Dialogue: 0,0:00:50.63,0:00:54.89,Default,,0000,0000,0000,,que esas cuatro líneas de código, pero con menos código.
Dialogue: 0,0:00:54.89,0:00:58.40,Default,,0000,0000,0000,,Eso es muy interesante, y "rect()" es una de esas funciones
Dialogue: 0,0:00:58.40,0:01:00.52,Default,,0000,0000,0000,,que tenemos disponibles para todos los programas
Dialogue: 0,0:01:00.52,0:01:02.73,Default,,0000,0000,0000,,que usamos aquí en Khan Academy.
Dialogue: 0,0:01:02.73,0:01:05.34,Default,,0000,0000,0000,,Pero también tú puedes hacer tus propias funciones
Dialogue: 0,0:01:05.34,0:01:07.90,Default,,0000,0000,0000,,para usar en cada uno de tus programas.
Dialogue: 0,0:01:07.90,0:01:11.02,Default,,0000,0000,0000,,Por ejemplo, digamos que estamos haciendo un programa
Dialogue: 0,0:01:11.02,0:01:14.02,Default,,0000,0000,0000,,y queremos dibujar a "Winston" muchas veces,
Dialogue: 0,0:01:14.02,0:01:17.02,Default,,0000,0000,0000,,tal vez porque vamos a contar la historia de "Winston"
Dialogue: 0,0:01:17.02,0:01:20.19,Default,,0000,0000,0000,,y vamos a mostrarlo en cada etapa de su vida.
Dialogue: 0,0:01:20.19,0:01:24.24,Default,,0000,0000,0000,,Así que aquí tenemos lo que podría ser el principio del nuestro código para dibujar a "Winston":
Dialogue: 0,0:01:24.24,0:01:27.11,Default,,0000,0000,0000,,Tenemos las variables "faceX" y "faceY"
Dialogue: 0,0:01:27.11,0:01:29.03,Default,,0000,0000,0000,,para almacenar el centro de la cara,
Dialogue: 0,0:01:29.03,0:01:30.93,Default,,0000,0000,0000,,y luego dibujamos los ojos y la boca
Dialogue: 0,0:01:30.93,0:01:33.04,Default,,0000,0000,0000,,en relación con esas variables.
Dialogue: 0,0:01:33.04,0:01:34.73,Default,,0000,0000,0000,,En este momento el programa ve el código,
Dialogue: 0,0:01:34.73,0:01:37.32,Default,,0000,0000,0000,,y no está dentro de ninguna función, así que lo ejecuta,
Dialogue: 0,0:01:37.32,0:01:39.74,Default,,0000,0000,0000,,y lo ejecuta sólo una vez.
Dialogue: 0,0:01:39.74,0:01:43.72,Default,,0000,0000,0000,,Ok, vamos a convertir esto en una función.
Dialogue: 0,0:01:43.72,0:01:46.44,Default,,0000,0000,0000,,Para hacerlo, lo hacemos muy similar a la manera en que
Dialogue: 0,0:01:46.44,0:01:48.31,Default,,0000,0000,0000,,declaramos una variable, porque en realidad
Dialogue: 0,0:01:48.31,0:01:49.76,Default,,0000,0000,0000,,es lo que estamos haciendo.
Dialogue: 0,0:01:49.76,0:01:52.08,Default,,0000,0000,0000,,Así que escribimos "var drawWinston",
Dialogue: 0,0:01:52.08,0:01:54.55,Default,,0000,0000,0000,,Y le damos un nombre lindo, muy descriptivo,
Dialogue: 0,0:01:54.55,0:01:59.04,Default,,0000,0000,0000,,y luego "=", pero aquí, en lugar de escribir un número o una cadena de caracteres,
Dialogue: 0,0:01:59.04,0:02:02.72,Default,,0000,0000,0000,,vamos a escribir "function", debes asegurarte de escribirlo correctamente,
Dialogue: 0,0:02:02.72,0:02:08.36,Default,,0000,0000,0000,,y luego paréntesis vacíos "()" y luego una llave que abre "{"
Dialogue: 0,0:02:08.36,0:02:11.56,Default,,0000,0000,0000,,y luego una llave que cierra "}" y punto y coma ";".
Dialogue: 0,0:02:11.56,0:02:14.49,Default,,0000,0000,0000,,Ok, entonces lo que necesitamos hacer es poner todo
Dialogue: 0,0:02:14.49,0:02:19.45,Default,,0000,0000,0000,,lo que queremos dentro de nuestra función entre la llave que abre y la que cierra.
Dialogue: 0,0:02:19.45,0:02:22.13,Default,,0000,0000,0000,,Así que tomamos todo este código de aquí,
Dialogue: 0,0:02:22.13,0:02:26.82,Default,,0000,0000,0000,,y lo ponemos en nuestra función, indentando bien, y ¡tan tan!
Dialogue: 0,0:02:26.82,0:02:28.97,Default,,0000,0000,0000,,Así que lo que ahora tenemos es esta variable
Dialogue: 0,0:02:28.97,0:02:32.38,Default,,0000,0000,0000,,que está almacenando una función - lo que hicimos básicamente fue darle
Dialogue: 0,0:02:32.38,0:02:35.76,Default,,0000,0000,0000,,una etiqueta a este bloque de código de manera que podamos decirle
Dialogue: 0,0:02:35.76,0:02:37.86,Default,,0000,0000,0000,,a nuestro programa en cualquier momento,
Dialogue: 0,0:02:37.86,0:02:40.76,Default,,0000,0000,0000,,"¡Oye, encuentra este bloque de código con esta etiqueta y ejecútalo!"
Dialogue: 0,0:02:40.76,0:02:43.55,Default,,0000,0000,0000,,Estamos haciendo que este fragmento de código sea re-usable.
Dialogue: 0,0:02:43.55,0:02:46.54,Default,,0000,0000,0000,,Pero ahora fíjate, ¡que ya no tenemos a "Winston"!
Dialogue: 0,0:02:46.54,0:02:49.36,Default,,0000,0000,0000,,¡Perdimos a "Winston"! ¿A dónde se fue?
Dialogue: 0,0:02:49.36,0:02:53.02,Default,,0000,0000,0000,,Ok, lo que sucedió es que una vez que pusimos este código dentro de una función,
Dialogue: 0,0:02:53.02,0:02:55.91,Default,,0000,0000,0000,,le dijimos a nuestro programa: "oye, aquí hay un pedazo de código
Dialogue: 0,0:02:55.91,0:02:57.84,Default,,0000,0000,0000,,que quiero ejecutar más tarde,
Dialogue: 0,0:02:57.84,0:03:00.81,Default,,0000,0000,0000,,pero sólo cuando te diga que lo ejecutes".
Dialogue: 0,0:03:00.81,0:03:04.29,Default,,0000,0000,0000,,Así que tenemos que decirle al programa que ejecute el código, lo que significa que necesitamos
Dialogue: 0,0:03:04.29,0:03:09.11,Default,,0000,0000,0000,,llamar la función, de la misma manera en que lo hacemos con "ellipse()" y "rect()" y "line()".
Dialogue: 0,0:03:09.40,0:03:13.75,Default,,0000,0000,0000,,Así que sólo escribimos el nombre de la función ("drawWinston")
Dialogue: 0,0:03:13.75,0:03:16.38,Default,,0000,0000,0000,,seguido de los paréntesis que abren y cierran,
Dialogue: 0,0:03:16.38,0:03:18.96,Default,,0000,0000,0000,,y por supuesto, nuestro punto y coma, y ¡tan tan!
Dialogue: 0,0:03:18.96,0:03:20.94,Default,,0000,0000,0000,,¡Tenemos a "Winston"!
Dialogue: 0,0:03:20.94,0:03:24.24,Default,,0000,0000,0000,,Ok, pienso que está muy bien, pero tal vez no piensen que está bien
Dialogue: 0,0:03:24.24,0:03:27.37,Default,,0000,0000,0000,,porque todo lo que hemos hecho es que nuestro programa haga exactamente
Dialogue: 0,0:03:27.37,0:03:30.24,Default,,0000,0000,0000,,lo mismo que hacía antes.\NUn poco tonto, ¿no?
Dialogue: 0,0:03:30.24,0:03:32.92,Default,,0000,0000,0000,,El punto es que a las funciones las podemos reutilizar.
Dialogue: 0,0:03:32.92,0:03:34.96,Default,,0000,0000,0000,,Así que hagámoslo ahora.
Dialogue: 0,0:03:34.96,0:03:41.16,Default,,0000,0000,0000,,Podemos copiar y pegar la llamada a la función, ¡tan tan!, ¡tan tan!, una y otra vez.
Dialogue: 0,0:03:41.16,0:03:46.57,Default,,0000,0000,0000,,Mmm, pero se ve igual, bueno, funciona.
Dialogue: 0,0:03:46.57,0:03:48.100,Default,,0000,0000,0000,,Está dibujando muchos "Winstons" pero el problema
Dialogue: 0,0:03:48.100,0:03:51.23,Default,,0000,0000,0000,,es que todos están en el mismo lugar.
Dialogue: 0,0:03:51.23,0:03:54.43,Default,,0000,0000,0000,,Si tuviéramos vista de rayos x, veríamos
Dialogue: 0,0:03:54.43,0:03:57.63,Default,,0000,0000,0000,,tres "Winstons", pero no la tenemos.
Dialogue: 0,0:03:57.63,0:04:00.33,Default,,0000,0000,0000,,(No sé si tú la tengas.)
Dialogue: 0,0:04:00.33,0:04:03.44,Default,,0000,0000,0000,,Pero podemos hacer un pequeño cambio en nuestra función
Dialogue: 0,0:04:03.44,0:04:05.06,Default,,0000,0000,0000,,que hará que sea obvio.
Dialogue: 0,0:04:05.06,0:04:08.82,Default,,0000,0000,0000,,Entonces ¿ves que "faceX" y "faceY" siempre están en 202 y 208?
Dialogue: 0,0:04:08.82,0:04:11.59,Default,,0000,0000,0000,,Podemos cambiar esto usando la función "random()",
Dialogue: 0,0:04:11.59,0:04:14.85,Default,,0000,0000,0000,,digamos "random() form 50 to 350", y eso genera
Dialogue: 0,0:04:14.85,0:04:19.18,Default,,0000,0000,0000,,un número aleatorio entre estos dos, y podemos hacer lo mismo aquí,
Dialogue: 0,0:04:19.18,0:04:23.02,Default,,0000,0000,0000,,y cada vez que llamamos la función, genera un nuevo número aleatorio,
Dialogue: 0,0:04:23.02,0:04:26.57,Default,,0000,0000,0000,,y si presionamos "Restart", podemos tener "Winstons" aleatorios.
Dialogue: 0,0:04:26.57,0:04:29.36,Default,,0000,0000,0000,,¡Genial! ¡Whoo!
Dialogue: 0,0:04:29.36,0:04:32.10,Default,,0000,0000,0000,,Muy bien, pienso que esto es genial porque tendríamos
Dialogue: 0,0:04:32.10,0:04:34.92,Default,,0000,0000,0000,,mucho código para escribir esto si no lo tuviéramos en una función.
Dialogue: 0,0:04:34.92,0:04:38.32,Default,,0000,0000,0000,,Tendríamos tres veces esta cantidad de código.
Dialogue: 0,0:04:38.32,0:04:40.96,Default,,0000,0000,0000,,Pero todavía no es tan útil como podría ser,
Dialogue: 0,0:04:40.96,0:04:43.80,Default,,0000,0000,0000,,porque probablemente no queramos tener "Winstons" aleatorios.
Dialogue: 0,0:04:43.80,0:04:45.74,Default,,0000,0000,0000,,Probablemente queremos poder posicionar a "Winston"
Dialogue: 0,0:04:45.74,0:04:47.85,Default,,0000,0000,0000,,en puntos específicos de la pantalla.
Dialogue: 0,0:04:47.85,0:04:49.94,Default,,0000,0000,0000,,Así que mantente en contacto, porque próximamente hablaremos sobre cómo pasar parámentros
Dialogue: 0,0:04:49.94,0:04:52.48,Default,,0000,0000,0000,,a nuestras funciones, y entonces
Dialogue: 0,0:04:52.00,0:04:54.71,Default,,0000,0000,0000,,podrás hacer eso exactamente.