Cambiando el tamaño con expresiones de variables

Estamos de regreso con "Winston"

Ahora tenemos dos variables "x" y "y"

para la posición de Winston.

Así que lo podemos mover a los lados,

hacia arriba y hacia abajo. ¡Woo! Muy lindo.

Ahora, vamos a reconfigurar estas variables

en 200 y 200.

Y vamos a revisar cómo funciona este programa.

Así que empezando aquí tenemos la variable "eyeSize",

que usamos para controlar el tamaño de los ojos,

y que es 40 de ancho y 40 de alto.

Y luego tenemos estas variables "x" y "y",

que son para posicionar el centro de la cara,

y las puedes ver en este comando "ellipse()",

que dibuja el círculo amarillo grande.

Y luego, aquí abajo para los ojos,

se usan otra vez la "x" y la "y",

y aquí, el ojo está posicionado en relación con el centro de la cara.

Así que tal vez éste esté 50 pixeles a la izquierda del centro,

y éste, está a 100 pixeles a la derecha del centro.

Ok, genial.

Y es por esto que podemos mover a Winston hacia arriba y hacia abajo.

Ahora, quiero poder controlar más cosas de la cara de Winston con variables.

Entonces tengo que averiguar qué más dentro del programa

podemos guardar en variables.

Para hacer eso, tengo que revisar cada línea del código,

y buscar lo que llamamos "hard coded numbers".

Estos son números, literalmente números, no son variables,

o variables dependientes.

Así que vamos a empezar aquí, en la primera llamada a "ellipse()".

Tenemos 300 y 300 para la anchura y la altura.

Estos son números, así que vamos a crear una variable

para usarla en lugar de esos números.

La llamaremos "faceSize" y le vamos a asignar 300.

Ahora escribimos "faceSize, faceSize;".

Ok, continuamos, nos saltamos los colores.

Ahora el comando "ellipse()" tiene variables y variables dependientes,

así que lo voy a dejar así por el momento.

Y luego, en el comando para la boca, estos están dependiendo de "x" y "y",

pero esto que está aquí, son números literales.

150 y 150.

Así que voy a escribir "mouthSize", es un buen nombre, es igual a 150.

Reemplazamos por "mouthSize, mouthSize".

Muy bien.

Ahora tenemos los tamaños de las figuras,

almacenados en las variables hasta arriba del programa.

Eso significa que es muy fácil cambiar los tamaños.

Como esto. ¡Woo! ¡Winston tiene hambre!

¡Y Winston se comió muchas donas y se puso gordísimo!

Muy bien, pero hay algo que no me gusta

del programa en este momento,

si cambio el tamaño de la cara, y lo hago realmente

pequeño, se empieza a ver chistoso.

Porque los ojos y la boca empiezan a salirse de la cara,

y llegamos a un punto en el que parece que ya no están

conectados con la cara, y deja de parecer una cara. ¿No?

Así que lo que realmente quiero que pase,

es que cuando cambie el tamaño de la cara,

quiero que el tamaño de los ojos y la boca también cambien

junto con la cara.

Así que si hago que el tamaño de la cara sea de la mitad,

quiero que la boca también sea de la mitad del tamaño.

Eso significa que quiero calcular el tamaño de la boca "mouthSize" y de los ojos "eyeSize",

como fracciones de "FaceSize".

Muy bien, voy a reconfigurar estas variables y les voy a mostrar

lo que quiero decir.

Vamos a empezar con "mouthSize",

en este momento "faceSize" es igual a 300,

y "mouthSize" es igual a 150.

Si pensamos en cómo se relacionan entre sí estas variables,

podríamos decir que "faceSize" es dos veces más grande que "mouthSize",

o que "mouthSize" es la mitad del tamaño que "faceSize".

Y eso lo podemos codificar como: 1/2 por "faceSize".

Ok, entonces esta línea de código nos dice

que toma el valor de "faceSize", lo multiplica por 1/2,

y lo guarda en "mouthSize".

Entonces si cambiamos lo que tenemos aquí,

tendríamos que averiguar cuál es la mitad de eso,

y es el valor de "mouthSize".

Perfecto. Eso es lo que queremos.

Ahora "eyeSize", entonces "faceSize" es igual a 300,

y "eyeSize" es igual a 40, así que esto tiene que ser

40 entre 300 de "faceSize", lo que en realidad es

4 entre 30, que podemos simplificar como 2 entre 15.

Entonces vamos a decir 2 entre 15, por "faceSize".

Por cierto, si eres inexperto en fracciones,

y se te hacen difíciles, puedes aprender más sobre fracciones,

en Khan Academy, y regresar aquí cuando sientas que estás listo.

Muy bien, vamos a tratar de cambiar el tamaño de la cara de nuevo.

¡Ajá! ¡Échale un vistazo!

La boca y los ojos cambian de tamaño proporcionalmente con la cara.

Pero probablemente te diste cuenta de que algo está mal,

los ojos y la boca siguen quedando fuera de la cara,

aunque tienen un tamaño más proporcionado.

Y eso es porque seguimos teniendo algunos

"números incrustados directamente en el código" en nuestros comandos "ellipse()".

Son algunos números que en realidad deberían ser fracciones

de variables en su lugar.

Les mostraré.

Para la elipse del ojo, tenemos "x - 50" para la posición de "x",

eso significa que siempre es "x - 50", aún si hacemos que

el tamaño de la cara sea menor que 50 pixeles.

Y eso definitivamente no tiene sentido, porque significa

que el ojo izquierdo no va a estar más en la cara.

Así que eso debería ser "x" menos una fracción del

tamaño de la cara.

Y podemos averiguar la fracción de la misma manera,

50 en relación con el tamaño original que es 300.

Así que 50 entre 300, 5 entre 30, 1 entre 6.

Entonces 1 entre 6 por "faceSize".

Y vimos otro 50 aquí, así que podemos hacer lo mismo, la misma expresión.

Aquí tenemos 100 entre 300, esto va a ser igual a 1 entre 3 por "faceSize".

Éste es 60, así que va a ser 1 quinto por "faceSize".

Y aquí tenemos otro 50 así que es igual a 1 sexto otra vez,

y luego 40, que lo calculamos aquí arriba, es 2 entre 15,

2 entre 15 por "faceSize".

Muy bien, vamos a probarlo otra vez.

¡Oh! ¡Miren eso!

¡Es hermoso! ¡Tan bien!

Muy bien, repasemos.

Creamos esta variable que almacena el tamaño de la cara,

y almacena un número.

Luego tenemos estas variables "mouthSize" y "eyeSize",

y las calculamos con base en fracciones de "faceSize", para

asegurarnos que sus valores siempre cambien,

con base en el valor con el que iniciemos la cara.

Luego todas las distancias también se calculan con base en "faceSize".

Para asegurarnos que las posiciones dentro de la cara cambien

si el valor de "faceSize" cambia.

¡Uh! Muy bien. Ahora que entendemos realmente como hacer

que unas variables dependan del valor de otras variables,

podemos hacer mucho más en nuestros programas.

¡Celebremos haciendo a Winston enorme!

¡Sí, muy bien Winston!