1
00:00:00,387 --> 00:00:04,096
Continuemos explorando o que 
podemos fazer com objetos.

2
00:00:04,109 --> 00:00:08,305
Voltamos para o programa que
usamos no tutorial de funções.

3
00:00:08,305 --> 00:00:14,343
Este programa tem esta função <i>drawWinston</i>
que sabe desenhar Winston em certo X e Y.

4
00:00:14,521 --> 00:00:16,441
E, aqui, chamamos <i>drawWinston</i>


5
00:00:16,441 --> 00:00:18,361
4 vezes, cada uma com um conjunto

6
00:00:18,361 --> 00:00:21,521
diferente de coordenadas X e Y.

7
00:00:21,521 --> 00:00:23,776
Bem, você me conhece, quando vejo

8
00:00:23,776 --> 00:00:28,379
estas quatro chamadas para <i>drawWinton</i>
que se parecem tanto,

9
00:00:28,379 --> 00:00:31,779
tudo que penso é: como seria
melhor se pudéssemos

10
00:00:31,779 --> 00:00:36,329
usar um loop e chamá-la apenas 
uma vez dentro do loop,

11
00:00:36,329 --> 00:00:40,369
mudando X e Y em cada interação do loop.

12
00:00:40,369 --> 00:00:47,036
Para isso, precisamos guardar esses X e Y
em um vetor para poder iterá-lo.

13
00:00:47,036 --> 00:00:50,200
Bem, temos dois conjuntos de valores.

14
00:00:50,200 --> 00:00:56,524
Então, poderíamos ter 2 vetores. Um para
a posição X e outro para a posição Y.

15
00:00:56,524 --> 00:01:02,805
Nas posições X podemos ter 
99, 294, 101 e 294,

16
00:01:02,805 --> 00:01:09,946
e nas posições Y teremos
117, 117, 316, 316.

17
00:01:09,946 --> 00:01:17,979
Ok, e agora podemos iterá-los com nosso loop
for var i = 0; i < xPositions.length; i++

18
00:01:17,979 --> 00:01:22,174
Para cada elemento de
xPositions, dizemos

19
00:01:22,174 --> 00:01:30,019
drawWinston ( xPositions[ i ],
yPositions [ i ] );

20
00:01:30,019 --> 00:01:33,926
Ok, vejamos se funciona...
deletando...

21
00:01:33,926 --> 00:01:36,200
Certo, funcionou!

22
00:01:36,200 --> 00:01:40,459
Agora podemos apenas chamar 
essa única linha de código que

23
00:01:40,459 --> 00:01:45,518
executa drawWinston, mas o faz
para cada posição do vetor xPositions.

24
00:01:45,518 --> 00:01:48,396
Podemos vir aqui e adicionar 
mais a isso ... dizendo...

25
00:01:48,396 --> 00:01:57,874
tipo 10, então adicionamos 1, e então 1, 
e então 1, e então 100, e 1.

26
00:01:57,874 --> 00:02:03,472
Agora... agora está ficando um pouco
confuso e não estou gostando,

27
00:02:03,472 --> 00:02:09,914
porque está bem difícil ver que X
se relaciona com qual Y.

28
00:02:09,914 --> 00:02:15,559
Eu quero poder apenas bater o olho e
saber quais são os pares X e Y,

29
00:02:15,559 --> 00:02:22,454
ao invés de ter que garantir que os estou
alinhando corretamente, um sobre o outro

30
00:02:22,454 --> 00:02:26,729
Preciso encontrar uma forma diferente
de armazenar essas posições.

31
00:02:26,729 --> 00:02:30,791
Uma ideia é que poderíamos 
armazená-las como objetos.

32
00:02:30,791 --> 00:02:35,780
Pense nisso, cada posição é na verdade
duas informações: o X e o Y.

33
00:02:35,780 --> 00:02:39,106
Então, poderíamos ter um objeto com as
propriedades X e Y,

34
00:02:39,106 --> 00:02:44,002
e poderíamos ter um vetor -de objetos
com todas essas posições X-Y.

35
00:02:44,002 --> 00:02:45,968
Vamos fazer!

36
00:02:45,968 --> 00:02:51,395
Vamos dizer var positions
igual a um vetor.

37
00:02:51,395 --> 00:02:55,852
Mas, cada elemento, ao invés de ser
um número, será um objeto.

38
00:02:55,852 --> 00:03:04,691
Aqui abrimos chave e vamos apenas
dizer X:99, Y:117.

39
00:03:04,691 --> 00:03:13,392
Ok, temos agora nossas posições aqui, 
e vamos adicionar outra aqui.

40
00:03:13,392 --> 00:03:32,877
Certo, X deve ser 294, 117, e o terceiro
será 101, 316, e o último é 294 e 316.

41
00:03:32,877 --> 00:03:37,524
Ok! Agora, temos um vetor de objetos onde
cada objeto tem propriedades X e Y.

42
00:03:37,524 --> 00:03:44,228
Aqui em baixo, no loop for, mudamos apenas
isso aqui para iterar por positions.length

43
00:03:44,228 --> 00:03:48,993
Então passamos o objeto.

44
00:03:48,993 --> 00:03:53,238
Agora estamos passando o objeto inteiro,
mas queremos passar o X e o Y,

45
00:03:53,238 --> 00:03:59,548
então precisamos de 
positions [ i ].X e positions [ i ].Y

46
00:03:59,548 --> 00:04:00,808
Ta-da!

47
00:04:00,808 --> 00:04:04,999
Agora podemos nos livrar destes
vetores antigos confusos.

48
00:04:04,999 --> 00:04:10,034
Ótimo, parece-me bem melhor e
torna o código mais legível

49
00:04:10,034 --> 00:04:12,959
e sempre que pudermos ter código
mais legível, melhor.

50
00:04:12,959 --> 00:04:14,956
E também está mais fácil adicionar.

51
00:04:14,956 --> 00:04:19,204
Se quisermos adicionar um, só precisamos
adicionar o par junto,

52
00:04:19,204 --> 00:04:25,142
e aí podemos dizer X é 200, Y 200, nos dá um
pequeno Winston aqui no meio.

53
00:04:26,872 --> 00:04:27,961
Beleza.

54
00:04:27,961 --> 00:04:31,266
Agora quero mostrar algo
ainda mais sofisticado.

55
00:04:31,266 --> 00:04:38,635
Percebe que nossa função aceita dois
números e depois os usa.

56
00:04:38,635 --> 00:04:42,166
Bem, poderíamos mudar nossa função
para que espere um objeto

57
00:04:42,166 --> 00:04:45,697
e depois pegue o X e Y do objeto,

58
00:04:45,697 --> 00:04:49,230
o que significa que aqui embaixo só
teríamos que passar o objeto.

59
00:04:50,060 --> 00:04:50,846
Vamos tentar!

60
00:04:50,846 --> 00:04:53,596
Passamos o objeto, agora não funciona.

61
00:04:53,596 --> 00:04:58,208
Isso porque nossa função ainda espera dois
objetos e está recebendo apenas um,

62
00:04:59,278 --> 00:05:00,050
então vamos mudá-la

63
00:05:00,050 --> 00:05:02,370
para dizer que recebe facePosition,


64
00:05:04,220 --> 00:05:06,710
e agora deu erro porque faceX
não está definido,

65
00:05:06,710 --> 00:05:12,196
por que antes estávamos passando faceX
como argumento, mas agora ele não existe,

66
00:05:12,196 --> 00:05:12,862
temos apenas um objeto.

67
00:05:12,862 --> 00:05:21,159
O que podemos fazer, é salvar a posição X
de um objeto dentro da variável faceX.

68
00:05:21,159 --> 00:05:24,945
Estamos dizendo que temos este objeto,
sabemos que ele tem uma propriedade X,

69
00:05:24,945 --> 00:05:28,271
então vamos apenas guardá-la
na variável faceX.

70
00:05:28,871 --> 00:05:33,637
Podemos fazer o mesmo com Y, 
então faceY = facePosition.y;

71
00:05:33,637 --> 00:05:34,850
Ta-da!

72
00:05:34,850 --> 00:05:38,167
E então, o resto da função usa
faceX e faceY.

73
00:05:38,167 --> 00:05:40,146
Agora, temos que ter certeza
que soletramos corretamente,

74
00:05:40,146 --> 00:05:44,805
se escrevermos xx, não vai funcionar,
porque não é o que está aqui embaixo

75
00:05:44,805 --> 00:05:48,125
no nosso vetor de objetos. Precisa bater.

76
00:05:48,125 --> 00:05:52,136
Isso é bem legal, porque agora você pode
ter um vetor de objetos,

77
00:05:52,136 --> 00:05:54,117
pode ter funções que recebem objetos

78
00:05:54,117 --> 00:06:00,160
e você vai ver que seus programas ficarão 
poderosos com essa estrutura de dados.

79
00:06:00,160 --> 00:06:04,434
Especialmente porque é tão comum querer
junto um par X e Y.

80
00:06:04,434 --> 00:06:08,926
Será especialmente útil nos seus programas
de desenho e animação aqui.

81
00:06:08,926 --> 00:06:10,869
Então, vá fundo e se divirta!

82
00:06:10,869 --> 00:06:15,589
[Legendado por: Fred Guth] [Revisado por: Alef Almeida]