Resizing shapes with variable expressions

Estamos de volta com Winston.

Agora temos ambas as variáveis X e Y para

a posição do Winston.

Então podemos movê-lo para os lados,

para cima e para baixo, wooo!

Muito bom.

Bom, vamos redefinir essas variáveis

para 200 e 200

e recapitular como este programa funciona.

Então, aqui temos a variável “eyeSize”,

é usada pra controlar o tamanho dos olhos,

pois ambos têm 40 pixels de largura

e 40 pixels de altura.

Também temos estas variáveis X e Y

e elas definem o centro da face.

Podem vê-las usadas

no comando desta elipse aqui

que desenha o grande círculo amarelo.

E aqui embaixo,

para os olhos,

X e Y são usados novamente.

E aqui,

os olhos são posicionados

de acordo com o centro do rosto.

Então, este aqui tem

cinquenta pixels

à esquerda do centro,

e este outro tem cem pixels

à direita do centro

Okay, muito bem

é a razão pela qual podemos

mover Winston para cima e para baixo.

Agora, eu quero poder controlar

mais coisas no rosto do Winston

usando variáveis.

Então eu quero descobrir

o que mais no programa podemos

controlar usando variáveis.

Para isso,

eu irei em

cada linha de código

e procurar pelo que chamamos de

números "hard-coded"

Esses números são simplesmente

números literais, e não

variáveis ou dependentes de variáveis

Vamos começar aqui

na primeira elipse,

nós temos 300 e 300

para a largura e altura.

Estes são apenas números literais

então vamos criar

uma variável para eles,

chamada "faceSize"

e dar a ela um valor de 300

Agora vamos escrever "faceSize"...

faceSize...

Okay, continuando

e pulando as cores

agora os comandos da elipse são ambos...

Eles são variáveis ou

dependentes de variáveis

Então, irei deixá-los

assim por enquanto.

Temos também o comando da boca,

eles são dependentes de X e Y,

mas estes aqui

são apenas números literais

150 e 150

Então iremos chamá-lo

"mouthSize", esse é um bom nome,

que recebe 150.

Vamos substituir estes por "mouthSize"

e "mouthSize".

ótimo, agora

temos os tamanhos das formas

definidos por variáveis, no topo

que significa que é realmente fácil

para nós mudarmos os tamanhos,

dessa forma, tipo

Wooo! Winston está com fome

e... Você sabe,

quando Winston fica com fome

ele come muitos donuts

e acaba enorme.

Certo,

mas tem algo

que eu não gosto no programa agora.

Se eu diminuo o tamanho do rosto

ele começa a ficar engraçado

por que os olhos e a boca

saem do rosto

e num determinado ponto nem

parece mesmo que estão

conectados à ele

ou nem é um mais rosto, é?

Então o que eu quero que aconteça

é que quando eu mude o valor de “faceSize”

eu quero que os olhos e a boca...

Quero que seus tamanhos mudem igualmente,

então se eu diminuir faceSize pela metade,

eu quero que a boca diminua igualmente.

Isso significa que

eu quero calcular mouthSize e eyeSize

como frações de faceSize.

Vamos redefinir essas variáveis

e eu mostro o que quero dizer.

Vamos começar com mouthSize

Agora,

faceSize recebe 300 e mouthSize recebe 150

Então se pensamos neles

como valores relacionados,

podemos dizer que faceSize é o dobro

do tamanho de mouthSize,

ou que mouthSize é a metade

de faceSize,

e podemos escrever isso em código, assim

Um meio vezes faceSize.

Okay, essa linha de código diz

que pegamos o valor de faceSize,

multiplicamos por um meio

e armazenamos o resultado em mouthSize.

Então se mudarmos isso aqui,

isso calcularia quanto metade daquilo vale

e isso seria o valor de mouthSize.

Perfeito! É o que nós queremos

Então agora eyeSize,

faceSize é 300

e eyeSize é 40,

então queremos que isso seja

quarenta trezentos avos de faceSize

o que é, vamos ver...

Quatro sobre trinta, que podemos

simplificar para dois quinze avos,

então vamos dizer

dois quinze avos vezes faceSize

A propósito,

se você é novo em frações

e matemática é complicado pra você,

você pode aprender mais sobre frações

na Khan Academy

e retornar aqui quando você

estiver pronto.

Aqui, vejam

Okay,

vamos tentar dimensionar a face novamente

Haha! Dêem uma olhada

A boca e os olhos redimensionam

proporcionalmente ao rosto.

Mas você provavelmente notou

algo errado,

os olhos e a boca

ainda estão pulando para fora do rosto,

mesmo que ambos estejam

redimensionados adequadamente.

Isso acontece porque ainda temos

alguns números "hard-coded"

nos nossos comandos da elipse.

Alguns números que na verdade deveriam

ser frações ou variáveis.

Aqui, vou mostrá-los...

Então, para as elipses dos olhos,

X menos cinquenta para a posição X,

significa que isso será sempre X menos 50

mesmo que façamos faceSize

menor do que 50 pixels,

e isso não faz sentido

pois quer dizer que o olho esquerdo

não estará

mais no rosto.

Então isso deve ser X menos uma fração

o tamanho da nossa face,

e nós podemos descobrir a fração

da mesma maneira.

50 relativo ao 300 original,

então 50 sobre 300, 5 sobre 30, 1 sobre 6,

então, 1/6 vezes faceSize

e podemos ver outros 50 aqui

podemos fazer a mesma coisa,

a mesma expressão,

aqui temos 100 sobre 300,

isso será

um terço vezes faceSize,

isso é sessenta,

esse aqui é

um quinto vezes faceSize,

e aqui tem outro cinquenta,

então um sexto novamente,

e quarenta,

é o que descobrimos acima

dois sobre quinze,

então dois quinze avos vezes faceSize.

Bem, então vamos tentar novamente...

Oh, vejam só!

Olhem isso, está lindo!

Muito bem

Certo, então vamos recapitular:

nós criamos esta variável

que armazenou o tamanho da face,

e isso armazena um número;

Então temos essas variáveis, mouthSize

e eyeSize

e nós os calculamos baseados em frações

de faceSize

para termos certeza

que seus valores sempre mudam

baseados neste valor inicial

então todos os deslocamentos são

calculados com base em faceSize

para ter certeza que a posição

dentro dos rostos mudam

quando faceSize muda.

Wooo! Muito bom.

Então agora que entendemos

como criar variáveis

dependentes do valor de outras variáveis,

podemos fazer muito com nossos programas.

Vamos celebrar fazendo o Winston

grande! Yeah, vai Winston!