0:00:00.410,0:00:02.436
Estamos de regreso con "Winston"

0:00:02.436,0:00:05.563
Ahora tenemos dos variables "x" y "y"

0:00:05.563,0:00:07.199
para la posición de Winston.

0:00:07.199,0:00:10.368
Así que lo podemos mover a los lados,

0:00:10.368,0:00:13.709
hacia arriba y hacia abajo. ¡Woo! Muy lindo.

0:00:13.709,0:00:16.706
Ahora, vamos a reconfigurar estas variables

0:00:16.706,0:00:18.826
en 200 y 200.

0:00:18.826,0:00:22.663
Y vamos a revisar cómo funciona este programa.

0:00:22.663,0:00:25.906
Así que empezando aquí tenemos la variable "eyeSize",

0:00:25.906,0:00:28.371
que usamos para controlar el tamaño de los ojos,

0:00:28.371,0:00:32.435
y que es 40 de ancho y 40 de alto.

0:00:32.435,0:00:35.559
Y luego tenemos estas variables "x" y "y",

0:00:35.559,0:00:39.350
que son para posicionar el centro de la cara,

0:00:39.350,0:00:42.379
y las puedes ver en este comando "ellipse()",

0:00:42.379,0:00:45.479
que dibuja el círculo amarillo grande.

0:00:45.479,0:00:48.334
Y luego, aquí abajo para los ojos,

0:00:48.334,0:00:50.649
se usan otra vez la "x" y la "y",

0:00:50.649,0:00:55.870
y aquí, el ojo está posicionado en relación con el centro de la cara.

0:00:55.870,0:01:01.140
Así que tal vez éste esté 50 pixeles a la izquierda del centro,

0:01:01.148,0:01:05.848
y éste, está a 100 pixeles a la derecha del centro.

0:01:05.848,0:01:08.162
Ok, genial.

0:01:08.162,0:01:12.136
Y es por esto que podemos mover a Winston hacia arriba y hacia abajo.

0:01:12.136,0:01:16.821
Ahora, quiero poder controlar más cosas de la cara de Winston con variables.

0:01:16.821,0:01:19.533
Entonces tengo que averiguar qué más dentro del programa

0:01:19.533,0:01:20.984
podemos guardar en variables.

0:01:20.984,0:01:23.982
Para hacer eso, tengo que revisar cada línea del código,

0:01:23.982,0:01:27.866
y buscar lo que llamamos "hard coded numbers".

0:01:27.866,0:01:31.695
Estos son números, literalmente números, no son variables,

0:01:31.695,0:01:34.382
o variables dependientes.

0:01:34.382,0:01:37.908
Así que vamos a empezar aquí, en la primera llamada a "ellipse()".

0:01:37.908,0:01:41.501
Tenemos 300 y 300 para la anchura y la altura.

0:01:41.501,0:01:44.378
Estos son números, así que vamos a crear una variable

0:01:44.378,0:01:46.548
para usarla en lugar de esos números.

0:01:46.548,0:01:51.097
La llamaremos "faceSize" y le vamos a asignar 300.

0:01:51.097,0:01:55.315
Ahora escribimos "faceSize, faceSize;".

0:01:55.315,0:01:58.146
Ok, continuamos, nos saltamos los colores.

0:01:58.146,0:02:02.436
Ahora el comando "ellipse()" tiene variables y variables dependientes,

0:02:02.438,0:02:04.883
así que lo voy a dejar así por el momento.

0:02:04.883,0:02:09.493
Y luego, en el comando para la boca, estos están dependiendo de "x" y "y",

0:02:09.493,0:02:12.860
pero esto que está aquí, son números literales.

0:02:12.860,0:02:14.781
150 y 150.

0:02:14.781,0:02:22.621
Así que voy a escribir "mouthSize", es un buen nombre, es igual a 150.

0:02:22.621,0:02:27.493
Reemplazamos por "mouthSize, mouthSize".

0:02:27.493,0:02:28.546
Muy bien.

0:02:28.546,0:02:31.521
Ahora tenemos los tamaños de las figuras,

0:02:31.521,0:02:33.316
almacenados en las variables hasta arriba del programa.

0:02:33.316,0:02:36.136
Eso significa que es muy fácil cambiar los tamaños.

0:02:36.136,0:02:39.335
Como esto. ¡Woo! ¡Winston tiene hambre!

0:02:39.335,0:02:46.135
¡Y Winston se comió muchas donas y se puso gordísimo!

0:02:46.135,0:02:49.598
Muy bien, pero hay algo que no me gusta

0:02:49.598,0:02:52.483
del programa en este momento,

0:02:52.483,0:02:57.903
si cambio el tamaño de la cara, y lo hago realmente

0:02:57.905,0:03:01.362
pequeño, se empieza a ver chistoso.

0:03:01.362,0:03:05.005
Porque los ojos y la boca empiezan a salirse de la cara,

0:03:05.005,0:03:07.668
y llegamos a un punto en el que parece que ya no están

0:03:07.668,0:03:11.525
conectados con la cara, y deja de parecer una cara. ¿No?

0:03:11.525,0:03:14.173
Así que lo que realmente quiero que pase,

0:03:14.173,0:03:16.323
es que cuando cambie el tamaño de la cara,

0:03:16.323,0:03:20.200
quiero que el tamaño de los ojos y la boca también cambien

0:03:20.200,0:03:21.405
junto con la cara.

0:03:21.405,0:03:24.398
Así que si hago que el tamaño de la cara sea de la mitad,

0:03:24.398,0:03:27.718
quiero que la boca también sea de la mitad del tamaño.

0:03:27.718,0:03:32.608
Eso significa que quiero calcular el tamaño de la boca "mouthSize" y de los ojos "eyeSize",

0:03:32.608,0:03:36.611
como fracciones de "FaceSize".

0:03:36.611,0:03:40.275
Muy bien, voy a reconfigurar estas variables y les voy a mostrar

0:03:40.275,0:03:41.926
lo que quiero decir.

0:03:41.926,0:03:44.156
Vamos a empezar con "mouthSize",

0:03:44.156,0:03:47.407
en este momento "faceSize" es igual a 300,

0:03:47.407,0:03:50.517
y "mouthSize" es igual a 150.

0:03:50.517,0:03:53.428
Si pensamos en cómo se relacionan entre sí estas variables,

0:03:53.428,0:03:57.158
podríamos decir que "faceSize" es dos veces más grande que "mouthSize",

0:03:57.158,0:04:01.718
o que "mouthSize" es la mitad del tamaño que "faceSize".

0:04:01.730,0:04:07.870
Y eso lo podemos codificar como: 1/2 por "faceSize".

0:04:07.876,0:04:10.247
Ok, entonces esta línea de código nos dice

0:04:10.247,0:04:13.311
que toma el valor de "faceSize", lo multiplica por 1/2,

0:04:13.311,0:04:15.460
y lo guarda en "mouthSize".

0:04:15.460,0:04:17.944
Entonces si cambiamos lo que tenemos aquí,

0:04:17.944,0:04:20.234
tendríamos que averiguar cuál es la mitad de eso,

0:04:20.234,0:04:22.192
y es el valor de "mouthSize".

0:04:22.192,0:04:24.782
Perfecto. Eso es lo que queremos.

0:04:24.782,0:04:29.382
Ahora "eyeSize", entonces "faceSize" es igual a 300,

0:04:29.382,0:04:33.257
y "eyeSize" es igual a 40, así que esto tiene que ser

0:04:33.257,0:04:39.127
40 entre 300 de "faceSize", lo que en realidad es

0:04:39.143,0:04:44.473
4 entre 30, que podemos simplificar como 2 entre 15.

0:04:44.473,0:04:50.129
Entonces vamos a decir 2 entre 15, por "faceSize".

0:04:50.129,0:04:52.621
Por cierto, si eres inexperto en fracciones,

0:04:52.621,0:04:55.942
y se te hacen difíciles, puedes aprender más sobre fracciones,

0:04:55.942,0:05:02.442
en Khan Academy, y regresar aquí cuando sientas que estás listo.

0:05:02.443,0:05:06.993
Muy bien, vamos a tratar de cambiar el tamaño de la cara de nuevo.

0:05:06.993,0:05:08.463
¡Ajá! ¡Échale un vistazo!

0:05:08.463,0:05:12.320
La boca y los ojos cambian de tamaño proporcionalmente con la cara.

0:05:12.320,0:05:15.525
Pero probablemente te diste cuenta de que algo está mal,

0:05:15.525,0:05:19.315
los ojos y la boca siguen quedando fuera de la cara,

0:05:19.315,0:05:23.334
aunque tienen un tamaño más proporcionado.

0:05:23.334,0:05:25.826
Y eso es porque seguimos teniendo algunos

0:05:25.826,0:05:28.753
"números incrustados directamente en el código" en nuestros comandos "ellipse()".

0:05:28.753,0:05:31.093
Son algunos números que en realidad deberían ser fracciones

0:05:31.093,0:05:33.604
de variables en su lugar.

0:05:33.604,0:05:35.074
Les mostraré.

0:05:35.079,0:05:40.839
Para la elipse del ojo, tenemos "x - 50" para la posición de "x",

0:05:40.839,0:05:45.224
eso significa que siempre es "x - 50", aún si hacemos que

0:05:45.224,0:05:47.271
el tamaño de la cara sea menor que 50 pixeles.

0:05:47.271,0:05:49.371
Y eso definitivamente no tiene sentido, porque significa

0:05:49.371,0:05:52.888
que el ojo izquierdo no va a estar más en la cara.

0:05:52.888,0:05:55.789
Así que eso debería ser "x" menos una fracción del

0:05:55.789,0:05:57.366
tamaño de la cara.

0:05:57.366,0:06:00.193
Y podemos averiguar la fracción de la misma manera,

0:06:00.193,0:06:04.044
50 en relación con el tamaño original que es 300.

0:06:04.044,0:06:08.309
Así que 50 entre 300, 5 entre 30, 1 entre 6.

0:06:08.309,0:06:12.258
Entonces 1 entre 6 por "faceSize".

0:06:12.258,0:06:17.648
Y vimos otro 50 aquí, así que podemos hacer lo mismo, la misma expresión.

0:06:17.648,0:06:23.272
Aquí tenemos 100 entre 300, esto va a ser igual a 1 entre 3 por "faceSize".

0:06:23.272,0:06:29.149
Éste es 60, así que va a ser 1 quinto por "faceSize".

0:06:29.149,0:06:34.379
Y aquí tenemos otro 50 así que es igual a 1 sexto otra vez,

0:06:34.379,0:06:40.062
y luego 40, que lo calculamos aquí arriba, es 2 entre 15,

0:06:40.062,0:06:45.198
2 entre 15 por "faceSize".

0:06:45.198,0:06:48.329
Muy bien, vamos a probarlo otra vez.

0:06:48.329,0:06:50.129
¡Oh! ¡Miren eso!

0:06:50.129,0:06:52.677
¡Es hermoso! ¡Tan bien!

0:06:52.677,0:06:54.832
Muy bien, repasemos.

0:06:54.832,0:06:58.081
Creamos esta variable que almacena el tamaño de la cara,

0:06:58.081,0:07:00.105
y almacena un número.

0:07:00.105,0:07:03.133
Luego tenemos estas variables "mouthSize" y "eyeSize",

0:07:03.133,0:07:06.737
y las calculamos con base en fracciones de "faceSize", para

0:07:06.737,0:07:09.491
asegurarnos que sus valores siempre cambien,

0:07:09.491,0:07:12.913
con base en el valor con el que iniciemos la cara.

0:07:12.913,0:07:17.362
Luego todas las distancias también se calculan con base en "faceSize".

0:07:17.362,0:07:19.982
Para asegurarnos que las posiciones dentro de la cara cambien

0:07:19.982,0:07:22.231
si el valor de "faceSize" cambia.

0:07:22.231,0:07:25.380
¡Uh! Muy bien. Ahora que entendemos realmente como hacer

0:07:25.380,0:07:27.633
que unas variables dependan del valor de otras variables,

0:07:27.633,0:07:30.185
podemos hacer mucho más en nuestros programas.

0:07:30.185,0:07:34.535
¡Celebremos haciendo a Winston enorme!

0:07:34.535,0:07:35.865
¡Sí, muy bien Winston!