-
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]