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]