1
00:00:00,877 --> 00:00:06,001
Estamos de volta ao nosso Winston 
e eu adicionei um texto a ele.

2
00:00:06,001 --> 00:00:11,072
O quero fazer é a posicionar o texto 
embaixo de cada um desses rótulos

3
00:00:11,072 --> 00:00:13,210
para mostrar cada ponto da linha.

4
00:00:13,210 --> 00:00:15,197
Mas agora ele está em todo lugar.

5
00:00:15,197 --> 00:00:19,036
É porque estamos definindo o faceX e faceY
em números aleatórios na função.

6
00:00:20,655 --> 00:00:22,837
Em vez disso, o que quero é dizer pra ele:

7
00:00:22,857 --> 00:00:25,291
Ei, aqui está a posição exata
que eu quero

8
00:00:25,291 --> 00:00:27,855
que você desenhe o rosto.

9
00:00:27,861 --> 00:00:30,300
Eu quero poder especificar a
posição cada vez que eu

10
00:00:30,320 --> 00:00:33,999
chamar a função, da mesma forma
que fazemos com a ellipse() e o rect().

11
00:00:34,049 --> 00:00:36,850
Porque eu quero ser capaz de
colocar um Winston aqui,

12
00:00:36,850 --> 00:00:40,553
e um Winston aqui, e outro aqui,
e um outro aqui,

13
00:00:40,563 --> 00:00:43,856
e eu não quero lugares aleatórios 
cada vez que eu chamar a função.

14
00:00:44,836 --> 00:00:49,292
Para isso, temos de especificar 
"parâmetros" para a função,

15
00:00:49,932 --> 00:00:53,784
tanto em nossa definição de função...
(aqui no topo)

16
00:00:53,794 --> 00:00:58,237
e em nossa chamada de função, aqui em 
baixo, quando realmente a chamarmos.

17
00:00:58,237 --> 00:01:05,022
Assim, de drawWinston(), queremos passar
para faceX e faceY, e usar esses valores

18
00:01:05,022 --> 00:01:09,647
que passamos em vez de gerá-los
aleatoriamente.

19
00:01:10,837 --> 00:01:14,401
Vamos pensar sobre o que passaremos
para estas chamadas de função aqui

20
00:01:15,001 --> 00:01:18,508
Queremos a posição dos Winstons sob 
cada pedaço de texto,

21
00:01:18,698 --> 00:01:20,816
por isso, provavelmente 
queremos o X e o Y

22
00:01:20,816 --> 00:01:23,667
de cada Winston por ser semelhante 
aos números

23
00:01:23,767 --> 00:01:25,873
que passaremos para 
as funções "text()".

24
00:01:25,873 --> 00:01:33,278
Talvez, apenas 10 pixels menor no y. 
Assim, talvez o primeiro seria de 10 e 30,

25
00:01:33,278 --> 00:01:37,388
e, em seguida, talvez 200, 230...

26
00:01:37,698 --> 00:01:43,972
10, 230...200, 230. É o mesmo que as 
coordenas do texto, só estou acrescentando

27
00:01:43,972 --> 00:01:48,763
10 a cada y, porque eu quero
apenas um pouco menor.

28
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

29
00:01:54,273 --> 00:01:58,723
que estamos passando os parâmetros,
por isso ainda está usando

30
00:01:58,723 --> 00:02:00,123
esses valores aleatórios.

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

32
00:02:02,917 --> 00:02:04,307
informação em vez disso",

33
00:02:04,307 --> 00:02:09,182
nós temos que dar os nomes dos 
parâmetros dentro desses parênteses.

34
00:02:09,182 --> 00:02:15,757
Então, vamos chamá-lo de faceX e facey, 
e separá-los por uma vírgula,

35
00:02:15,757 --> 00:02:17,822
e vamos chamá-lo assim, porque

36
00:02:18,054 --> 00:02:21,153
isso é o que estamos usando para se
referir a eles na função, ok?

37
00:02:21,153 --> 00:02:25,273
Então, dessa forma não temos que
reescrever o resto do nosso código.

38
00:02:25,273 --> 00:02:29,274
Mas mesmo assim, nada aconteceu; 
o Winston ainda está em todo o lugar.

39
00:02:29,274 --> 00:02:32,734
Bem, se você olhar para o topo da nossa
função, estamos substituindo o

40
00:02:32,734 --> 00:02:35,932
"faceX" e "faceY" com valores 
aleatórios, ainda.

41
00:02:35,942 --> 00:02:40,052
Então, tudo o que temos a fazer 
é excluir essas linhas...

42
00:02:42,071 --> 00:02:46,572
E agora, o "faceX" e "faceY" estão sendo 
passados para a função,

43
00:02:46,582 --> 00:02:49,836
e ele está usando os valores 
que estamos chamando aqui.

44
00:02:49,836 --> 00:02:54,166
Agora, como você pode ver, eu não fiz 
corretamente a posição do Winston,

45
00:02:54,166 --> 00:03:00,146
porque esqueci que o texto fica posicionado 
de acordo com a parte superior esquerda,

46
00:03:00,146 --> 00:03:02,002
e o rosto de acordo com o centro.

47
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?

48
00:03:07,044 --> 00:03:09,776
Provavelmente precise mover 
os x sobre um monte deles,

49
00:03:09,776 --> 00:03:14,987
e mover sobre este, certo?...
então essa é a nossa criança...

50
00:03:14,987 --> 00:03:18,091
E agora tudo o que tenho que fazer 
é mudar o que eu estou

51
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,

52
00:03:22,138 --> 00:03:26,129
porque sempre vai levar os valores que
nós passamos.

53
00:03:26,129 --> 00:03:28,889
Assim como com o "ellipse ()" 
e o "rect ()".

54
00:03:28,889 --> 00:03:33,428
Ok, então eu meio que posicionou ele, mas
notei que o Winston é bem grande.

55
00:03:33,428 --> 00:03:36,127
Ele está sobreposto, 
por isso ele não se encaixa.

56
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

57
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.

58
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.

59
00:03:50,956 --> 00:03:55,514
Muito bem, então agora ele vai se encaixar
muito melhor e, em seguida

60
00:03:55,514 --> 00:03:59,058
você sabe que eu poderia ajustar para 
levá-lo lá pra dentro, certo?

61
00:04:01,658 --> 00:04:06,118
Legal. Então vamos fazer uma revisão final
do que esse código faz.

62
00:04:06,513 --> 00:04:09,288
Ele define uma função
chamada drawWinston (),

63
00:04:09,288 --> 00:04:14,754
e diz que esta função recebe dois valores,
e os rotula como "faceX" e "faceY",

64
00:04:14,754 --> 00:04:19,204
e esses valores vêm basicamente como
variáveis que podemos usar em qualquer

65
00:04:19,204 --> 00:04:22,192
lugar dentro da função, assim como 
usamos as variáveis

66
00:04:22,192 --> 00:04:23,932
que nós declarados no topo.

67
00:04:24,533 --> 00:04:29,494
E então podemos chamar esta função sempre
que quisermos depois de declará-la,

68
00:04:29,494 --> 00:04:32,488
e podemos passar em valores diferentes,
de modo que ele vai usar

69
00:04:32,498 --> 00:04:34,078
esses novos valores de cada vez.

70
00:04:34,775 --> 00:04:37,391
Agora você já viu a parte
legal sobre funções.

71
00:04:37,391 --> 00:04:40,828
Podemos chegar a um código que 
pensamos que seria útil para recusar,

72
00:04:40,828 --> 00:04:43,480
mas também podemos utilizar 
parâmetros para dizer:

73
00:04:43,480 --> 00:04:47,089
"Ei, aqui tem algo que você pode mudar 
para personalizar esse código."

74
00:04:47,089 --> 00:04:49,773
É como uma receita. Você escreve as 
instruções gerais,

75
00:04:49,773 --> 00:04:53,509
e se perceber que precisa alimentar 
quatro Winstons em vez de um,

76
00:04:53,509 --> 00:04:56,783
não tem que começar tudo de novo.
Basta alterar as instruções originais

77
00:04:56,783 --> 00:04:58,259
e multiplicar tudo por quatro.

78
00:04:58,259 --> 00:05:01,217
Agora você pode pensar sobre as 
receitas em seu código!

79
00:05:01,217 --> 00:05:02,361
Delícia.

80
00:05:02,361 --> 00:05:04,460
Legendado por [Fernando dos Reis]
Revisado por [Cainã Perri]