¡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!