Variable Expressions (Video Version)

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

¡Estamos de vuelta con Winston!

Y ahora tenemos tenemos una variable "x" y una "y" para la posición de Winston,

así que ahora podemos hacer que Winston,
salte arriba y abajo,

...que sea como
¡Fiesta de Wilson!

Revisemos lo que hace este código,
antes de continuar.

Tenemos estas variable "x" e "y" arriba,

que almacenan la posición del centro
de la cara de Winston,

y las cuales utilizamos en esta línea aquí,
cuando hacemos la elipse para su cara,

luego, posicionamos los ojos
y la boca, en posición relativa...

... al centro de la cara,
así que restamos o sumamos a "x" y a "y",

para asegurarnos de que los ojos
estén a 50 píxeles, o a 100 píxeles...

Por ejemplo, la boca, está a 50 píxeles
a la derecha del centro de la cara,

y 40 píxeles debajo
del centro de la cara.

Así que, continuemos y veamos qué más podemos almacenar en variables.

Para ello, voy a ir en cada línea
y buscar lo que llamamos,

números "hardcodeados"
[yo, el traductor digo así en "mi" castellano :P ]

Esos son números que están
directamente como números...

...no variables, ni dependiendo de variables.

Veamos,

en nuestra primera llamada a ellipse() aquí,
tenemos 300 y 300 para el ancho y alto,

así que podemos hacer una variable para esto
como "faceSize".

Entonces, faceSize=300;

y luego podemos pasar faceSize...
aquí,

y ahora pasará 300 como valor.

Ahora, continuemos...
Todo aquí está usando "x" o "y" o "eyeSize",

pero aquí, para la boca,
una vez más, tenemos 150 y 150...

... para el ancho y el alto,
así que podemos hacer una variable mouthSize,

decimos mouthSize = 150...
... y continuamos y pasamos mouthSize aquí,

entonces está pasando 150,
porque a eso es igual la variable.

Entonces, ahora que hemos hecho eso,

podríamos cambiar fácilmente,
el tamaño de la cara aquí,

y podemos cambiar facilmente
el tamaño de la boca, así,

y le cambiamos el tamaño
de los ojos nuevamente,

entonces, eso es genial
pero...

... hay algo que no me gusta acerca de eso,
y es que, cuando cambio el tamaño de la cara,

en realidad, quiero que todo lo demás
cambie con tamaño relativo...

... al tamaño de la cara.

de manera de que si
hago la cara así de pequeña,

quiero que sus ojos y su boca
sean también pequeños.

Si hago la cara,
la mitad del tamaño original,

los ojos y la boca
también deberían ser de la mitad del tamaño,

porque, de lo contrario,
sólo se ve muy tonto,

porque sus ojos y su boca
son muy grandes, para su cara.

Ni siquiera están conectados ya.

Así que, lo que queremos hacer,
es que de alguna manera, estas variables,

...mouthSize y eyeSize
dependan de esta variable, faceSize.

Entonces, volvámoslo a lo que estaba.

Y entonces, la manera en la que
podemos hacer esto, es...

podemos hacer que estos valores
estén basados en el valor de faceSize,

así que podemos decir
mouthSize = faceSize /2

entonces estamos usando
una fracción de la cara,

estamos diciendo:
"la mitad del tamaño de la cara",

y si no sabés mucho de fracciones,
hay toneladas de videos en Khan Academy,

que puedes usar para revisar
cómo funcionan las fracciones, ¿Bien?

Ahora, para eyeSize, es
eyeSize = faceSize / 4

no es perfecto, pero, bastante bien...
¡Oh! mejor, 7. Ahí vamos, así está mejor.

¿Ves? Si te equivocas con la fracción al principio,
siempre puedes arreglarlo más tarde,

sólo ajústalo a un número
hasta que tenga sentido.

Ok, entonces, ahora,
si cambiamos el tamaño de la cara nuevamente,

¿Ves cómo el tamaño de los ojos y la boca
se está modificando junto con ella?

¡Bastante genial!
Pero todavía hay algo mal...

Los ojos y la boca, todavía se están yendo
fuera de la cara cuando la hacemos muy chica.

El problema es
la distancia a la cara.

lo que está pasando es que aquí abajo,
cuando posicionamos la elipse,

tenemos x - 50

y "y - 50".
x era 100, y - 60,

así que, aunque faceSize sólo es 50px,
todavía tenemos la posición de los ojos,

en -50px en el centro.
Lo que la dejará fuera de la cara.

Así que necesitamos para 50 y 100
y todos estos números aquí...

... Todos ellos, también deberían ser fracciones
del tamaño de la cara,

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

la cantidad que los ojos y la boca estén
desplazados con respecto a la cara,

esos números,
también cambien.

Bien, entonces,
voy a mostrarte lo que quiero decir,

hagamos el primero ojo.
x - 50

Eso significa que debería haber
50 píxeles a la izquierda del centro de la cara.

Lo que en realidad queremos ahora,
es usar las fracciones,

así que será
faceSize / 6

Entonces, un sexto del
tamaño de la cara,

y entonces 50 será también
faceSize / 6

Entonces, ahora si cambiamos el tamaño de la cara,

nota cómo ese ojo está
perfectamente posicionado.

¡Bueno ojo Winston!
¡Bueno ojo!

Aunque, el otro ojo, todavía necesita
un poco de ayuda,

Entonces, "100" sería
faceSize / 3

es decir,
un tercio del tamaño de la cara.

Y "60" es, un quinto del tamaño de la cara
faceSize / 5

¡Bien!, cambiemos el tamaño...
... muy lindo...

...todavía tenemos
un problema con la boca.

Entonces, vamos a la boca...
Este es, quizás faceSize / 6 nuevamente...

... Y este es más o menos faceSize / 7

Bien, ahora todo está hecho proporcionalmente.
Chequeemos, ¡uhhh!

Ahora podemos hacer a Winston
bien pequeño...

... y sus ojos y su cara
siguen adentro de su cara...

... ¡Estoy segura de que Winston
está realmente contento por ello!

¡Bien!
Revisemos lo que estamos haciendo aquí...

Entonces, arriba
tenemos nuestras variables,

y comenzamos con una variable que
sólo está almacenando un número. 200.

Pero luego hicimos que las variables mouseSize
y eyeSize sean dependientes de ese número,

como fracciones de ese número,

de manera de que, cuando faceSize era 200,
entonces mouseSize será 100,

pero si cambiamos faceSize a 300,

entonces mouseSize, será de repente, 150.

Entonces siempre estamos
cambiando en proporción.

Luego aquí abajo,
cuando calculamos las distancias,

también utilizamos fracciones
porque queremos que las distancias,

también cambien proporcionalmente
al tamaño de la cara.

Básicamente sólo queremos hacer
que sólo una variable afecte todo,

y podemos hacer eso
con variables y expresiones de variables.

Así que, ahora que entendemos cómo hacer
que unas variables,

dependan de los valores de otras variables,

podemos hacer mucho más
con nuestros programas.

Celebremos, haciendo a Winston
gigante...

¡Vamos Winston,
sigue, sigue!

¡Nunca pares, sigue,
nahhhhhhhh jajaja!