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!