Estamos de volta ao nosso Winston 
e eu adicionei um texto a ele.

O quero fazer é a posicionar o texto 
embaixo de cada um desses rótulos

para mostrar cada ponto da linha.

Mas agora ele está em todo lugar.

É porque estamos definindo o faceX e faceY
em números aleatórios na função.

Em vez disso, o que quero é dizer pra ele:

Ei, aqui está a posição exata
que eu quero

que você desenhe o rosto.

Eu quero poder especificar a
posição cada vez que eu

chamar a função, da mesma forma
que fazemos com a ellipse() e o rect().

Porque eu quero ser capaz de
colocar um Winston aqui,

e um Winston aqui, e outro aqui,
e um outro aqui,

e eu não quero lugares aleatórios 
cada vez que eu chamar a função.

Para isso, temos de especificar 
"parâmetros" para a função,

tanto em nossa definição de função...
(aqui no topo)

e em nossa chamada de função, aqui em 
baixo, quando realmente a chamarmos.

Assim, de drawWinston(), queremos passar
para faceX e faceY, e usar esses valores

que passamos em vez de gerá-los
aleatoriamente.

Vamos pensar sobre o que passaremos
para estas chamadas de função aqui

Queremos a posição dos Winstons sob 
cada pedaço de texto,

por isso, provavelmente 
queremos o X e o Y

de cada Winston por ser semelhante 
aos números

que passaremos para 
as funções "text()".

Talvez, apenas 10 pixels menor no y. 
Assim, talvez o primeiro seria de 10 e 30,

e, em seguida, talvez 200, 230...

10, 230...200, 230. É o mesmo que as 
coordenas do texto, só estou acrescentando

10 a cada y, porque eu quero
apenas um pouco menor.

Ok, mas o Winston não se moveu. 
Isso é porque não dissemos a nossa função

que estamos passando os parâmetros,
por isso ainda está usando

esses valores aleatórios.

Portanto, a fim de contar essa função,
"Ei, vamos dar esta

informação em vez disso",

nós temos que dar os nomes dos 
parâmetros dentro desses parênteses.

Então, vamos chamá-lo de faceX e facey, 
e separá-los por uma vírgula,

e vamos chamá-lo assim, porque

isso é o que estamos usando para se
referir a eles na função, ok?

Então, dessa forma não temos que
reescrever o resto do nosso código.

Mas mesmo assim, nada aconteceu; 
o Winston ainda está em todo o lugar.

Bem, se você olhar para o topo da nossa
função, estamos substituindo o

"faceX" e "faceY" com valores 
aleatórios, ainda.

Então, tudo o que temos a fazer 
é excluir essas linhas...

E agora, o "faceX" e "faceY" estão sendo 
passados para a função,

e ele está usando os valores 
que estamos chamando aqui.

Agora, como você pode ver, eu não fiz 
corretamente a posição do Winston,

porque esqueci que o texto fica posicionado 
de acordo com a parte superior esquerda,

e o rosto de acordo com o centro.

Então, eu só preciso ir e mexer com
os meus números um pouco aqui, certo?

Provavelmente precise mover 
os x sobre um monte deles,

e mover sobre este, certo?...
então essa é a nossa criança...

E agora tudo o que tenho que fazer 
é mudar o que eu estou

passando para a função, e eu não tenho que
mudar a definição de todas as funções,

porque sempre vai levar os valores que
nós passamos.

Assim como com o "ellipse ()" 
e o "rect ()".

Ok, então eu meio que posicionou ele, mas
notei que o Winston é bem grande.

Ele está sobreposto, 
por isso ele não se encaixa.

Bem, já que eu coloquei todo o código para
desenhá-lo em uma função, eu posso mudar

o tamanho de todos de uma vez só por mudar
a linha de código que desenha a elipse.

Então, digamos que se fizermos ele com 
190..sim, o Winston fará uma dieta de 190.

Muito bem, então agora ele vai se encaixar
muito melhor e, em seguida

você sabe que eu poderia ajustar para 
levá-lo lá pra dentro, certo?

Legal. Então vamos fazer uma revisão final
do que esse código faz.

Ele define uma função
chamada drawWinston (),

e diz que esta função recebe dois valores,
e os rotula como "faceX" e "faceY",

e esses valores vêm basicamente como
variáveis que podemos usar em qualquer

lugar dentro da função, assim como 
usamos as variáveis

que nós declarados no topo.

E então podemos chamar esta função sempre
que quisermos depois de declará-la,

e podemos passar em valores diferentes,
de modo que ele vai usar

esses novos valores de cada vez.

Agora você já viu a parte
legal sobre funções.

Podemos chegar a um código que 
pensamos que seria útil para recusar,

mas também podemos utilizar 
parâmetros para dizer:

"Ei, aqui tem algo que você pode mudar 
para personalizar esse código."

É como uma receita. Você escreve as 
instruções gerais,

e se perceber que precisa alimentar 
quatro Winstons em vez de um,

não tem que começar tudo de novo.
Basta alterar as instruções originais

e multiplicar tudo por quatro.

Agora você pode pensar sobre as 
receitas em seu código!

Delícia.

Legendado por [Fernando dos Reis]
Revisado por [Cainã Perri]