1
00:00:01,737 --> 00:00:07,341
Em nossa última conversa-through, mostramos como você pode animar uma bola saltando fora das paredes usando a função draw e declarações if.

2
00:00:07,341 --> 00:00:08,637
Vamos rever.

3
00:00:08,637 --> 00:00:12,407
Primeiro, montamos algumas variáveis iniciais para a posição e a velocidade de uma bola.

4
00:00:12,407 --> 00:00:17,240
Em seguida, no loop de empate, o que é que a função especial que é chamada uma e outra vez quando o programa está em execução,

5
00:00:17,240 --> 00:00:20,907
nós pintamos o fundo e desenhamos uma elipse na tela

6
00:00:20,907 --> 00:00:27,779
e nós posicionamos a elipse com base na variável position e speed e como eles afetam uns aos outros.

7
00:00:27,779 --> 00:00:31,195
Agora, sem as declarações if, a nossa bola não parava de ir para todo o sempre,

8
00:00:31,195 --> 00:00:32,862
ou até pressionar reiniciar.

9
00:00:32,862 --> 00:00:36,364
Então, nós adicionamos duas declarações if até aqui

10
00:00:36,441 --> 00:00:40,605
para verificar e ver se a bola estava perto do lado direito da tela, ou do lado esquerdo da tela, e assim for, nós mudamos a velocidade para ser positivo ou negativo para que a bola basicamente saltasse para trás.

11
00:00:40,606 --> 00:00:45,309
para ser positivo ou negativo para que a bola basicamente saltasse para trás.

12
00:00:45,309 --> 00:00:50,071
Portanto, agora só temos essa bola, indo e voltando para sempre.

13
00:00:50,071 --> 00:00:53,671
Então isso foi muito legal, e há um monte de animações muito legais que podemos fazer com isso.

14
00:00:53,671 --> 00:00:57,675
Mas agora, eu quero adicionar a interação do usuário a este programa.

15
00:00:57,675 --> 00:01:00,071
Veja, agora este programa é como um programa de TV.

16
00:01:00,071 --> 00:01:04,945
Se você deu-o a um amigo, e seu amigo não sabe programar, não podiam realmente interagir com ele.

17
00:01:04,945 --> 00:01:07,606
Tudo o que podiam fazer é vê-lo, o que é legal,

18
00:01:07,606 --> 00:01:10,340
mas é muito mais legal se eles poderiam realmente fazer alguma coisa.

19
00:01:10,340 --> 00:01:13,470
Então, vamos dar ao usuário algumas maneiras de controlá-lo.

20
00:01:13,470 --> 00:01:20,156
Lembre-se que antes aprendemos cerca de duas variáveis globais especiais chamadas mouseX e mouseY.

21
00:01:20,156 --> 00:01:25,972
Essas variáveis retornam números que nos dizem sobre a posição atual do mouse do usuário

22
00:01:25,972 --> 00:01:28,779
e eles são uma ótima maneira de fazer um programa mais interativo.

23
00:01:28,779 --> 00:01:31,239
Então, vamos ver. Como é que podemos usá-las?

24
00:01:31,239 --> 00:01:34,029
Bem, devemos usá-las dentro da função draw em algum lugar.

25
00:01:34,029 --> 00:01:39,503
Porque esse é o único código que é chamado de uma e outra vez que o programa é executado.

26
00:01:39,503 --> 00:01:44,551
Tudo fora desse loop só é chamado uma vez quando o programa começa.

27
00:01:44,551 --> 00:01:48,136
Então, não faz sentido usar mouseX e mouseY fora do loop.

28
00:01:48,136 --> 00:01:51,243
O usuário ainda não terá a chance de interagir com ele.

29
00:01:51,243 --> 00:01:57,280
No sorteio, estamos desenhando a bola em 200 pixels para baixo na tela no momento.

30
00:01:57,280 --> 00:02:01,242
Que tal substituir aquele com mouseY?

31
00:02:01,242 --> 00:02:02,739
Porque essa é a posição y, certo?

32
00:02:02,739 --> 00:02:08,530
Assim, desta forma ele vai apenas adicionar a posição y dependente de onde a coordenada Y do mouse do usuário está. Certo?

33
00:02:08,530 --> 00:02:14,362
Então veja isto. Apenas movendo o meu cursor para cima e para baixo, eu posso mudar a linha que a bola se move longitudinalmente.

34
00:02:14,362 --> 00:02:18,196
Isso é muito legal. Mas eu quero usar mouseX também.

35
00:02:18,196 --> 00:02:19,863
Então, como eu deveria usar isso?

36
00:02:19,863 --> 00:02:22,445
Bem, por que não vamos apenas fazer uma outra bola

37
00:02:22,445 --> 00:02:25,945
e ter a bola indo na direção oposta: para cima e para baixo.

38
00:02:25,945 --> 00:02:30,030
E lá vamos ver o usuário controlar a posição x dessa bola.

39
00:02:30,030 --> 00:02:32,612
Então, nós temos de apenas fazer o inverso.

40
00:02:32,612 --> 00:02:40,637
Diremos ellipse (position, mouseX, 50, 50). Tudo bem?

41
00:02:40,637 --> 00:02:46,906
Confira! Agora, eu tenho essas duas bolas que eu controlo, e indo em direções perpendiculares.

42
00:02:46,906 --> 00:02:50,075
Mas, eu ainda não estou feliz.

43
00:02:50,075 --> 00:02:53,445
Eu quero dar ao usuário um controle ainda maior.

44
00:02:53,445 --> 00:02:56,944
Eu quero dar ao usuário o poder de iniciar a segunda bola.

45
00:02:56,944 --> 00:03:01,407
Para realmente trazê-lo à existência, apenas pressionando o seu mouse.

46
00:03:01,407 --> 00:03:07,340
Bem, então eu preciso descobrir como dizer que o usuário está pressionando o seu mouse.

47
00:03:07,340 --> 00:03:12,945
Felizmente, temos uma variável booleana super especial para isso.

48
00:03:12,945 --> 00:03:19,362
É chamada mouseIsPressed e podemos usá-la dentro de um comando if.

49
00:03:19,362 --> 00:03:22,339
Então, vamos ver. Esta é a segunda bola.

50
00:03:22,339 --> 00:03:31,945
Assim, podemos dizer if (mouseIsPressed) { }, e então vamos mover o comando ellipse para lá.

51
00:03:31,945 --> 00:03:40,863
Então, o que isso está fazendo aqui, é dizer ao programa que nós só queremos tirar essa elipse se isso é verdade

52
00:03:40,863 --> 00:03:46,030
e mouseIsPressed só será verdadeiro se o usuário está pressionando o seu mouse.

53
00:03:46,030 --> 00:03:48,195
Então, vamos tentar.

54
00:03:48,195 --> 00:03:50,338
Ta da!

55
00:03:50,338 --> 00:03:53,362
Então agora eu posso fazer a bola aparecer sempre que eu aperto.

56
00:03:53,362 --> 00:03:58,407
Então está ampliando, a partir desse universo paralelo. Isso! Isso! Isso!

57
00:03:58,407 --> 00:04:00,029
É impressionante!

58
00:04:00,029 --> 00:04:04,740
Então, a coisa interessante sobre esta variável mouseIsPressed

59
00:04:04,740 --> 00:04:08,805
é que ela muda com base no que o usuário faz, e não com base no que o nosso programa faz.

60
00:04:08,805 --> 00:04:13,195
E uma vez que a função draw é chamada repetidamente, uma e outra,

61
00:04:13,195 --> 00:04:16,171
a saída do nosso programa vai mudar ao longo do tempo

62
00:04:16,171 --> 00:04:18,740
apenas com um pouco de entrada do usuário.

63
00:04:18,740 --> 00:04:22,029
Com o poder combinado das declarações if e mouseIsPressed,

64
00:04:22,029 --> 00:04:26,241
você tem tudo que você precisa para fazer as coisas impressionantes como botões, e os programas de desenho.

65
00:04:26,241 --> 00:04:29,000
Woo Hoo! Tradução Por Pedro Camargo.Khan Academy Nickname:@PedroTao