1
00:00:00,410 --> 00:00:02,436
Estamos de regreso con "Winston"

2
00:00:02,436 --> 00:00:05,563
Ahora tenemos dos variables "x" y "y"

3
00:00:05,563 --> 00:00:07,199
para la posición de Winston.

4
00:00:07,199 --> 00:00:10,368
Así que lo podemos mover a los lados,

5
00:00:10,368 --> 00:00:13,709
hacia arriba y hacia abajo. ¡Woo! Muy lindo.

6
00:00:13,709 --> 00:00:16,706
Ahora, vamos a reconfigurar estas variables

7
00:00:16,706 --> 00:00:18,826
en 200 y 200.

8
00:00:18,826 --> 00:00:22,663
Y vamos a revisar cómo funciona este programa.

9
00:00:22,663 --> 00:00:25,906
Así que empezando aquí tenemos la variable "eyeSize",

10
00:00:25,906 --> 00:00:28,371
que usamos para controlar el tamaño de los ojos,

11
00:00:28,371 --> 00:00:32,435
y que es 40 de ancho y 40 de alto.

12
00:00:32,435 --> 00:00:35,559
Y luego tenemos estas variables "x" y "y",

13
00:00:35,559 --> 00:00:39,350
que son para posicionar el centro de la cara,

14
00:00:39,350 --> 00:00:42,379
y las puedes ver en este comando "ellipse()",

15
00:00:42,379 --> 00:00:45,479
que dibuja el círculo amarillo grande.

16
00:00:45,479 --> 00:00:48,334
Y luego, aquí abajo para los ojos,

17
00:00:48,334 --> 00:00:50,649
se usan otra vez la "x" y la "y",

18
00:00:50,649 --> 00:00:55,870
y aquí, el ojo está posicionado en relación con el centro de la cara.

19
00:00:55,870 --> 00:01:01,140
Así que tal vez éste esté 50 pixeles a la izquierda del centro,

20
00:01:01,148 --> 00:01:05,848
y éste, está a 100 pixeles a la derecha del centro.

21
00:01:05,848 --> 00:01:08,162
Ok, genial.

22
00:01:08,162 --> 00:01:12,136
Y es por esto que podemos mover a Winston hacia arriba y hacia abajo.

23
00:01:12,136 --> 00:01:16,821
Ahora, quiero poder controlar más cosas de la cara de Winston con variables.

24
00:01:16,821 --> 00:01:19,533
Entonces tengo que averiguar qué más dentro del programa

25
00:01:19,533 --> 00:01:20,984
podemos guardar en variables.

26
00:01:20,984 --> 00:01:23,982
Para hacer eso, tengo que revisar cada línea del código,

27
00:01:23,982 --> 00:01:27,866
y buscar lo que llamamos "hard coded numbers".

28
00:01:27,866 --> 00:01:31,695
Estos son números, literalmente números, no son variables,

29
00:01:31,695 --> 00:01:34,382
o variables dependientes.

30
00:01:34,382 --> 00:01:37,908
Así que vamos a empezar aquí, en la primera llamada a "ellipse()".

31
00:01:37,908 --> 00:01:41,501
Tenemos 300 y 300 para la anchura y la altura.

32
00:01:41,501 --> 00:01:44,378
Estos son números, así que vamos a crear una variable

33
00:01:44,378 --> 00:01:46,548
para usarla en lugar de esos números.

34
00:01:46,548 --> 00:01:51,097
La llamaremos "faceSize" y le vamos a asignar 300.

35
00:01:51,097 --> 00:01:55,315
Ahora escribimos "faceSize, faceSize;".

36
00:01:55,315 --> 00:01:58,146
Ok, continuamos, nos saltamos los colores.

37
00:01:58,146 --> 00:02:02,436
Ahora el comando "ellipse()" tiene variables y variables dependientes,

38
00:02:02,438 --> 00:02:04,883
así que lo voy a dejar así por el momento.

39
00:02:04,883 --> 00:02:09,493
Y luego, en el comando para la boca, estos están dependiendo de "x" y "y",

40
00:02:09,493 --> 00:02:12,860
pero esto que está aquí, son números literales.

41
00:02:12,860 --> 00:02:14,781
150 y 150.

42
00:02:14,781 --> 00:02:22,621
Así que voy a escribir "mouthSize", es un buen nombre, es igual a 150.

43
00:02:22,621 --> 00:02:27,493
Reemplazamos por "mouthSize, mouthSize".

44
00:02:27,493 --> 00:02:28,546
Muy bien.

45
00:02:28,546 --> 00:02:31,521
Ahora tenemos los tamaños de las figuras,

46
00:02:31,521 --> 00:02:33,316
almacenados en las variables hasta arriba del programa.

47
00:02:33,316 --> 00:02:36,136
Eso significa que es muy fácil cambiar los tamaños.

48
00:02:36,136 --> 00:02:39,335
Como esto. ¡Woo! ¡Winston tiene hambre!

49
00:02:39,335 --> 00:02:46,135
¡Y Winston se comió muchas donas y se puso gordísimo!

50
00:02:46,135 --> 00:02:49,598
Muy bien, pero hay algo que no me gusta

51
00:02:49,598 --> 00:02:52,483
del programa en este momento,

52
00:02:52,483 --> 00:02:57,903
si cambio el tamaño de la cara, y lo hago realmente

53
00:02:57,905 --> 00:03:01,362
pequeño, se empieza a ver chistoso.

54
00:03:01,362 --> 00:03:05,005
Porque los ojos y la boca empiezan a salirse de la cara,

55
00:03:05,005 --> 00:03:07,668
y llegamos a un punto en el que parece que ya no están

56
00:03:07,668 --> 00:03:11,525
conectados con la cara, y deja de parecer una cara. ¿No?

57
00:03:11,525 --> 00:03:14,173
Así que lo que realmente quiero que pase,

58
00:03:14,173 --> 00:03:16,323
es que cuando cambie el tamaño de la cara,

59
00:03:16,323 --> 00:03:20,200
quiero que el tamaño de los ojos y la boca también cambien

60
00:03:20,200 --> 00:03:21,405
junto con la cara.

61
00:03:21,405 --> 00:03:24,398
Así que si hago que el tamaño de la cara sea de la mitad,

62
00:03:24,398 --> 00:03:27,718
quiero que la boca también sea de la mitad del tamaño.

63
00:03:27,718 --> 00:03:32,608
Eso significa que quiero calcular el tamaño de la boca "mouthSize" y de los ojos "eyeSize",

64
00:03:32,608 --> 00:03:36,611
como fracciones de "FaceSize".

65
00:03:36,611 --> 00:03:40,275
Muy bien, voy a reconfigurar estas variables y les voy a mostrar

66
00:03:40,275 --> 00:03:41,926
lo que quiero decir.

67
00:03:41,926 --> 00:03:44,156
Vamos a empezar con "mouthSize",

68
00:03:44,156 --> 00:03:47,407
en este momento "faceSize" es igual a 300,

69
00:03:47,407 --> 00:03:50,517
y "mouthSize" es igual a 150.

70
00:03:50,517 --> 00:03:53,428
Si pensamos en cómo se relacionan entre sí estas variables,

71
00:03:53,428 --> 00:03:57,158
podríamos decir que "faceSize" es dos veces más grande que "mouthSize",

72
00:03:57,158 --> 00:04:01,718
o que "mouthSize" es la mitad del tamaño que "faceSize".

73
00:04:01,730 --> 00:04:07,870
Y eso lo podemos codificar como: 1/2 por "faceSize".

74
00:04:07,876 --> 00:04:10,247
Ok, entonces esta línea de código nos dice

75
00:04:10,247 --> 00:04:13,311
que toma el valor de "faceSize", lo multiplica por 1/2,

76
00:04:13,311 --> 00:04:15,460
y lo guarda en "mouthSize".

77
00:04:15,460 --> 00:04:17,944
Entonces si cambiamos lo que tenemos aquí,

78
00:04:17,944 --> 00:04:20,234
tendríamos que averiguar cuál es la mitad de eso,

79
00:04:20,234 --> 00:04:22,192
y es el valor de "mouthSize".

80
00:04:22,192 --> 00:04:24,782
Perfecto. Eso es lo que queremos.

81
00:04:24,782 --> 00:04:29,382
Ahora "eyeSize", entonces "faceSize" es igual a 300,

82
00:04:29,382 --> 00:04:33,257
y "eyeSize" es igual a 40, así que esto tiene que ser

83
00:04:33,257 --> 00:04:39,127
40 entre 300 de "faceSize", lo que en realidad es

84
00:04:39,143 --> 00:04:44,473
4 entre 30, que podemos simplificar como 2 entre 15.

85
00:04:44,473 --> 00:04:50,129
Entonces vamos a decir 2 entre 15, por "faceSize".

86
00:04:50,129 --> 00:04:52,621
Por cierto, si eres inexperto en fracciones,

87
00:04:52,621 --> 00:04:55,942
y se te hacen difíciles, puedes aprender más sobre fracciones,

88
00:04:55,942 --> 00:05:02,442
en Khan Academy, y regresar aquí cuando sientas que estás listo.

89
00:05:02,443 --> 00:05:06,993
Muy bien, vamos a tratar de cambiar el tamaño de la cara de nuevo.

90
00:05:06,993 --> 00:05:08,463
¡Ajá! ¡Échale un vistazo!

91
00:05:08,463 --> 00:05:12,320
La boca y los ojos cambian de tamaño proporcionalmente con la cara.

92
00:05:12,320 --> 00:05:15,525
Pero probablemente te diste cuenta de que algo está mal,

93
00:05:15,525 --> 00:05:19,315
los ojos y la boca siguen quedando fuera de la cara,

94
00:05:19,315 --> 00:05:23,334
aunque tienen un tamaño más proporcionado.

95
00:05:23,334 --> 00:05:25,826
Y eso es porque seguimos teniendo algunos

96
00:05:25,826 --> 00:05:28,753
"números incrustados directamente en el código" en nuestros comandos "ellipse()".

97
00:05:28,753 --> 00:05:31,093
Son algunos números que en realidad deberían ser fracciones

98
00:05:31,093 --> 00:05:33,604
de variables en su lugar.

99
00:05:33,604 --> 00:05:35,074
Les mostraré.

100
00:05:35,079 --> 00:05:40,839
Para la elipse del ojo, tenemos "x - 50" para la posición de "x",

101
00:05:40,839 --> 00:05:45,224
eso significa que siempre es "x - 50", aún si hacemos que

102
00:05:45,224 --> 00:05:47,271
el tamaño de la cara sea menor que 50 pixeles.

103
00:05:47,271 --> 00:05:49,371
Y eso definitivamente no tiene sentido, porque significa

104
00:05:49,371 --> 00:05:52,888
que el ojo izquierdo no va a estar más en la cara.

105
00:05:52,888 --> 00:05:55,789
Así que eso debería ser "x" menos una fracción del

106
00:05:55,789 --> 00:05:57,366
tamaño de la cara.

107
00:05:57,366 --> 00:06:00,193
Y podemos averiguar la fracción de la misma manera,

108
00:06:00,193 --> 00:06:04,044
50 en relación con el tamaño original que es 300.

109
00:06:04,044 --> 00:06:08,309
Así que 50 entre 300, 5 entre 30, 1 entre 6.

110
00:06:08,309 --> 00:06:12,258
Entonces 1 entre 6 por "faceSize".

111
00:06:12,258 --> 00:06:17,648
Y vimos otro 50 aquí, así que podemos hacer lo mismo, la misma expresión.

112
00:06:17,648 --> 00:06:23,272
Aquí tenemos 100 entre 300, esto va a ser igual a 1 entre 3 por "faceSize".

113
00:06:23,272 --> 00:06:29,149
Éste es 60, así que va a ser 1 quinto por "faceSize".

114
00:06:29,149 --> 00:06:34,379
Y aquí tenemos otro 50 así que es igual a 1 sexto otra vez,

115
00:06:34,379 --> 00:06:40,062
y luego 40, que lo calculamos aquí arriba, es 2 entre 15,

116
00:06:40,062 --> 00:06:45,198
2 entre 15 por "faceSize".

117
00:06:45,198 --> 00:06:48,329
Muy bien, vamos a probarlo otra vez.

118
00:06:48,329 --> 00:06:50,129
¡Oh! ¡Miren eso!

119
00:06:50,129 --> 00:06:52,677
¡Es hermoso! ¡Tan bien!

120
00:06:52,677 --> 00:06:54,832
Muy bien, repasemos.

121
00:06:54,832 --> 00:06:58,081
Creamos esta variable que almacena el tamaño de la cara,

122
00:06:58,081 --> 00:07:00,105
y almacena un número.

123
00:07:00,105 --> 00:07:03,133
Luego tenemos estas variables "mouthSize" y "eyeSize",

124
00:07:03,133 --> 00:07:06,737
y las calculamos con base en fracciones de "faceSize", para

125
00:07:06,737 --> 00:07:09,491
asegurarnos que sus valores siempre cambien,

126
00:07:09,491 --> 00:07:12,913
con base en el valor con el que iniciemos la cara.

127
00:07:12,913 --> 00:07:17,362
Luego todas las distancias también se calculan con base en "faceSize".

128
00:07:17,362 --> 00:07:19,982
Para asegurarnos que las posiciones dentro de la cara cambien

129
00:07:19,982 --> 00:07:22,231
si el valor de "faceSize" cambia.

130
00:07:22,231 --> 00:07:25,380
¡Uh! Muy bien. Ahora que entendemos realmente como hacer

131
00:07:25,380 --> 00:07:27,633
que unas variables dependan del valor de otras variables,

132
00:07:27,633 --> 00:07:30,185
podemos hacer mucho más en nuestros programas.

133
00:07:30,185 --> 00:07:34,535
¡Celebremos haciendo a Winston enorme!

134
00:07:34,535 --> 00:07:35,865
¡Sí, muy bien Winston!