0:00:00.000,0:00:02.246 Estamos de volta com Winston. 0:00:02.417,0:00:05.743 Agora temos ambas as variáveis X e Y para 0:00:05.851,0:00:07.307 a posição do Winston. 0:00:07.397,0:00:09.240 Então podemos movê-lo para os lados, 0:00:10.075,0:00:11.741 para cima e para baixo, wooo! 0:00:12.088,0:00:13.328 Muito bom. 0:00:13.680,0:00:15.866 Bom, vamos redefinir essas variáveis[br] 0:00:16.057,0:00:19.227 para 200 e 200[br] 0:00:19.315,0:00:21.995 e recapitular como este programa funciona. 0:00:22.553,0:00:25.763 Então, aqui temos a variável “eyeSize”, [br] 0:00:25.763,0:00:27.813 é usada pra controlar o tamanho dos olhos, 0:00:27.815,0:00:29.766 pois ambos têm 40 pixels de largura 0:00:29.766,0:00:32.426 e 40 pixels de altura. 0:00:32.470,0:00:35.437 Também temos estas variáveis X e Y 0:00:35.437,0:00:39.127 e elas definem o centro da face. 0:00:39.843,0:00:41.113 Podem vê-las usadas 0:00:41.113,0:00:42.729 no comando desta elipse aqui 0:00:42.729,0:00:44.579 que desenha o grande círculo amarelo. 0:00:45.921,0:00:47.422 E aqui embaixo, 0:00:47.422,0:00:48.617 para os olhos, 0:00:48.617,0:00:50.427 X e Y são usados novamente. 0:00:50.731,0:00:51.951 E aqui, 0:00:52.009,0:00:53.669 os olhos são posicionados 0:00:54.048,0:00:55.778 de acordo com o centro do rosto. 0:00:55.787,0:00:57.877 Então, este aqui tem 0:00:58.026,0:00:58.996 cinquenta pixels 0:00:59.293,0:01:00.933 à esquerda do centro, 0:01:01.528,0:01:03.428 e este outro tem cem pixels 0:01:03.455,0:01:05.005 à direita do centro 0:01:05.149,0:01:07.829 Okay, muito bem 0:01:07.865,0:01:09.365 é a razão pela qual podemos 0:01:09.395,0:01:11.195 mover Winston para cima e para baixo. 0:01:11.236,0:01:13.192 Agora, eu quero poder controlar 0:01:13.212,0:01:15.202 mais coisas no rosto do Winston 0:01:15.202,0:01:16.662 usando variáveis. 0:01:16.662,0:01:17.912 Então eu quero descobrir 0:01:17.912,0:01:19.339 o que mais no programa podemos 0:01:19.339,0:01:20.669 controlar usando variáveis. 0:01:20.669,0:01:21.449 Para isso, 0:01:21.449,0:01:22.638 eu irei em 0:01:22.638,0:01:23.608 cada linha de código 0:01:23.622,0:01:25.122 e procurar pelo que chamamos de 0:01:25.157,0:01:27.447 números "hard-coded" 0:01:27.658,0:01:29.308 Esses números são simplesmente 0:01:29.388,0:01:30.648 números literais, e não 0:01:30.723,0:01:33.413 variáveis ou dependentes de variáveis 0:01:34.277,0:01:35.377 Vamos começar aqui 0:01:35.432,0:01:37.002 na primeira elipse, 0:01:37.832,0:01:39.222 nós temos 300 e 300 0:01:39.262,0:01:41.062 para a largura e altura. 0:01:41.584,0:01:43.794 Estes são apenas números literais 0:01:43.794,0:01:45.114 então vamos criar 0:01:45.114,0:01:46.214 uma variável para eles, 0:01:46.214,0:01:47.754 chamada "faceSize" 0:01:48.791,0:01:50.291 e dar a ela um valor de 300 0:01:50.291,0:01:53.201 Agora vamos escrever "faceSize"... 0:01:53.709,0:01:55.259 faceSize... 0:01:55.514,0:01:56.794 Okay, continuando 0:01:56.868,0:01:58.108 e pulando as cores 0:01:58.156,0:02:00.076 agora os comandos da elipse são ambos... 0:02:00.104,0:02:01.504 Eles são variáveis ou 0:02:01.544,0:02:02.704 dependentes de variáveis 0:02:02.726,0:02:03.896 Então, irei deixá-los 0:02:03.896,0:02:04.846 assim por enquanto. 0:02:04.859,0:02:06.729 Temos também o comando da boca, 0:02:07.419,0:02:09.339 eles são dependentes de X e Y, 0:02:09.339,0:02:10.369 mas estes aqui 0:02:10.417,0:02:11.947 são apenas números literais 0:02:12.899,0:02:14.669 150 e 150 0:02:14.799,0:02:16.139 Então iremos chamá-lo 0:02:16.223,0:02:18.953 "mouthSize", esse é um bom nome, 0:02:19.026,0:02:20.476 que recebe 150. 0:02:22.464,0:02:25.264 Vamos substituir estes por "mouthSize" 0:02:25.301,0:02:27.481 e "mouthSize". 0:02:27.556,0:02:28.816 ótimo, agora 0:02:28.861,0:02:30.751 temos os tamanhos das formas 0:02:30.825,0:02:32.725 definidos por variáveis, no topo 0:02:32.773,0:02:34.543 que significa que é realmente fácil 0:02:34.543,0:02:36.093 para nós mudarmos os tamanhos, 0:02:36.103,0:02:36.933 dessa forma, tipo 0:02:36.933,0:02:39.163 Wooo! Winston está com fome 0:02:39.257,0:02:41.157 e... Você sabe, 0:02:41.157,0:02:42.747 quando Winston fica com fome 0:02:42.761,0:02:44.291 ele come muitos donuts 0:02:44.291,0:02:45.931 e acaba enorme. 0:02:45.962,0:02:47.532 Certo, 0:02:47.542,0:02:48.982 mas tem algo 0:02:49.037,0:02:51.347 que eu não gosto no programa agora. 0:02:51.863,0:02:59.303 Se eu diminuo o tamanho do rosto 0:02:59.404,0:03:01.064 ele começa a ficar engraçado 0:03:01.076,0:03:03.006 por que os olhos e a boca 0:03:03.017,0:03:04.667 saem do rosto 0:03:04.667,0:03:06.717 e num determinado ponto nem 0:03:06.717,0:03:07.887 parece mesmo que estão 0:03:07.887,0:03:08.667 conectados à ele 0:03:08.667,0:03:10.707 ou nem é um mais rosto, é? 0:03:11.629,0:03:13.959 Então o que eu quero que aconteça 0:03:13.959,0:03:16.309 é que quando eu mude o valor de “faceSize” 0:03:16.309,0:03:18.299 eu quero que os olhos e a boca... 0:03:18.354,0:03:21.584 Quero que seus tamanhos mudem igualmente, 0:03:21.584,0:03:23.994 então se eu diminuir faceSize pela metade, 0:03:24.144,0:03:27.454 eu quero que a boca diminua igualmente. 0:03:27.454,0:03:29.044 Isso significa que 0:03:29.519,0:03:32.589 eu quero calcular mouthSize e eyeSize 0:03:32.589,0:03:35.929 como frações de faceSize. 0:03:36.690,0:03:39.790 Vamos redefinir essas variáveis 0:03:39.790,0:03:42.060 e eu mostro o que quero dizer. 0:03:42.061,0:03:44.221 Vamos começar com mouthSize 0:03:44.221,0:03:45.141 Agora, 0:03:45.172,0:03:49.512 faceSize recebe 300 e mouthSize recebe 150 0:03:50.187,0:03:51.727 Então se pensamos neles 0:03:51.727,0:03:53.007 como valores relacionados, 0:03:53.007,0:03:55.907 podemos dizer que faceSize é o dobro 0:03:55.907,0:03:57.577 do tamanho de mouthSize, 0:03:57.577,0:04:00.137 ou que mouthSize é a metade 0:04:00.137,0:04:01.357 de faceSize, 0:04:01.432,0:04:03.872 e podemos escrever isso em código, assim 0:04:04.063,0:04:08.063 Um meio vezes faceSize. 0:04:08.133,0:04:09.703 Okay, essa linha de código diz 0:04:09.703,0:04:11.873 que pegamos o valor de faceSize, 0:04:11.873,0:04:13.113 multiplicamos por um meio 0:04:13.113,0:04:15.393 e armazenamos o resultado em mouthSize. 0:04:15.674,0:04:17.494 Então se mudarmos isso aqui, 0:04:18.030,0:04:20.260 isso calcularia quanto metade daquilo vale 0:04:20.273,0:04:22.353 e isso seria o valor de mouthSize. 0:04:22.353,0:04:24.073 Perfeito! É o que nós queremos 0:04:24.848,0:04:26.948 Então agora eyeSize, 0:04:27.268,0:04:28.908 faceSize é 300 0:04:29.168,0:04:31.039 e eyeSize é 40, 0:04:31.039,0:04:33.219 então queremos que isso seja 0:04:33.219,0:04:36.639 quarenta trezentos avos de faceSize 0:04:36.639,0:04:39.459 o que é, vamos ver... 0:04:39.459,0:04:41.138 Quatro sobre trinta, que podemos 0:04:41.138,0:04:43.768 simplificar para dois quinze avos, 0:04:44.295,0:04:45.605 então vamos dizer 0:04:45.609,0:04:49.609 dois quinze avos vezes faceSize 0:04:50.111,0:04:50.911 A propósito, 0:04:50.949,0:04:52.459 se você é novo em frações 0:04:52.459,0:04:54.279 e matemática é complicado pra você, 0:04:54.352,0:04:56.422 você pode aprender mais sobre frações 0:04:56.422,0:04:57.562 na Khan Academy 0:04:57.562,0:04:59.562 e retornar aqui quando você 0:04:59.562,0:05:00.442 estiver pronto. 0:05:00.442,0:05:01.912 Aqui, vejam 0:05:02.752,0:05:03.532 Okay, 0:05:03.532,0:05:06.442 vamos tentar dimensionar a face novamente 0:05:06.925,0:05:08.155 Haha! Dêem uma olhada 0:05:08.155,0:05:10.015 A boca e os olhos redimensionam 0:05:10.015,0:05:11.655 proporcionalmente ao rosto. 0:05:11.975,0:05:13.495 Mas você provavelmente notou 0:05:13.495,0:05:14.875 algo errado, 0:05:14.875,0:05:16.565 os olhos e a boca 0:05:16.572,0:05:19.162 ainda estão pulando para fora do rosto, 0:05:19.162,0:05:20.502 mesmo que ambos estejam 0:05:20.502,0:05:22.612 redimensionados adequadamente. 0:05:23.206,0:05:24.906 Isso acontece porque ainda temos 0:05:24.906,0:05:26.626 alguns números "hard-coded" 0:05:26.626,0:05:28.396 nos nossos comandos da elipse. 0:05:28.396,0:05:30.376 Alguns números que na verdade deveriam 0:05:30.376,0:05:32.656 ser frações ou variáveis. 0:05:33.148,0:05:34.578 Aqui, vou mostrá-los... 0:05:34.669,0:05:37.799 Então, para as elipses dos olhos, 0:05:37.799,0:05:40.819 X menos cinquenta para a posição X, 0:05:40.838,0:05:43.278 significa que isso será sempre X menos 50 0:05:43.443,0:05:45.133 mesmo que façamos faceSize 0:05:45.133,0:05:46.843 menor do que 50 pixels, 0:05:46.843,0:05:48.063 e isso não faz sentido 0:05:48.063,0:05:49.783 pois quer dizer que o olho esquerdo 0:05:49.783,0:05:50.611 não estará 0:05:50.611,0:05:52.161 mais no rosto. 0:05:52.441,0:05:55.218 Então isso deve ser X menos uma fração 0:05:55.218,0:05:57.258 o tamanho da nossa face, 0:05:57.278,0:05:59.218 e nós podemos descobrir a fração 0:05:59.218,0:06:00.148 da mesma maneira. 0:06:00.148,0:06:03.898 50 relativo ao 300 original, 0:06:03.898,0:06:07.898 então 50 sobre 300, 5 sobre 30, 1 sobre 6, 0:06:08.582,0:06:11.952 então, 1/6 vezes faceSize 0:06:12.440,0:06:14.110 e podemos ver outros 50 aqui 0:06:14.400,0:06:16.060 podemos fazer a mesma coisa, 0:06:16.060,0:06:17.360 a mesma expressão, 0:06:17.360,0:06:19.140 aqui temos 100 sobre 300, 0:06:19.460,0:06:20.690 isso será 0:06:20.710,0:06:23.220 um terço vezes faceSize, 0:06:23.220,0:06:24.720 isso é sessenta, 0:06:24.720,0:06:26.080 esse aqui é 0:06:26.080,0:06:28.897 um quinto vezes faceSize, 0:06:29.267,0:06:32.087 e aqui tem outro cinquenta, 0:06:32.087,0:06:34.457 então um sexto novamente, 0:06:34.457,0:06:35.727 e quarenta, 0:06:35.727,0:06:38.257 é o que descobrimos acima 0:06:38.257,0:06:39.507 dois sobre quinze, 0:06:39.507,0:06:44.937 então dois quinze avos vezes faceSize. 0:06:45.347,0:06:48.117 Bem, então vamos tentar novamente... 0:06:48.117,0:06:49.477 Oh, vejam só! 0:06:49.477,0:06:51.257 Olhem isso, está lindo! 0:06:51.268,0:06:52.048 Muito bem 0:06:52.617,0:06:54.587 Certo, então vamos recapitular: 0:06:54.587,0:06:56.117 nós criamos esta variável 0:06:56.130,0:06:57.950 que armazenou o tamanho da face, 0:06:57.950,0:06:59.630 e isso armazena um número; 0:06:59.630,0:07:01.510 Então temos essas variáveis, mouthSize 0:07:01.510,0:07:03.350 e eyeSize 0:07:03.350,0:07:05.710 e nós os calculamos baseados em frações 0:07:05.710,0:07:06.790 de faceSize 0:07:06.790,0:07:07.770 para termos certeza 0:07:07.770,0:07:09.500 que seus valores sempre mudam 0:07:09.500,0:07:12.360 baseados neste valor inicial 0:07:12.514,0:07:15.104 então todos os deslocamentos são 0:07:15.104,0:07:16.894 calculados com base em faceSize 0:07:16.894,0:07:18.454 para ter certeza que a posição 0:07:18.454,0:07:19.884 dentro dos rostos mudam 0:07:19.884,0:07:22.064 quando faceSize muda. 0:07:22.064,0:07:23.014 Wooo! Muito bom. 0:07:23.014,0:07:24.614 Então agora que entendemos 0:07:24.614,0:07:25.725 como criar variáveis 0:07:25.725,0:07:27.865 dependentes do valor de outras variáveis, 0:07:27.865,0:07:30.375 podemos fazer muito com nossos programas. 0:07:30.375,0:07:32.365 Vamos celebrar fazendo o Winston 0:07:32.365,0:07:36.781 grande! Yeah, vai Winston!