WEBVTT

00:00:00.000 --> 00:00:02.246
Volvemos con Winston

00:00:02.417 --> 00:00:05.743
Ahora tenemos ambas: la variable "x" y la "y"

00:00:05.801 --> 00:00:07.257
Para la posición de Winston

00:00:07.397 --> 00:00:09.240
Así que le podemos mover hacia los lados

00:00:10.075 --> 00:00:11.741
Hacia arriba y hacia abajo wew!

00:00:12.088 --> 00:00:13.328
Muy chulo!

00:00:13.680 --> 00:00:15.866
Ahora vamos a devolverlas a su estado original

00:00:16.057 --> 00:00:19.227
Eran: 200 (x) y 200 (y)

00:00:19.315 --> 00:00:21.995
Vamos a ver como funciona este programa

00:00:22.553 --> 00:00:25.763
Así que empezando aquí: Tenemos una variable (tamañoOjos)

00:00:25.763 --> 00:00:27.813
Que se está usando para manejar el tamaño de los ojos

00:00:27.815 --> 00:00:29.766
Porque los ojos son 40 pix. de ancho

00:00:29.766 --> 00:00:32.426
y 40 pix. de alto

00:00:32.470 --> 00:00:35.437
Y despues tenemos estas variables "x" e "y"

00:00:35.437 --> 00:00:39.127
Y esos posicionan el centro de la cara

00:00:39.843 --> 00:00:41.113
Y las podeis ver usadas

00:00:41.113 --> 00:00:42.729
En este comando "ellipse"

00:00:42.729 --> 00:00:44.579
Que dibuja ese gran círculo amarillo

00:00:45.921 --> 00:00:47.422
Y luego aquí abajo

00:00:47.422 --> 00:00:48.617
Para los ojos

00:00:48.617 --> 00:00:50.427
La "x" y la "y" son usadas de nuevo

00:00:50.731 --> 00:00:51.951
Y aquí

00:00:52.009 --> 00:00:53.669
Los ojos son posicionados

00:00:54.048 --> 00:00:55.778
Relativos al centro de la cara

00:00:55.787 --> 00:00:57.877
Así que este está

00:00:58.026 --> 00:00:58.996
Cincuenta píxeles

00:00:59.293 --> 00:01:00.933
A la izquierda del centro

00:01:01.528 --> 00:01:03.428
Y este está 100 píxeles

00:01:03.455 --> 00:01:05.005
a la derecha del centro

00:01:05.149 --> 00:01:07.829
Ok. Pues muy chulo!

00:01:07.865 --> 00:01:09.365
Y esa es la razon por la que podemos

00:01:09.395 --> 00:01:11.195
mover a Winston hacia arriba y abajo

00:01:11.236 --> 00:01:13.192
Ahora, quiero poder controlar

00:01:13.212 --> 00:01:15.202
mas cosas de la cara de Winston

00:01:15.202 --> 00:01:16.662
usando variables

00:01:16.662 --> 00:01:17.912
Así que quiero averiguar

00:01:17.912 --> 00:01:19.339
que mas en este programa

00:01:19.339 --> 00:01:20.669
podemos "guardar" como variables

00:01:20.669 --> 00:01:21.449
Para eso

00:01:21.449 --> 00:01:22.638
Voy a ir buscando

00:01:22.638 --> 00:01:23.608
en cada linea de codigo

00:01:23.622 --> 00:01:25.122
Y buscar lo que llamamos

00:01:25.157 --> 00:01:27.447
"hard coded" numbers

00:01:27.658 --> 00:01:29.308
esos son numeros que son

00:01:29.388 --> 00:01:30.648
simplemente numeros a secas

00:01:30.723 --> 00:01:33.413
no son variables ni numeros dependeintes de variables

00:01:34.277 --> 00:01:35.377
así que vamos a empezar aquí

00:01:35.432 --> 00:01:37.002
en el primer eclipse

00:01:37.832 --> 00:01:39.222
tenemos 300 y 300

00:01:39.262 --> 00:01:41.062
para la anchura y la altura

00:01:41.584 --> 00:01:43.794
esos simplemente son numeros a secas

00:01:43.794 --> 00:01:45.114
así que vamos a hacer una variable

00:01:45.114 --> 00:01:46.214
sustituyéndolos

00:01:46.214 --> 00:01:47.754
llamado faceSize (tamañoCara)

00:01:48.791 --> 00:01:50.291
y guardar en el el numero "300"

00:01:50.291 --> 00:01:53.201
Ahora simplemente escribiremos faceSize

00:01:53.709 --> 00:01:55.259
faceSize

00:01:55.514 --> 00:01:56.794
Ok, sigamos

00:01:56.868 --> 00:01:58.108
y saltarnos los colores (comando fill)

00:01:58.156 --> 00:02:00.076
ahora los comando elipticos son o

00:02:00.104 --> 00:02:01.504
todo variables

00:02:01.544 --> 00:02:02.704
o dependientes de variables

00:02:02.726 --> 00:02:03.896
así que las vamos a dejar

00:02:03.896 --> 00:02:04.846
así por ahora

00:02:04.859 --> 00:02:06.729
y luego el comando de la boca

00:02:07.419 --> 00:02:09.339
esos son dependientes de "x" e "y"

00:02:09.339 --> 00:02:10.369
pero estos de aquí

00:02:10.417 --> 00:02:11.947
son solo numeros a secas

00:02:12.899 --> 00:02:14.669
150 y 150

00:02:14.799 --> 00:02:16.139
Así que vamos a decir que

00:02:16.223 --> 00:02:18.953
mouthSize (buen nombre)

00:02:19.026 --> 00:02:20.476
es igual a 150

00:02:22.464 --> 00:02:25.264
Sustituiremos mouthSize

00:02:25.301 --> 00:02:27.481
y mouthSize

00:02:27.556 --> 00:02:28.816
Vale, entonces, ahora

00:02:28.861 --> 00:02:30.751
tenemos los tamaños de las figuras

00:02:30.825 --> 00:02:32.725
guardados como variables ahí arriba

00:02:32.773 --> 00:02:34.543
eso significa que es muy muy facil

00:02:34.543 --> 00:02:36.093
para nosotros cambiar los tamaños

00:02:36.103 --> 00:02:36.933
como esto mira

00:02:36.933 --> 00:02:39.163
Woooo Winston tiene hambre! jajaja

00:02:39.257 --> 00:02:41.157
y algo como ya sabes como

00:02:41.157 --> 00:02:42.747
Winston tiene mucha hambre

00:02:42.761 --> 00:02:44.291
y luego se come un monton de donuts

00:02:44.291 --> 00:02:45.931
y luego se hace super grande xD.

00:02:45.962 --> 00:02:47.532
Vale.

00:02:47.542 --> 00:02:48.982
Pero hay algo

00:02:49.037 --> 00:02:51.347
que no me gusta de este programa ahora mismo

00:02:51.863 --> 00:02:59.303
Así que si hago el tamaño de la cara muy muy pequeña

00:02:59.404 --> 00:03:01.064
empieza a ser gracioso

00:03:01.076 --> 00:03:03.006
porque los ojos y la boca

00:03:03.017 --> 00:03:04.667
esán fuera de la cara xD

00:03:04.667 --> 00:03:06.717
y en ciertos puntos si quiera

00:03:06.717 --> 00:03:07.887
parece que estén conectados

00:03:07.887 --> 00:03:08.667
a la cara

00:03:08.667 --> 00:03:10.707
Así que ya no es una cara, no?

00:03:11.629 --> 00:03:13.959
Así que lo que queremos que pase

00:03:13.959 --> 00:03:16.309
es que cuando cambie el tamaño de la cara (faceSize)

00:03:16.309 --> 00:03:18.299
quiero la cara y la boca

00:03:18.354 --> 00:03:21.584
Quiero que su tamaño cambie junto con la cara

00:03:21.584 --> 00:03:23.994
Para que si hago la cara ser la mitad de su tamaño

00:03:24.144 --> 00:03:27.454
quiero que la boca sea la mitad de grande tambien

00:03:27.454 --> 00:03:29.044
eso significa que

00:03:29.519 --> 00:03:32.589
quiero calcular: mouthSize y eyeSize

00:03:32.589 --> 00:03:35.929
como fracciones de faceSize

00:03:36.690 --> 00:03:39.790
Vale, vamos a resetear estas variables

00:03:39.790 --> 00:03:42.060
Y os enseñaré lo que quiero decir

00:03:42.061 --> 00:03:44.221
Vamos a empezar con mouthSize

00:03:44.221 --> 00:03:45.141
así que ahora mismo

00:03:45.172 --> 00:03:49.512
faceSize es 300 y mouthSize es 150

00:03:50.187 --> 00:03:51.727
asi que si pensamos en ello

00:03:51.727 --> 00:03:53.007
relativamente uno del otro

00:03:53.007 --> 00:03:55.907
diriamos que faceSize es el doble de grande

00:03:55.907 --> 00:03:57.577
que mouthSize

00:03:57.577 --> 00:04:00.137
o que mouthSize es la mitad de grande

00:04:00.137 --> 00:04:01.357
que faceSize

00:04:01.432 --> 00:04:03.872
y podemos escribir eso en código como este

00:04:04.063 --> 00:04:08.063
una mitad de faceSize

00:04:08.133 --> 00:04:09.703
ok entonces este codigo dice

00:04:09.703 --> 00:04:11.873
que cojemos el valor de faceSize

00:04:11.873 --> 00:04:13.113
los multiplicamos por la mitad

00:04:13.113 --> 00:04:15.393
y lo guardamos en "mouthSize"

00:04:15.674 --> 00:04:17.494
así que si cambiamos esto de aquí

00:04:18.030 --> 00:04:20.260
el ordenador sabria lo que la mitad de eso es

00:04:20.273 --> 00:04:22.353
y eso se convertiria en mouthSize

00:04:22.353 --> 00:04:24.073
Perfecto! Eso es lo que queremos

00:04:24.848 --> 00:04:26.948
Ahora lo mismo con eyeSize

00:04:27.268 --> 00:04:28.908
Así que faceSize es 300

00:04:29.168 --> 00:04:31.039
y eyeSize is 40

00:04:31.039 --> 00:04:33.219
así que necesitamos que sea

00:04:33.219 --> 00:04:36.639
40/300 40 trescientoavos de faceSize

00:04:36.639 --> 00:04:39.459
que es igual a, vamos a ver

00:04:39.459 --> 00:04:41.138
4/30 que podemos

00:04:41.138 --> 00:04:43.768
simplificar hasta 2/15

00:04:44.295 --> 00:04:45.605
así que vamos a decir que

00:04:45.609 --> 00:04:49.609
2/15 por faceSize

00:04:50.111 --> 00:04:50.911
por cierto

00:04:50.949 --> 00:04:52.459
Si eres nuevo en esto de las fracciones

00:04:52.459 --> 00:04:54.279
Y esas matematicas son algo dificiles para ti

00:04:54.352 --> 00:04:56.422
puedes aprender mas sobre fracciones

00:04:56.422 --> 00:04:57.562
en KhanAcademy

00:04:57.562 --> 00:04:59.562
y volver cuando

00:04:59.562 --> 00:05:00.442
creas que estas preparado

00:05:00.442 --> 00:05:01.912
aquiSí, simplemente ves allí.

00:05:02.752 --> 00:05:03.532
OK

00:05:03.532 --> 00:05:06.442
pues vamos a probar a cambiar el tamaño de la cara otra vez

00:05:06.925 --> 00:05:08.155
Jaja! Mira!

00:05:08.155 --> 00:05:10.015
la cara y los ojos cambian su tamaño

00:05:10.015 --> 00:05:11.655
proporcionalmente a la cara

00:05:11.975 --> 00:05:13.495
pero seguramente te has dado cuenta

00:05:13.495 --> 00:05:14.875
hay algo que está mal

00:05:14.875 --> 00:05:16.565
los ojos y la boca

00:05:16.572 --> 00:05:19.162
aun salen fuera de la cara

00:05:19.162 --> 00:05:20.502
aunque estan

00:05:20.502 --> 00:05:22.612
con un tamaño mas proporcional

00:05:23.206 --> 00:05:24.906
Eso es porque aun tenemos

00:05:24.906 --> 00:05:26.626
unos numero a secas

00:05:26.626 --> 00:05:28.396
en nuestro comando elipse

00:05:28.396 --> 00:05:30.376
unos numeros que en realidad deberían

00:05:30.376 --> 00:05:32.656
deberían ser fracciones de variables

00:05:33.148 --> 00:05:34.578
Aquí, te lo enseñaré

00:05:34.669 --> 00:05:37.799
Entonces, para el "ellipse"

00:05:37.799 --> 00:05:40.819
tenemos X menos 50 para la posicion de X

00:05:40.838 --> 00:05:43.278
Esto significa que siempre estará 50 pixeles a la izquierda

00:05:43.443 --> 00:05:45.133
incluso si hacemos nuestra cara

00:05:45.133 --> 00:05:46.843
mas pequeña que 50 pix

00:05:46.843 --> 00:05:48.063
y eso no tiene nigun sentido

00:05:48.063 --> 00:05:49.783
porque eso significa que el ojo ozquierdo

00:05:49.783 --> 00:05:50.461
ni si quiera estará

00:05:50.461 --> 00:05:52.161
en la cara

00:05:52.441 --> 00:05:55.218
Así que debería ser X menos alguna fracción

00:05:55.218 --> 00:05:57.258
el tamaño de nuestra cara

00:05:57.278 --> 00:05:59.218
y podremos averiguar la fraccion

00:05:59.218 --> 00:06:00.148
de la misma manera

00:06:00.148 --> 00:06:03.898
50 relativamente de 300

00:06:03.898 --> 00:06:07.898
así que 50/300, 5/30, 1/6

00:06:08.582 --> 00:06:11.952
entonces 1/6 por faceSize

00:06:12.440 --> 00:06:14.110
Y veremos otros 50 aqu´´i

00:06:14.400 --> 00:06:16.060
Asñi que podemos hacer lo mismo

00:06:16.060 --> 00:06:17.360
de la misma manera

00:06:17.360 --> 00:06:19.140
aqui tenemos 100/300

00:06:19.460 --> 00:06:20.690
que será

00:06:20.710 --> 00:06:23.220
1/3 un tercio faceSize

00:06:23.220 --> 00:06:24.720
este es 60

00:06:24.720 --> 00:06:26.080
así que acabará siendo

00:06:26.080 --> 00:06:28.897
1/5 por faceSize

00:06:29.267 --> 00:06:32.087
y aqui tenemos otros 50

00:06:32.087 --> 00:06:34.457
así que es un sexto otra vez

00:06:34.457 --> 00:06:35.727
y luego 40

00:06:35.727 --> 00:06:38.257
que es lo que sacamos por ahí arriba

00:06:38.257 --> 00:06:39.507
2/15

00:06:39.507 --> 00:06:44.937
así que 2/15 por faceSize

00:06:45.347 --> 00:06:48.117
vale, vamos a intentarlo de nuevo

00:06:48.117 --> 00:06:49.477
Oh! Mira eso!

00:06:49.477 --> 00:06:51.257
Míralo! Es bellísimo

00:06:51.268 --> 00:06:52.048
muy bueno

00:06:52.617 --> 00:06:54.587
Vale, pues vamos a recordar

00:06:54.587 --> 00:06:56.117
Habíamos creado esta variable

00:06:56.130 --> 00:06:57.950
que guardan el tamaño de la cara

00:06:57.950 --> 00:06:59.630
y simplemente guarda un numero

00:06:59.630 --> 00:07:01.510
despues tenemos estas variables "mouthSize"

00:07:01.510 --> 00:07:03.350
y "eyeSize"

00:07:03.350 --> 00:07:05.710
y las calculamos basandos en fracciones

00:07:05.710 --> 00:07:06.790
relaccionadas a faceSize

00:07:06.790 --> 00:07:07.770
para asegurarnos de que

00:07:07.770 --> 00:07:09.500
sus valores son siempre cambiados

00:07:09.500 --> 00:07:12.360
basandonos en como empezamos esta al principio

00:07:12.514 --> 00:07:15.104
luego todos los otros son calculados

00:07:15.104 --> 00:07:16.894
basandono en faceSize también

00:07:16.894 --> 00:07:18.454
para asegurarnos de que la posición

00:07:18.454 --> 00:07:19.884
dentro de la cara cambie

00:07:19.884 --> 00:07:22.064
Si faceSize cambia

00:07:22.064 --> 00:07:23.014
Whoo! Vale!

00:07:23.014 --> 00:07:24.614
Ahora que realmente entendemos

00:07:24.614 --> 00:07:25.725
como hacer variables

00:07:25.725 --> 00:07:27.865
dependiendo de los valores de otras variables

00:07:27.865 --> 00:07:30.375
podemos hacer muchas mas cosas con nuestros programas!

00:07:30.375 --> 00:07:32.365
Vamos a celebrarlo haciendo a Winston

00:07:32.365 --> 00:07:36.781
Gigante! Si, vamos Winston!