Variable Expressions (Video Version)

Estamos de volta com Winston, e agora temos variáveis X e Y para a posição de Winston

Então agora podemos fazer com que Winston salte pra cima e pra baixo, e temos uma festa do Winston! Wooo!

Bem legal. Vamos revisar o que esse código faz antes de seguirmos em frente

Nós temos essa variáveis X e Y no top que guardam o centro da posição da cara Winston

A qual usamos nessa linha aqui, quando desenhamos a elipse para seu rosto

Então, nós posicionamos os olhos e a boca relativo ao centro do rosto.

Nós adicionamos ou subtraímos de X e Y para ter certeza que os olhos estão a 50 e 100 pixels de distância

Por exemplo, a boca está 50 pixels a direita do centro do rosto

E 40 pixels abaixo do centro do rosto

Vamos continuar e ver o que mais podemos guardar como variáveis

Para fazer isso, eu vou passar por cada linha de código e procurar por o que chamamos de números codificados

Esses são apenas números, não variáveis ou dependentes de uma

Vamos ver. Em nossa primeira elipse, nós temos 300 e 300 para a largura e altura

Então podemos criar uma variável para isso, como faceSize

Então faceSize é igual a 300, e então nós podemos passar faceSize aqui e agora, ela passará 30 como valor

Legal. Agora vamos continuar.

Tudo aqui está usando X ou Y ou eyeSize, mas aqui para boca nós temos de novo 150 e 150 para a largura e altura

Então podemos criar uma variável para o tamanho da boca, tipo mouthSize igual a 150

E nós passamos mouthSize aqui. E ela simplesmente passará 150 agora, porque é o que a variável é igual a.

Ok, então agora que terminamos isso, podemos facilmente mudar o tamanho do rosto aqui

E podemos facilmente mudar o tamanho da boca, e nós podemos move-la dessa forma

E nós podemos mudar o tamanho dos olhos de novo

Ok, isso é legal. Mas tem algo que eu realmente não gosto sobre isso

Que é quando nós mudamos o tamanho do rosto, eu realmente quero todo o resto mude relativamente ao tamanho do rosto

Então se eu fizer um rosto muito pequeno como esse, eu quero que os olhos e a boca fiquem pequenos também

Se eu fizer um rosto metade do tamanho do original, os olhos e boca também deveriam ser

da metade do tamanho. Do contrário ele parece bobo

Porque os olhos e a boca são muito grandes para o rosto

Eles nem estão mais conectados

Então o que queremos fazer é de alguma forma essas variáveis, mouthSize e eyeSize

sejam dependentes dessa variável, faceSize.

Então vamos trazê-las de volta como era.

Então o jeito que podemos fazer isso é podermos fazer esses valores serem baseados no tamanho do rosto(precisa revisão)

Então podemos dizer que mouthSize equivale faceSize sobre dois.

Então estamos usando uma fração do rosto, dizemos que temos metade do tamanho do rosto

E se você não é familiarizado com frações, tem toneladas de vídeos na khan academy

que você pode usar para revisar como frações funcionam

Certo, agora o tamanho do olho é em torno do tamanho do rosto dividido por 4

não está perfeito, mas está bonito. Oh, sete.

Aqui vamos nós, está bem melhor.

Viu, se você achar a fração errada primeiro, você pode sempre consertá-lo depois.

Só mexer com aquele número até que alguma coisa faça sentido.

Ok, então agora se nós refizermos o rosto de novo, veja como os olhos e boca estão mudando junto com ele?

isso é muito legal.

Mas ainda tem algo errado.

os olhos e boca ainda estão indo pra fora do rosto quando deixamos muito pequenos.

os tamanhos estão corretos, o problema é o deslocamento do rosto.

o que está acontecendo é aqui embaixo quando posicionamos as elipses

nós temos X menos 50 e y menos 50, e depois x mais 100 e y menos 60

Então mesmo se o tamanho do nosso rosto seja apenas 50 pixels, nós ainda teremos a posição dos olhos em menos 50 pixels do centro.

Que o fará ficar fora do rosto

Então precisamos para 50 a 100 e todos estes numeros aqui

Todos esses poderiam também ser frações do tamanho do rosto, para quando o tamanho do rosto mudar muito

que os olhos estão fora e a boca está fora, aqueles numeros possam mudar também.

Para mostrar o que quero dizer, vamos fazer o primeiro olho.

X menos 50. Então X menos 50 pixels.

Isso significa que deve deve ser 50 pixels para esquerda do centro do rosto.

Bem, o que nós queremos fazer agora é usar as frações.

então será tamanho do rosto dividido por 6

então um sexto do tamanho do rosto

Legal. e depois 50 será também tamanho do rosto sobre 6

Então agora se refizermos, veja que o olho está perfeitamente posicionado.

Bom olho, Winston! Bom olho.

O outro olho precisa de alguma ajuda ainda

Então 100, que será o tamanho do rosto sobre 3, então um terço do tamanho do rosto.

e 60 é um quinto do tamanho do rosto, então tamanho do rosto sobre 5.

Ótimo, vamos refazê-lo, muito legal.

Nós ainda temos um problema com nossa boca.

então vamos descer para a boca.

esse talvez seja faceSize sobre 6 de novo.

e esse é faceSize sobre 7.

Beleza, agora tudo está proporcional. vamos checar.

Woo. Agora podemos fazer Winston muito pequeno

e seus olhos e boca ainda estão dentro do rosto!

Tenho certeza que Winston está muito feliz com isso.

Beleza! yay.

Então vamos rever o que fizemos até agora.

No topo, temos as variáveis.

Nós começamos com uma variável que está alojando um número, 200.

depois fizemos nossas variáveis mouthSize e eyeSize serem dependentes desse número

como frações desse número, então se faceSize está em 200

então mouthSize está em 100

Mas se mudamos faceSize para 300, então mouthSize poderia de repente ser 150

Então isso sempre mudará proporcionalmente

então, aqui embaixo, quando calculamos nossos deslocamentos, nós estamos usando frações também

porque queremos que os deslocamentos sejam proporcionais ao tamanho do rosto

Nós basicamente queremos fazer isso então nós temos apenas essa variável que afeta tudo.

nós podemos fazer aquilo com variáveis e expressões de variáveis.

então, agora que nós entendemos como fazer variáveis dependentes de outras variáveis

podemos fazer mais coisas com nossos programas.

Vamos comemorar fazendo Winston grandeeeee!

Vai Winston, vamos, continue! Continue!

Nuuuunca pare! Continue! Gnaaaaaa!