WEBVTT

00:00:00.000 --> 00:00:02.246
Estamos de volta com Winston.

00:00:02.417 --> 00:00:05.743
Agora temos ambas as variáveis X e Y para

00:00:05.851 --> 00:00:07.307
a posição do Winston.

00:00:07.397 --> 00:00:09.240
Então podemos movê-lo para os lados,

00:00:10.075 --> 00:00:11.741
para cima e para baixo, wooo!

00:00:12.088 --> 00:00:13.328
Muito bom.

00:00:13.680 --> 00:00:15.866
Bom, vamos redefinir essas variáveis


00:00:16.057 --> 00:00:19.227
para 200 e 200


00:00:19.315 --> 00:00:21.995
e recapitular como este programa funciona.

00:00:22.553 --> 00:00:25.763
Então, aqui temos a variável “eyeSize”, 


00:00:25.763 --> 00:00:27.813
é usada pra controlar o tamanho dos olhos,

00:00:27.815 --> 00:00:29.766
pois ambos têm 40 pixels de largura

00:00:29.766 --> 00:00:32.426
e 40 pixels de altura.

00:00:32.470 --> 00:00:35.437
Também temos estas variáveis X e Y

00:00:35.437 --> 00:00:39.127
e elas definem o centro da face.

00:00:39.843 --> 00:00:41.113
Podem vê-las usadas

00:00:41.113 --> 00:00:42.729
no comando desta elipse aqui

00:00:42.729 --> 00:00:44.579
que desenha o grande círculo amarelo.

00:00:45.921 --> 00:00:47.422
E aqui embaixo,

00:00:47.422 --> 00:00:48.617
para os olhos,

00:00:48.617 --> 00:00:50.427
X e Y são usados novamente.

00:00:50.731 --> 00:00:51.951
E aqui,

00:00:52.009 --> 00:00:53.669
os olhos são posicionados

00:00:54.048 --> 00:00:55.778
de acordo com o centro do rosto.

00:00:55.787 --> 00:00:57.877
Então, este aqui tem

00:00:58.026 --> 00:00:58.996
cinquenta pixels

00:00:59.293 --> 00:01:00.933
à esquerda do centro,

00:01:01.528 --> 00:01:03.428
e este outro tem cem pixels

00:01:03.455 --> 00:01:05.005
à direita do centro

00:01:05.149 --> 00:01:07.829
Okay, muito bem

00:01:07.865 --> 00:01:09.365
é a razão pela qual podemos

00:01:09.395 --> 00:01:11.195
mover Winston para cima e para baixo.

00:01:11.236 --> 00:01:13.192
Agora, eu quero poder controlar

00:01:13.212 --> 00:01:15.202
mais coisas no rosto do Winston

00:01:15.202 --> 00:01:16.662
usando variáveis.

00:01:16.662 --> 00:01:17.912
Então eu quero descobrir

00:01:17.912 --> 00:01:19.339
o que mais no programa podemos

00:01:19.339 --> 00:01:20.669
controlar usando variáveis.

00:01:20.669 --> 00:01:21.449
Para isso,

00:01:21.449 --> 00:01:22.638
eu irei em

00:01:22.638 --> 00:01:23.608
cada linha de código

00:01:23.622 --> 00:01:25.122
e procurar pelo que chamamos de

00:01:25.157 --> 00:01:27.447
números "hard-coded"

00:01:27.658 --> 00:01:29.308
Esses números são simplesmente

00:01:29.388 --> 00:01:30.648
números literais, e não

00:01:30.723 --> 00:01:33.413
variáveis ou dependentes de variáveis

00:01:34.277 --> 00:01:35.377
Vamos começar aqui

00:01:35.432 --> 00:01:37.002
na primeira elipse,

00:01:37.832 --> 00:01:39.222
nós temos 300 e 300

00:01:39.262 --> 00:01:41.062
para a largura e altura.

00:01:41.584 --> 00:01:43.794
Estes são apenas números literais

00:01:43.794 --> 00:01:45.114
então vamos criar

00:01:45.114 --> 00:01:46.214
uma variável para eles,

00:01:46.214 --> 00:01:47.754
chamada "faceSize"

00:01:48.791 --> 00:01:50.291
e dar a ela um valor de 300

00:01:50.291 --> 00:01:53.201
Agora vamos escrever "faceSize"...

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

00:01:55.514 --> 00:01:56.794
Okay, continuando

00:01:56.868 --> 00:01:58.108
e pulando as cores

00:01:58.156 --> 00:02:00.076
agora os comandos da elipse são ambos...

00:02:00.104 --> 00:02:01.504
Eles são variáveis ou

00:02:01.544 --> 00:02:02.704
dependentes de variáveis

00:02:02.726 --> 00:02:03.896
Então, irei deixá-los

00:02:03.896 --> 00:02:04.846
assim por enquanto.

00:02:04.859 --> 00:02:06.729
Temos também o comando da boca,

00:02:07.419 --> 00:02:09.339
eles são dependentes de X e Y,

00:02:09.339 --> 00:02:10.369
mas estes aqui

00:02:10.417 --> 00:02:11.947
são apenas números literais

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

00:02:14.799 --> 00:02:16.139
Então iremos chamá-lo

00:02:16.223 --> 00:02:18.953
"mouthSize", esse é um bom nome,

00:02:19.026 --> 00:02:20.476
que recebe 150.

00:02:22.464 --> 00:02:25.264
Vamos substituir estes por "mouthSize"

00:02:25.301 --> 00:02:27.481
e "mouthSize".

00:02:27.556 --> 00:02:28.816
ótimo, agora

00:02:28.861 --> 00:02:30.751
temos os tamanhos das formas

00:02:30.825 --> 00:02:32.725
definidos por variáveis, no topo

00:02:32.773 --> 00:02:34.543
que significa que é realmente fácil

00:02:34.543 --> 00:02:36.093
para nós mudarmos os tamanhos,

00:02:36.103 --> 00:02:36.933
dessa forma, tipo

00:02:36.933 --> 00:02:39.163
Wooo! Winston está com fome

00:02:39.257 --> 00:02:41.157
e... Você sabe,

00:02:41.157 --> 00:02:42.747
quando Winston fica com fome

00:02:42.761 --> 00:02:44.291
ele come muitos donuts

00:02:44.291 --> 00:02:45.931
e acaba enorme.

00:02:45.962 --> 00:02:47.532
Certo,

00:02:47.542 --> 00:02:48.982
mas tem algo

00:02:49.037 --> 00:02:51.347
que eu não gosto no programa agora.

00:02:51.863 --> 00:02:59.303
Se eu diminuo o tamanho do rosto

00:02:59.404 --> 00:03:01.064
ele começa a ficar engraçado

00:03:01.076 --> 00:03:03.006
por que os olhos e a boca

00:03:03.017 --> 00:03:04.667
saem do rosto

00:03:04.667 --> 00:03:06.717
e num determinado ponto nem

00:03:06.717 --> 00:03:07.887
parece mesmo que estão

00:03:07.887 --> 00:03:08.667
conectados à ele

00:03:08.667 --> 00:03:10.707
ou nem é um mais rosto, é?

00:03:11.629 --> 00:03:13.959
Então o que eu quero que aconteça

00:03:13.959 --> 00:03:16.309
é que quando eu mude o valor de “faceSize”

00:03:16.309 --> 00:03:18.299
eu quero que os olhos e a boca...

00:03:18.354 --> 00:03:21.584
Quero que seus tamanhos mudem igualmente,

00:03:21.584 --> 00:03:23.994
então se eu diminuir faceSize pela metade,

00:03:24.144 --> 00:03:27.454
eu quero que a boca diminua igualmente.

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

00:03:29.519 --> 00:03:32.589
eu quero calcular mouthSize e eyeSize

00:03:32.589 --> 00:03:35.929
como frações de faceSize.

00:03:36.690 --> 00:03:39.790
Vamos redefinir essas variáveis

00:03:39.790 --> 00:03:42.060
e eu mostro o que quero dizer.

00:03:42.061 --> 00:03:44.221
Vamos começar com mouthSize

00:03:44.221 --> 00:03:45.141
Agora,

00:03:45.172 --> 00:03:49.512
faceSize recebe 300 e mouthSize recebe 150

00:03:50.187 --> 00:03:51.727
Então se pensamos neles

00:03:51.727 --> 00:03:53.007
como valores relacionados,

00:03:53.007 --> 00:03:55.907
podemos dizer que faceSize é o dobro

00:03:55.907 --> 00:03:57.577
do tamanho de mouthSize,

00:03:57.577 --> 00:04:00.137
ou que mouthSize é a metade

00:04:00.137 --> 00:04:01.357
de faceSize,

00:04:01.432 --> 00:04:03.872
e podemos escrever isso em código, assim

00:04:04.063 --> 00:04:08.063
Um meio vezes faceSize.

00:04:08.133 --> 00:04:09.703
Okay, essa linha de código diz

00:04:09.703 --> 00:04:11.873
que pegamos o valor de faceSize,

00:04:11.873 --> 00:04:13.113
multiplicamos por um meio

00:04:13.113 --> 00:04:15.393
e armazenamos o resultado em mouthSize.

00:04:15.674 --> 00:04:17.494
Então se mudarmos isso aqui,

00:04:18.030 --> 00:04:20.260
isso calcularia quanto metade daquilo vale

00:04:20.273 --> 00:04:22.353
e isso seria o valor de mouthSize.

00:04:22.353 --> 00:04:24.073
Perfeito! É o que nós queremos

00:04:24.848 --> 00:04:26.948
Então agora eyeSize,

00:04:27.268 --> 00:04:28.908
faceSize é 300

00:04:29.168 --> 00:04:31.039
e eyeSize é 40,

00:04:31.039 --> 00:04:33.219
então queremos que isso seja

00:04:33.219 --> 00:04:36.639
quarenta trezentos avos de faceSize

00:04:36.639 --> 00:04:39.459
o que é, vamos ver...

00:04:39.459 --> 00:04:41.138
Quatro sobre trinta, que podemos

00:04:41.138 --> 00:04:43.768
simplificar para dois quinze avos,

00:04:44.295 --> 00:04:45.605
então vamos dizer

00:04:45.609 --> 00:04:49.609
dois quinze avos vezes faceSize

00:04:50.111 --> 00:04:50.911
A propósito,

00:04:50.949 --> 00:04:52.459
se você é novo em frações

00:04:52.459 --> 00:04:54.279
e matemática é complicado pra você,

00:04:54.352 --> 00:04:56.422
você pode aprender mais sobre frações

00:04:56.422 --> 00:04:57.562
na Khan Academy

00:04:57.562 --> 00:04:59.562
e retornar aqui quando você

00:04:59.562 --> 00:05:00.442
estiver pronto.

00:05:00.442 --> 00:05:01.912
Aqui, vejam

00:05:02.752 --> 00:05:03.532
Okay,

00:05:03.532 --> 00:05:06.442
vamos tentar dimensionar a face novamente

00:05:06.925 --> 00:05:08.155
Haha! Dêem uma olhada

00:05:08.155 --> 00:05:10.015
A boca e os olhos redimensionam

00:05:10.015 --> 00:05:11.655
proporcionalmente ao rosto.

00:05:11.975 --> 00:05:13.495
Mas você provavelmente notou

00:05:13.495 --> 00:05:14.875
algo errado,

00:05:14.875 --> 00:05:16.565
os olhos e a boca

00:05:16.572 --> 00:05:19.162
ainda estão pulando para fora do rosto,

00:05:19.162 --> 00:05:20.502
mesmo que ambos estejam

00:05:20.502 --> 00:05:22.612
redimensionados adequadamente.

00:05:23.206 --> 00:05:24.906
Isso acontece porque ainda temos

00:05:24.906 --> 00:05:26.626
alguns números "hard-coded"

00:05:26.626 --> 00:05:28.396
nos nossos comandos da elipse.

00:05:28.396 --> 00:05:30.376
Alguns números que na verdade deveriam

00:05:30.376 --> 00:05:32.656
ser frações ou variáveis.

00:05:33.148 --> 00:05:34.578
Aqui, vou mostrá-los...

00:05:34.669 --> 00:05:37.799
Então, para as elipses dos olhos,

00:05:37.799 --> 00:05:40.819
X menos cinquenta para a posição X,

00:05:40.838 --> 00:05:43.278
significa que isso será sempre X menos 50

00:05:43.443 --> 00:05:45.133
mesmo que façamos faceSize

00:05:45.133 --> 00:05:46.843
menor do que 50 pixels,

00:05:46.843 --> 00:05:48.063
e isso não faz sentido

00:05:48.063 --> 00:05:49.783
pois quer dizer que o olho esquerdo

00:05:49.783 --> 00:05:50.611
não estará

00:05:50.611 --> 00:05:52.161
mais no rosto.

00:05:52.441 --> 00:05:55.218
Então isso deve ser X menos uma fração

00:05:55.218 --> 00:05:57.258
o tamanho da nossa face,

00:05:57.278 --> 00:05:59.218
e nós podemos descobrir a fração

00:05:59.218 --> 00:06:00.148
da mesma maneira.

00:06:00.148 --> 00:06:03.898
50 relativo ao 300 original,

00:06:03.898 --> 00:06:07.898
então 50 sobre 300, 5 sobre 30, 1 sobre 6,

00:06:08.582 --> 00:06:11.952
então, 1/6 vezes faceSize

00:06:12.440 --> 00:06:14.110
e podemos ver outros 50 aqui

00:06:14.400 --> 00:06:16.060
podemos fazer a mesma coisa,

00:06:16.060 --> 00:06:17.360
a mesma expressão,

00:06:17.360 --> 00:06:19.140
aqui temos 100 sobre 300,

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

00:06:20.710 --> 00:06:23.220
um terço vezes faceSize,

00:06:23.220 --> 00:06:24.720
isso é sessenta,

00:06:24.720 --> 00:06:26.080
esse aqui é

00:06:26.080 --> 00:06:28.897
um quinto vezes faceSize,

00:06:29.267 --> 00:06:32.087
e aqui tem outro cinquenta,

00:06:32.087 --> 00:06:34.457
então um sexto novamente,

00:06:34.457 --> 00:06:35.727
e quarenta,

00:06:35.727 --> 00:06:38.257
é o que descobrimos acima

00:06:38.257 --> 00:06:39.507
dois sobre quinze,

00:06:39.507 --> 00:06:44.937
então dois quinze avos vezes faceSize.

00:06:45.347 --> 00:06:48.117
Bem, então vamos tentar novamente...

00:06:48.117 --> 00:06:49.477
Oh, vejam só!

00:06:49.477 --> 00:06:51.257
Olhem isso, está lindo!

00:06:51.268 --> 00:06:52.048
Muito bem

00:06:52.617 --> 00:06:54.587
Certo, então vamos recapitular:

00:06:54.587 --> 00:06:56.117
nós criamos esta variável

00:06:56.130 --> 00:06:57.950
que armazenou o tamanho da face,

00:06:57.950 --> 00:06:59.630
e isso armazena um número;

00:06:59.630 --> 00:07:01.510
Então temos essas variáveis, mouthSize

00:07:01.510 --> 00:07:03.350
e eyeSize

00:07:03.350 --> 00:07:05.710
e nós os calculamos baseados em frações

00:07:05.710 --> 00:07:06.790
de faceSize

00:07:06.790 --> 00:07:07.770
para termos certeza

00:07:07.770 --> 00:07:09.500
que seus valores sempre mudam

00:07:09.500 --> 00:07:12.360
baseados neste valor inicial

00:07:12.514 --> 00:07:15.104
então todos os deslocamentos são

00:07:15.104 --> 00:07:16.894
calculados com base em faceSize

00:07:16.894 --> 00:07:18.454
para ter certeza que a posição

00:07:18.454 --> 00:07:19.884
dentro dos rostos mudam

00:07:19.884 --> 00:07:22.064
quando faceSize muda.

00:07:22.064 --> 00:07:23.014
Wooo! Muito bom.

00:07:23.014 --> 00:07:24.614
Então agora que entendemos

00:07:24.614 --> 00:07:25.725
como criar variáveis

00:07:25.725 --> 00:07:27.865
dependentes do valor de outras variáveis,

00:07:27.865 --> 00:07:30.375
podemos fazer muito com nossos programas.

00:07:30.375 --> 00:07:32.365
Vamos celebrar fazendo o Winston

00:07:32.365 --> 00:07:36.781
grande! Yeah, vai Winston!