[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.41,0:00:02.44,Default,,0000,0000,0000,,Estamos de regreso con "Winston"
Dialogue: 0,0:00:02.44,0:00:05.56,Default,,0000,0000,0000,,Ahora tenemos dos variables "x" y "y"
Dialogue: 0,0:00:05.56,0:00:07.20,Default,,0000,0000,0000,,para la posición de Winston.
Dialogue: 0,0:00:07.20,0:00:10.37,Default,,0000,0000,0000,,Así que lo podemos mover a los lados,
Dialogue: 0,0:00:10.37,0:00:13.71,Default,,0000,0000,0000,,hacia arriba y hacia abajo. ¡Woo! Muy lindo.
Dialogue: 0,0:00:13.71,0:00:16.71,Default,,0000,0000,0000,,Ahora, vamos a reconfigurar estas variables
Dialogue: 0,0:00:16.71,0:00:18.83,Default,,0000,0000,0000,,en 200 y 200.
Dialogue: 0,0:00:18.83,0:00:22.66,Default,,0000,0000,0000,,Y vamos a revisar cómo funciona este programa.
Dialogue: 0,0:00:22.66,0:00:25.91,Default,,0000,0000,0000,,Así que empezando aquí tenemos la variable "eyeSize",
Dialogue: 0,0:00:25.91,0:00:28.37,Default,,0000,0000,0000,,que usamos para controlar el tamaño de los ojos,
Dialogue: 0,0:00:28.37,0:00:32.44,Default,,0000,0000,0000,,y que es 40 de ancho y 40 de alto.
Dialogue: 0,0:00:32.44,0:00:35.56,Default,,0000,0000,0000,,Y luego tenemos estas variables "x" y "y",
Dialogue: 0,0:00:35.56,0:00:39.35,Default,,0000,0000,0000,,que son para posicionar el centro de la cara,
Dialogue: 0,0:00:39.35,0:00:42.38,Default,,0000,0000,0000,,y las puedes ver en este comando "ellipse()",
Dialogue: 0,0:00:42.38,0:00:45.48,Default,,0000,0000,0000,,que dibuja el círculo amarillo grande.
Dialogue: 0,0:00:45.48,0:00:48.33,Default,,0000,0000,0000,,Y luego, aquí abajo para los ojos,
Dialogue: 0,0:00:48.33,0:00:50.65,Default,,0000,0000,0000,,se usan otra vez la "x" y la "y",
Dialogue: 0,0:00:50.65,0:00:55.87,Default,,0000,0000,0000,,y aquí, el ojo está posicionado en relación con el centro de la cara.
Dialogue: 0,0:00:55.87,0:01:01.14,Default,,0000,0000,0000,,Así que tal vez éste esté 50 pixeles a la izquierda del centro,
Dialogue: 0,0:01:01.15,0:01:05.85,Default,,0000,0000,0000,,y éste, está a 100 pixeles a la derecha del centro.
Dialogue: 0,0:01:05.85,0:01:08.16,Default,,0000,0000,0000,,Ok, genial.
Dialogue: 0,0:01:08.16,0:01:12.14,Default,,0000,0000,0000,,Y es por esto que podemos mover a Winston hacia arriba y hacia abajo.
Dialogue: 0,0:01:12.14,0:01:16.82,Default,,0000,0000,0000,,Ahora, quiero poder controlar más cosas de la cara de Winston con variables.
Dialogue: 0,0:01:16.82,0:01:19.53,Default,,0000,0000,0000,,Entonces tengo que averiguar qué más dentro del programa
Dialogue: 0,0:01:19.53,0:01:20.98,Default,,0000,0000,0000,,podemos guardar en variables.
Dialogue: 0,0:01:20.98,0:01:23.98,Default,,0000,0000,0000,,Para hacer eso, tengo que revisar cada línea del código,
Dialogue: 0,0:01:23.98,0:01:27.87,Default,,0000,0000,0000,,y buscar lo que llamamos "hard coded numbers".
Dialogue: 0,0:01:27.87,0:01:31.70,Default,,0000,0000,0000,,Estos son números, literalmente números, no son variables,
Dialogue: 0,0:01:31.70,0:01:34.38,Default,,0000,0000,0000,,o variables dependientes.
Dialogue: 0,0:01:34.38,0:01:37.91,Default,,0000,0000,0000,,Así que vamos a empezar aquí, en la primera llamada a "ellipse()".
Dialogue: 0,0:01:37.91,0:01:41.50,Default,,0000,0000,0000,,Tenemos 300 y 300 para la anchura y la altura.
Dialogue: 0,0:01:41.50,0:01:44.38,Default,,0000,0000,0000,,Estos son números, así que vamos a crear una variable
Dialogue: 0,0:01:44.38,0:01:46.55,Default,,0000,0000,0000,,para usarla en lugar de esos números.
Dialogue: 0,0:01:46.55,0:01:51.10,Default,,0000,0000,0000,,La llamaremos "faceSize" y le vamos a asignar 300.
Dialogue: 0,0:01:51.10,0:01:55.32,Default,,0000,0000,0000,,Ahora escribimos "faceSize, faceSize;".
Dialogue: 0,0:01:55.32,0:01:58.15,Default,,0000,0000,0000,,Ok, continuamos, nos saltamos los colores.
Dialogue: 0,0:01:58.15,0:02:02.44,Default,,0000,0000,0000,,Ahora el comando "ellipse()" tiene variables y variables dependientes,
Dialogue: 0,0:02:02.44,0:02:04.88,Default,,0000,0000,0000,,así que lo voy a dejar así por el momento.
Dialogue: 0,0:02:04.88,0:02:09.49,Default,,0000,0000,0000,,Y luego, en el comando para la boca, estos están dependiendo de "x" y "y",
Dialogue: 0,0:02:09.49,0:02:12.86,Default,,0000,0000,0000,,pero esto que está aquí, son números literales.
Dialogue: 0,0:02:12.86,0:02:14.78,Default,,0000,0000,0000,,150 y 150.
Dialogue: 0,0:02:14.78,0:02:22.62,Default,,0000,0000,0000,,Así que voy a escribir "mouthSize", es un buen nombre, es igual a 150.
Dialogue: 0,0:02:22.62,0:02:27.49,Default,,0000,0000,0000,,Reemplazamos por "mouthSize, mouthSize".
Dialogue: 0,0:02:27.49,0:02:28.55,Default,,0000,0000,0000,,Muy bien.
Dialogue: 0,0:02:28.55,0:02:31.52,Default,,0000,0000,0000,,Ahora tenemos los tamaños de las figuras,
Dialogue: 0,0:02:31.52,0:02:33.32,Default,,0000,0000,0000,,almacenados en las variables hasta arriba del programa.
Dialogue: 0,0:02:33.32,0:02:36.14,Default,,0000,0000,0000,,Eso significa que es muy fácil cambiar los tamaños.
Dialogue: 0,0:02:36.14,0:02:39.34,Default,,0000,0000,0000,,Como esto. ¡Woo! ¡Winston tiene hambre!
Dialogue: 0,0:02:39.34,0:02:46.14,Default,,0000,0000,0000,,¡Y Winston se comió muchas donas y se puso gordísimo!
Dialogue: 0,0:02:46.14,0:02:49.60,Default,,0000,0000,0000,,Muy bien, pero hay algo que no me gusta
Dialogue: 0,0:02:49.60,0:02:52.48,Default,,0000,0000,0000,,del programa en este momento,
Dialogue: 0,0:02:52.48,0:02:57.90,Default,,0000,0000,0000,,si cambio el tamaño de la cara, y lo hago realmente
Dialogue: 0,0:02:57.90,0:03:01.36,Default,,0000,0000,0000,,pequeño, se empieza a ver chistoso.
Dialogue: 0,0:03:01.36,0:03:05.00,Default,,0000,0000,0000,,Porque los ojos y la boca empiezan a salirse de la cara,
Dialogue: 0,0:03:05.00,0:03:07.67,Default,,0000,0000,0000,,y llegamos a un punto en el que parece que ya no están
Dialogue: 0,0:03:07.67,0:03:11.52,Default,,0000,0000,0000,,conectados con la cara, y deja de parecer una cara. ¿No?
Dialogue: 0,0:03:11.52,0:03:14.17,Default,,0000,0000,0000,,Así que lo que realmente quiero que pase,
Dialogue: 0,0:03:14.17,0:03:16.32,Default,,0000,0000,0000,,es que cuando cambie el tamaño de la cara,
Dialogue: 0,0:03:16.32,0:03:20.20,Default,,0000,0000,0000,,quiero que el tamaño de los ojos y la boca también cambien
Dialogue: 0,0:03:20.20,0:03:21.40,Default,,0000,0000,0000,,junto con la cara.
Dialogue: 0,0:03:21.40,0:03:24.40,Default,,0000,0000,0000,,Así que si hago que el tamaño de la cara sea de la mitad,
Dialogue: 0,0:03:24.40,0:03:27.72,Default,,0000,0000,0000,,quiero que la boca también sea de la mitad del tamaño.
Dialogue: 0,0:03:27.72,0:03:32.61,Default,,0000,0000,0000,,Eso significa que quiero calcular el tamaño de la boca "mouthSize" y de los ojos "eyeSize",
Dialogue: 0,0:03:32.61,0:03:36.61,Default,,0000,0000,0000,,como fracciones de "FaceSize".
Dialogue: 0,0:03:36.61,0:03:40.28,Default,,0000,0000,0000,,Muy bien, voy a reconfigurar estas variables y les voy a mostrar
Dialogue: 0,0:03:40.28,0:03:41.93,Default,,0000,0000,0000,,lo que quiero decir.
Dialogue: 0,0:03:41.93,0:03:44.16,Default,,0000,0000,0000,,Vamos a empezar con "mouthSize",
Dialogue: 0,0:03:44.16,0:03:47.41,Default,,0000,0000,0000,,en este momento "faceSize" es igual a 300,
Dialogue: 0,0:03:47.41,0:03:50.52,Default,,0000,0000,0000,,y "mouthSize" es igual a 150.
Dialogue: 0,0:03:50.52,0:03:53.43,Default,,0000,0000,0000,,Si pensamos en cómo se relacionan entre sí estas variables,
Dialogue: 0,0:03:53.43,0:03:57.16,Default,,0000,0000,0000,,podríamos decir que "faceSize" es dos veces más grande que "mouthSize",
Dialogue: 0,0:03:57.16,0:04:01.72,Default,,0000,0000,0000,,o que "mouthSize" es la mitad del tamaño que "faceSize".
Dialogue: 0,0:04:01.73,0:04:07.87,Default,,0000,0000,0000,,Y eso lo podemos codificar como: 1/2 por "faceSize".
Dialogue: 0,0:04:07.88,0:04:10.25,Default,,0000,0000,0000,,Ok, entonces esta línea de código nos dice
Dialogue: 0,0:04:10.25,0:04:13.31,Default,,0000,0000,0000,,que toma el valor de "faceSize", lo multiplica por 1/2,
Dialogue: 0,0:04:13.31,0:04:15.46,Default,,0000,0000,0000,,y lo guarda en "mouthSize".
Dialogue: 0,0:04:15.46,0:04:17.94,Default,,0000,0000,0000,,Entonces si cambiamos lo que tenemos aquí,
Dialogue: 0,0:04:17.94,0:04:20.23,Default,,0000,0000,0000,,tendríamos que averiguar cuál es la mitad de eso,
Dialogue: 0,0:04:20.23,0:04:22.19,Default,,0000,0000,0000,,y es el valor de "mouthSize".
Dialogue: 0,0:04:22.19,0:04:24.78,Default,,0000,0000,0000,,Perfecto. Eso es lo que queremos.
Dialogue: 0,0:04:24.78,0:04:29.38,Default,,0000,0000,0000,,Ahora "eyeSize", entonces "faceSize" es igual a 300,
Dialogue: 0,0:04:29.38,0:04:33.26,Default,,0000,0000,0000,,y "eyeSize" es igual a 40, así que esto tiene que ser
Dialogue: 0,0:04:33.26,0:04:39.13,Default,,0000,0000,0000,,40 entre 300 de "faceSize", lo que en realidad es
Dialogue: 0,0:04:39.14,0:04:44.47,Default,,0000,0000,0000,,4 entre 30, que podemos simplificar como 2 entre 15.
Dialogue: 0,0:04:44.47,0:04:50.13,Default,,0000,0000,0000,,Entonces vamos a decir 2 entre 15, por "faceSize".
Dialogue: 0,0:04:50.13,0:04:52.62,Default,,0000,0000,0000,,Por cierto, si eres inexperto en fracciones,
Dialogue: 0,0:04:52.62,0:04:55.94,Default,,0000,0000,0000,,y se te hacen difíciles, puedes aprender más sobre fracciones,
Dialogue: 0,0:04:55.94,0:05:02.44,Default,,0000,0000,0000,,en Khan Academy, y regresar aquí cuando sientas que estás listo.
Dialogue: 0,0:05:02.44,0:05:06.99,Default,,0000,0000,0000,,Muy bien, vamos a tratar de cambiar el tamaño de la cara de nuevo.
Dialogue: 0,0:05:06.99,0:05:08.46,Default,,0000,0000,0000,,¡Ajá! ¡Échale un vistazo!
Dialogue: 0,0:05:08.46,0:05:12.32,Default,,0000,0000,0000,,La boca y los ojos cambian de tamaño proporcionalmente con la cara.
Dialogue: 0,0:05:12.32,0:05:15.52,Default,,0000,0000,0000,,Pero probablemente te diste cuenta de que algo está mal,
Dialogue: 0,0:05:15.52,0:05:19.32,Default,,0000,0000,0000,,los ojos y la boca siguen quedando fuera de la cara,
Dialogue: 0,0:05:19.32,0:05:23.33,Default,,0000,0000,0000,,aunque tienen un tamaño más proporcionado.
Dialogue: 0,0:05:23.33,0:05:25.83,Default,,0000,0000,0000,,Y eso es porque seguimos teniendo algunos
Dialogue: 0,0:05:25.83,0:05:28.75,Default,,0000,0000,0000,,"números incrustados directamente en el código" en nuestros comandos "ellipse()".
Dialogue: 0,0:05:28.75,0:05:31.09,Default,,0000,0000,0000,,Son algunos números que en realidad deberían ser fracciones
Dialogue: 0,0:05:31.09,0:05:33.60,Default,,0000,0000,0000,,de variables en su lugar.
Dialogue: 0,0:05:33.60,0:05:35.07,Default,,0000,0000,0000,,Les mostraré.
Dialogue: 0,0:05:35.08,0:05:40.84,Default,,0000,0000,0000,,Para la elipse del ojo, tenemos "x - 50" para la posición de "x",
Dialogue: 0,0:05:40.84,0:05:45.22,Default,,0000,0000,0000,,eso significa que siempre es "x - 50", aún si hacemos que
Dialogue: 0,0:05:45.22,0:05:47.27,Default,,0000,0000,0000,,el tamaño de la cara sea menor que 50 pixeles.
Dialogue: 0,0:05:47.27,0:05:49.37,Default,,0000,0000,0000,,Y eso definitivamente no tiene sentido, porque significa
Dialogue: 0,0:05:49.37,0:05:52.89,Default,,0000,0000,0000,,que el ojo izquierdo no va a estar más en la cara.
Dialogue: 0,0:05:52.89,0:05:55.79,Default,,0000,0000,0000,,Así que eso debería ser "x" menos una fracción del
Dialogue: 0,0:05:55.79,0:05:57.37,Default,,0000,0000,0000,,tamaño de la cara.
Dialogue: 0,0:05:57.37,0:06:00.19,Default,,0000,0000,0000,,Y podemos averiguar la fracción de la misma manera,
Dialogue: 0,0:06:00.19,0:06:04.04,Default,,0000,0000,0000,,50 en relación con el tamaño original que es 300.
Dialogue: 0,0:06:04.04,0:06:08.31,Default,,0000,0000,0000,,Así que 50 entre 300, 5 entre 30, 1 entre 6.
Dialogue: 0,0:06:08.31,0:06:12.26,Default,,0000,0000,0000,,Entonces 1 entre 6 por "faceSize".
Dialogue: 0,0:06:12.26,0:06:17.65,Default,,0000,0000,0000,,Y vimos otro 50 aquí, así que podemos hacer lo mismo, la misma expresión.
Dialogue: 0,0:06:17.65,0:06:23.27,Default,,0000,0000,0000,,Aquí tenemos 100 entre 300, esto va a ser igual a 1 entre 3 por "faceSize".
Dialogue: 0,0:06:23.27,0:06:29.15,Default,,0000,0000,0000,,Éste es 60, así que va a ser 1 quinto por "faceSize".
Dialogue: 0,0:06:29.15,0:06:34.38,Default,,0000,0000,0000,,Y aquí tenemos otro 50 así que es igual a 1 sexto otra vez,
Dialogue: 0,0:06:34.38,0:06:40.06,Default,,0000,0000,0000,,y luego 40, que lo calculamos aquí arriba, es 2 entre 15,
Dialogue: 0,0:06:40.06,0:06:45.20,Default,,0000,0000,0000,,2 entre 15 por "faceSize".
Dialogue: 0,0:06:45.20,0:06:48.33,Default,,0000,0000,0000,,Muy bien, vamos a probarlo otra vez.
Dialogue: 0,0:06:48.33,0:06:50.13,Default,,0000,0000,0000,,¡Oh! ¡Miren eso!
Dialogue: 0,0:06:50.13,0:06:52.68,Default,,0000,0000,0000,,¡Es hermoso! ¡Tan bien!
Dialogue: 0,0:06:52.68,0:06:54.83,Default,,0000,0000,0000,,Muy bien, repasemos.
Dialogue: 0,0:06:54.83,0:06:58.08,Default,,0000,0000,0000,,Creamos esta variable que almacena el tamaño de la cara,
Dialogue: 0,0:06:58.08,0:07:00.10,Default,,0000,0000,0000,,y almacena un número.
Dialogue: 0,0:07:00.10,0:07:03.13,Default,,0000,0000,0000,,Luego tenemos estas variables "mouthSize" y "eyeSize",
Dialogue: 0,0:07:03.13,0:07:06.74,Default,,0000,0000,0000,,y las calculamos con base en fracciones de "faceSize", para
Dialogue: 0,0:07:06.74,0:07:09.49,Default,,0000,0000,0000,,asegurarnos que sus valores siempre cambien,
Dialogue: 0,0:07:09.49,0:07:12.91,Default,,0000,0000,0000,,con base en el valor con el que iniciemos la cara.
Dialogue: 0,0:07:12.91,0:07:17.36,Default,,0000,0000,0000,,Luego todas las distancias también se calculan con base en "faceSize".
Dialogue: 0,0:07:17.36,0:07:19.98,Default,,0000,0000,0000,,Para asegurarnos que las posiciones dentro de la cara cambien
Dialogue: 0,0:07:19.98,0:07:22.23,Default,,0000,0000,0000,,si el valor de "faceSize" cambia.
Dialogue: 0,0:07:22.23,0:07:25.38,Default,,0000,0000,0000,,¡Uh! Muy bien. Ahora que entendemos realmente como hacer
Dialogue: 0,0:07:25.38,0:07:27.63,Default,,0000,0000,0000,,que unas variables dependan del valor de otras variables,
Dialogue: 0,0:07:27.63,0:07:30.18,Default,,0000,0000,0000,,podemos hacer mucho más en nuestros programas.
Dialogue: 0,0:07:30.18,0:07:34.54,Default,,0000,0000,0000,,¡Celebremos haciendo a Winston enorme!
Dialogue: 0,0:07:34.54,0:07:35.86,Default,,0000,0000,0000,,¡Sí, muy bien Winston!