WEBVTT

00:00:00.387 --> 00:00:04.096
Continuemos explorando o que 
podemos fazer com objetos.

00:00:04.109 --> 00:00:08.305
Voltamos para o programa que
usamos no tutorial de funções.

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.

00:00:14.521 --> 00:00:16.441
E, aqui, chamamos <i>drawWinston</i>


00:00:16.441 --> 00:00:18.361
4 vezes, cada uma com um conjunto

00:00:18.361 --> 00:00:21.521
diferente de coordenadas X e Y.

00:00:21.521 --> 00:00:23.776
Bem, você me conhece, quando vejo

00:00:23.776 --> 00:00:28.379
estas quatro chamadas para <i>drawWinton</i>
que se parecem tanto,

00:00:28.379 --> 00:00:31.779
tudo que penso é: como seria
melhor se pudéssemos

00:00:31.779 --> 00:00:36.329
usar um loop e chamá-la apenas 
uma vez dentro do loop,

00:00:36.329 --> 00:00:40.369
mudando X e Y em cada interação do loop.

00:00:40.369 --> 00:00:47.036
Para isso, precisamos guardar esses X e Y
em um vetor para poder iterá-lo.

00:00:47.036 --> 00:00:50.200
Bem, temos dois conjuntos de valores.

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.

00:00:56.524 --> 00:01:02.805
Nas posições X podemos ter 
99, 294, 101 e 294,

00:01:02.805 --> 00:01:09.946
e nas posições Y teremos
117, 117, 316, 316.

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

00:01:17.979 --> 00:01:22.174
Para cada elemento de
xPositions, dizemos

00:01:22.174 --> 00:01:30.019
drawWinston ( xPositions[ i ],
yPositions [ i ] );

00:01:30.019 --> 00:01:33.926
Ok, vejamos se funciona...
deletando...

00:01:33.926 --> 00:01:36.200
Certo, funcionou!

00:01:36.200 --> 00:01:40.459
Agora podemos apenas chamar 
essa única linha de código que

00:01:40.459 --> 00:01:45.518
executa drawWinston, mas o faz
para cada posição do vetor xPositions.

00:01:45.518 --> 00:01:48.396
Podemos vir aqui e adicionar 
mais a isso ... dizendo...

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.

00:01:57.874 --> 00:02:03.472
Agora... agora está ficando um pouco
confuso e não estou gostando,

00:02:03.472 --> 00:02:09.914
porque está bem difícil ver que X
se relaciona com qual Y.

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,

00:02:15.559 --> 00:02:22.454
ao invés de ter que garantir que os estou
alinhando corretamente, um sobre o outro

00:02:22.454 --> 00:02:26.729
Preciso encontrar uma forma diferente
de armazenar essas posições.

00:02:26.729 --> 00:02:30.791
Uma ideia é que poderíamos 
armazená-las como objetos.

00:02:30.791 --> 00:02:35.780
Pense nisso, cada posição é na verdade
duas informações: o X e o Y.

00:02:35.780 --> 00:02:39.106
Então, poderíamos ter um objeto com as
propriedades X e Y,

00:02:39.106 --> 00:02:44.002
e poderíamos ter um vetor -de objetos
com todas essas posições X-Y.

00:02:44.002 --> 00:02:45.968
Vamos fazer!

00:02:45.968 --> 00:02:51.395
Vamos dizer var positions
igual a um vetor.

00:02:51.395 --> 00:02:55.852
Mas, cada elemento, ao invés de ser
um número, será um objeto.

00:02:55.852 --> 00:03:04.691
Aqui abrimos chave e vamos apenas
dizer X:99, Y:117.

00:03:04.691 --> 00:03:13.392
Ok, temos agora nossas posições aqui, 
e vamos adicionar outra aqui.

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.

00:03:32.877 --> 00:03:37.524
Ok! Agora, temos um vetor de objetos onde
cada objeto tem propriedades X e Y.

00:03:37.524 --> 00:03:44.228
Aqui em baixo, no loop for, mudamos apenas
isso aqui para iterar por positions.length

00:03:44.228 --> 00:03:48.993
Então passamos o objeto.

00:03:48.993 --> 00:03:53.238
Agora estamos passando o objeto inteiro,
mas queremos passar o X e o Y,

00:03:53.238 --> 00:03:59.548
então precisamos de 
positions [ i ].X e positions [ i ].Y

00:03:59.548 --> 00:04:00.808
Ta-da!

00:04:00.808 --> 00:04:04.999
Agora podemos nos livrar destes
vetores antigos confusos.

00:04:04.999 --> 00:04:10.034
Ótimo, parece-me bem melhor e
torna o código mais legível

00:04:10.034 --> 00:04:12.959
e sempre que pudermos ter código
mais legível, melhor.

00:04:12.959 --> 00:04:14.956
E também está mais fácil adicionar.

00:04:14.956 --> 00:04:19.204
Se quisermos adicionar um, só precisamos
adicionar o par junto,

00:04:19.204 --> 00:04:25.142
e aí podemos dizer X é 200, Y 200, nos dá um
pequeno Winston aqui no meio.

00:04:26.872 --> 00:04:27.961
Beleza.

00:04:27.961 --> 00:04:31.266
Agora quero mostrar algo
ainda mais sofisticado.

00:04:31.266 --> 00:04:38.635
Percebe que nossa função aceita dois
números e depois os usa.

00:04:38.635 --> 00:04:42.166
Bem, poderíamos mudar nossa função
para que espere um objeto

00:04:42.166 --> 00:04:45.697
e depois pegue o X e Y do objeto,

00:04:45.697 --> 00:04:49.230
o que significa que aqui embaixo só
teríamos que passar o objeto.

00:04:50.060 --> 00:04:50.846
Vamos tentar!

00:04:50.846 --> 00:04:53.596
Passamos o objeto, agora não funciona.

00:04:53.596 --> 00:04:58.208
Isso porque nossa função ainda espera dois
objetos e está recebendo apenas um,

00:04:59.278 --> 00:05:00.050
então vamos mudá-la

00:05:00.050 --> 00:05:02.370
para dizer que recebe facePosition,


00:05:04.220 --> 00:05:06.710
e agora deu erro porque faceX
não está definido,

00:05:06.710 --> 00:05:12.196
por que antes estávamos passando faceX
como argumento, mas agora ele não existe,

00:05:12.196 --> 00:05:12.862
temos apenas um objeto.

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.

00:05:21.159 --> 00:05:24.945
Estamos dizendo que temos este objeto,
sabemos que ele tem uma propriedade X,

00:05:24.945 --> 00:05:28.271
então vamos apenas guardá-la
na variável faceX.

00:05:28.871 --> 00:05:33.637
Podemos fazer o mesmo com Y, 
então faceY = facePosition.y;

00:05:33.637 --> 00:05:34.850
Ta-da!

00:05:34.850 --> 00:05:38.167
E então, o resto da função usa
faceX e faceY.

00:05:38.167 --> 00:05:40.146
Agora, temos que ter certeza
que soletramos corretamente,

00:05:40.146 --> 00:05:44.805
se escrevermos xx, não vai funcionar,
porque não é o que está aqui embaixo

00:05:44.805 --> 00:05:48.125
no nosso vetor de objetos. Precisa bater.

00:05:48.125 --> 00:05:52.136
Isso é bem legal, porque agora você pode
ter um vetor de objetos,

00:05:52.136 --> 00:05:54.117
pode ter funções que recebem objetos

00:05:54.117 --> 00:06:00.160
e você vai ver que seus programas ficarão 
poderosos com essa estrutura de dados.

00:06:00.160 --> 00:06:04.434
Especialmente porque é tão comum querer
junto um par X e Y.

00:06:04.434 --> 00:06:08.926
Será especialmente útil nos seus programas
de desenho e animação aqui.

00:06:08.926 --> 00:06:10.869
Então, vá fundo e se divirta!

00:06:10.869 --> 00:06:15.589
[Legendado por: Fred Guth] [Revisado por: Alef Almeida]