WEBVTT

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.

00:00:07.341 --> 00:00:08.637
Vamos rever.

00:00:08.637 --> 00:00:12.407
Primeiro, montamos algumas variáveis iniciais para a posição e a velocidade de uma bola.

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,

00:00:17.240 --> 00:00:20.907
nós pintamos o fundo e desenhamos uma elipse na tela

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.

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,

00:00:31.195 --> 00:00:32.862
ou até pressionar reiniciar.

00:00:32.862 --> 00:00:36.364
Então, nós adicionamos duas declarações if até aqui

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.

00:00:40.606 --> 00:00:45.309
para ser positivo ou negativo para que a bola basicamente saltasse para trás.

00:00:45.309 --> 00:00:50.071
Portanto, agora só temos essa bola, indo e voltando para sempre.

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.

00:00:53.671 --> 00:00:57.675
Mas agora, eu quero adicionar a interação do usuário a este programa.

00:00:57.675 --> 00:01:00.071
Veja, agora este programa é como um programa de TV.

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.

00:01:04.945 --> 00:01:07.606
Tudo o que podiam fazer é vê-lo, o que é legal,

00:01:07.606 --> 00:01:10.340
mas é muito mais legal se eles poderiam realmente fazer alguma coisa.

00:01:10.340 --> 00:01:13.470
Então, vamos dar ao usuário algumas maneiras de controlá-lo.

00:01:13.470 --> 00:01:20.156
Lembre-se que antes aprendemos cerca de duas variáveis globais especiais chamadas mouseX e mouseY.

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

00:01:25.972 --> 00:01:28.779
e eles são uma ótima maneira de fazer um programa mais interativo.

00:01:28.779 --> 00:01:31.239
Então, vamos ver. Como é que podemos usá-las?

00:01:31.239 --> 00:01:34.029
Bem, devemos usá-las dentro da função draw em algum lugar.

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.

00:01:39.503 --> 00:01:44.551
Tudo fora desse loop só é chamado uma vez quando o programa começa.

00:01:44.551 --> 00:01:48.136
Então, não faz sentido usar mouseX e mouseY fora do loop.

00:01:48.136 --> 00:01:51.243
O usuário ainda não terá a chance de interagir com ele.

00:01:51.243 --> 00:01:57.280
No sorteio, estamos desenhando a bola em 200 pixels para baixo na tela no momento.

00:01:57.280 --> 00:02:01.242
Que tal substituir aquele com mouseY?

00:02:01.242 --> 00:02:02.739
Porque essa é a posição y, certo?

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?

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.

00:02:14.362 --> 00:02:18.196
Isso é muito legal. Mas eu quero usar mouseX também.

00:02:18.196 --> 00:02:19.863
Então, como eu deveria usar isso?

00:02:19.863 --> 00:02:22.445
Bem, por que não vamos apenas fazer uma outra bola

NOTE Paragraph

00:02:22.445 --> 00:02:25.945
e ter a bola indo na direção oposta: para cima e para baixo.

00:02:25.945 --> 00:02:30.030
E lá vamos ver o usuário controlar a posição x dessa bola.

00:02:30.030 --> 00:02:32.612
Então, nós temos de apenas fazer o inverso.

00:02:32.612 --> 00:02:40.637
Diremos ellipse (position, mouseX, 50, 50). Tudo bem?

00:02:40.637 --> 00:02:46.906
Confira! Agora, eu tenho essas duas bolas que eu controlo, e indo em direções perpendiculares.

00:02:46.906 --> 00:02:50.075
Mas, eu ainda não estou feliz.

00:02:50.075 --> 00:02:53.445
Eu quero dar ao usuário um controle ainda maior.

00:02:53.445 --> 00:02:56.944
Eu quero dar ao usuário o poder de iniciar a segunda bola.

00:02:56.944 --> 00:03:01.407
Para realmente trazê-lo à existência, apenas pressionando o seu mouse.

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.

00:03:07.340 --> 00:03:12.945
Felizmente, temos uma variável booleana super especial para isso.

00:03:12.945 --> 00:03:19.362
É chamada mouseIsPressed e podemos usá-la dentro de um comando if.

00:03:19.362 --> 00:03:22.339
Então, vamos ver. Esta é a segunda bola.

00:03:22.339 --> 00:03:31.945
Assim, podemos dizer if (mouseIsPressed) { }, e então vamos mover o comando ellipse para lá.

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

00:03:40.863 --> 00:03:46.030
e mouseIsPressed só será verdadeiro se o usuário está pressionando o seu mouse.

00:03:46.030 --> 00:03:48.195
Então, vamos tentar.

00:03:48.195 --> 00:03:50.338
Ta da!

00:03:50.338 --> 00:03:53.362
Então agora eu posso fazer a bola aparecer sempre que eu aperto.

00:03:53.362 --> 00:03:58.407
Então está ampliando, a partir desse universo paralelo. Isso! Isso! Isso!

00:03:58.407 --> 00:04:00.029
É impressionante!

00:04:00.029 --> 00:04:04.740
Então, a coisa interessante sobre esta variável mouseIsPressed

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.

00:04:08.805 --> 00:04:13.195
E uma vez que a função draw é chamada repetidamente, uma e outra,

00:04:13.195 --> 00:04:16.171
a saída do nosso programa vai mudar ao longo do tempo

00:04:16.171 --> 00:04:18.740
apenas com um pouco de entrada do usuário.

00:04:18.740 --> 00:04:22.029
Com o poder combinado das declarações if e mouseIsPressed,

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.

00:04:26.241 --> 00:04:29.000
Woo Hoo! Tradução Por Pedro Camargo.Khan Academy Nickname:@PedroTao