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]