WEBVTT

00:00:00.877 --> 00:00:06.001
Estamos de volta ao nosso Winston 
e eu adicionei um texto a ele.

00:00:06.001 --> 00:00:11.072
O quero fazer é a posicionar o texto 
embaixo de cada um desses rótulos

00:00:11.072 --> 00:00:13.210
para mostrar cada ponto da linha.

00:00:13.210 --> 00:00:15.197
Mas agora ele está em todo lugar.

00:00:15.197 --> 00:00:19.036
É porque estamos definindo o faceX e faceY
em números aleatórios na função.

00:00:20.655 --> 00:00:22.837
Em vez disso, o que quero é dizer pra ele:

00:00:22.857 --> 00:00:25.291
Ei, aqui está a posição exata
que eu quero

00:00:25.291 --> 00:00:27.855
que você desenhe o rosto.

00:00:27.861 --> 00:00:30.300
Eu quero poder especificar a
posição cada vez que eu

00:00:30.320 --> 00:00:33.999
chamar a função, da mesma forma
que fazemos com a ellipse() e o rect().

00:00:34.049 --> 00:00:36.850
Porque eu quero ser capaz de
colocar um Winston aqui,

00:00:36.850 --> 00:00:40.553
e um Winston aqui, e outro aqui,
e um outro aqui,

00:00:40.563 --> 00:00:43.856
e eu não quero lugares aleatórios 
cada vez que eu chamar a função.

00:00:44.836 --> 00:00:49.292
Para isso, temos de especificar 
"parâmetros" para a função,

00:00:49.932 --> 00:00:53.784
tanto em nossa definição de função...
(aqui no topo)

00:00:53.794 --> 00:00:58.237
e em nossa chamada de função, aqui em 
baixo, quando realmente a chamarmos.

00:00:58.237 --> 00:01:05.022
Assim, de drawWinston(), queremos passar
para faceX e faceY, e usar esses valores

00:01:05.022 --> 00:01:09.647
que passamos em vez de gerá-los
aleatoriamente.

00:01:10.837 --> 00:01:14.401
Vamos pensar sobre o que passaremos
para estas chamadas de função aqui

00:01:15.001 --> 00:01:18.508
Queremos a posição dos Winstons sob 
cada pedaço de texto,

00:01:18.698 --> 00:01:20.816
por isso, provavelmente 
queremos o X e o Y

00:01:20.816 --> 00:01:23.667
de cada Winston por ser semelhante 
aos números

00:01:23.767 --> 00:01:25.873
que passaremos para 
as funções "text()".

00:01:25.873 --> 00:01:33.278
Talvez, apenas 10 pixels menor no y. 
Assim, talvez o primeiro seria de 10 e 30,

00:01:33.278 --> 00:01:37.388
e, em seguida, talvez 200, 230...

00:01:37.698 --> 00:01:43.972
10, 230...200, 230. É o mesmo que as 
coordenas do texto, só estou acrescentando

00:01:43.972 --> 00:01:48.763
10 a cada y, porque eu quero
apenas um pouco menor.

00:01:49.493 --> 00:01:54.273
Ok, mas o Winston não se moveu. 
Isso é porque não dissemos a nossa função

00:01:54.273 --> 00:01:58.723
que estamos passando os parâmetros,
por isso ainda está usando

00:01:58.723 --> 00:02:00.123
esses valores aleatórios.

00:02:00.123 --> 00:02:02.917
Portanto, a fim de contar essa função,
"Ei, vamos dar esta

00:02:02.917 --> 00:02:04.307
informação em vez disso",

00:02:04.307 --> 00:02:09.182
nós temos que dar os nomes dos 
parâmetros dentro desses parênteses.

00:02:09.182 --> 00:02:15.757
Então, vamos chamá-lo de faceX e facey, 
e separá-los por uma vírgula,

00:02:15.757 --> 00:02:17.822
e vamos chamá-lo assim, porque

00:02:18.054 --> 00:02:21.153
isso é o que estamos usando para se
referir a eles na função, ok?

00:02:21.153 --> 00:02:25.273
Então, dessa forma não temos que
reescrever o resto do nosso código.

00:02:25.273 --> 00:02:29.274
Mas mesmo assim, nada aconteceu; 
o Winston ainda está em todo o lugar.

00:02:29.274 --> 00:02:32.734
Bem, se você olhar para o topo da nossa
função, estamos substituindo o

00:02:32.734 --> 00:02:35.932
"faceX" e "faceY" com valores 
aleatórios, ainda.

00:02:35.942 --> 00:02:40.052
Então, tudo o que temos a fazer 
é excluir essas linhas...

00:02:42.071 --> 00:02:46.572
E agora, o "faceX" e "faceY" estão sendo 
passados para a função,

00:02:46.582 --> 00:02:49.836
e ele está usando os valores 
que estamos chamando aqui.

00:02:49.836 --> 00:02:54.166
Agora, como você pode ver, eu não fiz 
corretamente a posição do Winston,

00:02:54.166 --> 00:03:00.146
porque esqueci que o texto fica posicionado 
de acordo com a parte superior esquerda,

00:03:00.146 --> 00:03:02.002
e o rosto de acordo com o centro.

00:03:02.002 --> 00:03:07.044
Então, eu só preciso ir e mexer com
os meus números um pouco aqui, certo?

00:03:07.044 --> 00:03:09.776
Provavelmente precise mover 
os x sobre um monte deles,

00:03:09.776 --> 00:03:14.987
e mover sobre este, certo?...
então essa é a nossa criança...

00:03:14.987 --> 00:03:18.091
E agora tudo o que tenho que fazer 
é mudar o que eu estou

00:03:18.091 --> 00:03:22.124
passando para a função, e eu não tenho que
mudar a definição de todas as funções,

00:03:22.138 --> 00:03:26.129
porque sempre vai levar os valores que
nós passamos.

00:03:26.129 --> 00:03:28.889
Assim como com o "ellipse ()" 
e o "rect ()".

00:03:28.889 --> 00:03:33.428
Ok, então eu meio que posicionou ele, mas
notei que o Winston é bem grande.

00:03:33.428 --> 00:03:36.127
Ele está sobreposto, 
por isso ele não se encaixa.

00:03:36.127 --> 00:03:40.222
Bem, já que eu coloquei todo o código para
desenhá-lo em uma função, eu posso mudar

00:03:40.222 --> 00:03:45.172
o tamanho de todos de uma vez só por mudar
a linha de código que desenha a elipse.

00:03:45.260 --> 00:03:50.480
Então, digamos que se fizermos ele com 
190..sim, o Winston fará uma dieta de 190.

00:03:50.956 --> 00:03:55.514
Muito bem, então agora ele vai se encaixar
muito melhor e, em seguida

00:03:55.514 --> 00:03:59.058
você sabe que eu poderia ajustar para 
levá-lo lá pra dentro, certo?

00:04:01.658 --> 00:04:06.118
Legal. Então vamos fazer uma revisão final
do que esse código faz.

00:04:06.513 --> 00:04:09.288
Ele define uma função
chamada drawWinston (),

00:04:09.288 --> 00:04:14.754
e diz que esta função recebe dois valores,
e os rotula como "faceX" e "faceY",

00:04:14.754 --> 00:04:19.204
e esses valores vêm basicamente como
variáveis que podemos usar em qualquer

00:04:19.204 --> 00:04:22.192
lugar dentro da função, assim como 
usamos as variáveis

00:04:22.192 --> 00:04:23.932
que nós declarados no topo.

00:04:24.533 --> 00:04:29.494
E então podemos chamar esta função sempre
que quisermos depois de declará-la,

00:04:29.494 --> 00:04:32.488
e podemos passar em valores diferentes,
de modo que ele vai usar

00:04:32.498 --> 00:04:34.078
esses novos valores de cada vez.

00:04:34.775 --> 00:04:37.391
Agora você já viu a parte
legal sobre funções.

00:04:37.391 --> 00:04:40.828
Podemos chegar a um código que 
pensamos que seria útil para recusar,

00:04:40.828 --> 00:04:43.480
mas também podemos utilizar 
parâmetros para dizer:

00:04:43.480 --> 00:04:47.089
"Ei, aqui tem algo que você pode mudar 
para personalizar esse código."

00:04:47.089 --> 00:04:49.773
É como uma receita. Você escreve as 
instruções gerais,

00:04:49.773 --> 00:04:53.509
e se perceber que precisa alimentar 
quatro Winstons em vez de um,

00:04:53.509 --> 00:04:56.783
não tem que começar tudo de novo.
Basta alterar as instruções originais

00:04:56.783 --> 00:04:58.259
e multiplicar tudo por quatro.

00:04:58.259 --> 00:05:01.217
Agora você pode pensar sobre as 
receitas em seu código!

00:05:01.217 --> 00:05:02.361
Delícia.

00:05:02.361 --> 00:05:04.460
Legendado por [Fernando dos Reis]
Revisado por [Cainã Perri]