WEBVTT

00:00:00.970 --> 00:00:04.846
Aqui você deve ter percebido que definiu
uma função em especial

00:00:04.905 --> 00:00:09.315
toda vez que você desejou animar 
seu programa, a função <i>draw</i>.

00:00:09.315 --> 00:00:12.140
Lembrando, aqui está nosso 
programa do carro animado

00:00:13.700 --> 00:00:16.326
lembre que temos <i>var x = 11</i>

00:00:16.326 --> 00:00:18.310
que é a posição inicial do carro

00:00:18.310 --> 00:00:20.358
e <i>var draw</i> contento
todo o código de dezenho

00:00:20.358 --> 00:00:24.163
e então mudamos <i>x</i> adicionando 3
em cada execução

00:00:24.163 --> 00:00:27.459

e então podemos reiniciar e rodar!

00:00:27.459 --> 00:00:31.107
Agora que você sabe fazer suas
próprias funções,

00:00:31.107 --> 00:00:37.855
deve estar se perguntando "e esta função 
draw? É customizável? É sempre assim?

00:00:37.855 --> 00:00:39.798
Bem, esta é uma boa pergunta.

00:00:39.798 --> 00:00:45.438
Veja que, em nosso ambiente Khan Academy, 
existem funções globais especiais,

00:00:45.438 --> 00:00:50.070
que eu chamo de "Funções Mágicas", mas 
é só um nome que dei a elas.

00:00:50.070 --> 00:00:55.066
Quando rodamos seu programa, verificamos 
se você definiu funções com certos nomes,

00:00:55.066 --> 00:00:59.686
como <i>draw</i>, e se encontrarmos, nós às
chamamos em momentos específicos.

00:00:59.686 --> 00:01:02.908
Por exemplo, quando você cria
a função <i>draw</i> em seu código,

00:01:02.908 --> 00:01:07.329
nós iremos procurá-la e olhar 
o código dentro dela

00:01:07.329 --> 00:01:12.078
e iremos chamar este código várias vezes,
tão rápido quanto pudermos.

00:01:12.078 --> 00:01:17.235
Se você não definir a função <i>draw</i>, não 
iremos chamar nada, pois não há nada aqui.

00:01:17.235 --> 00:01:23.464
Ou seja, se nós renomearmos 
a função para <i>drow</i>

00:01:23.464 --> 00:01:25.959
certo, não irá funcionar.

00:01:25.959 --> 00:01:29.357
Ou para <i>drawCar</i>...
ok, não funciona

00:01:29.357 --> 00:01:34.906
Então, se renomearmos a função, 
o programa não a encontra mais

00:01:34.906 --> 00:01:38.810
Assim o código não é rodado várias vezes
e nada acontece.

00:01:38.810 --> 00:01:43.431
Isso significa, que você não deve renomear
uma função sua para <i>draw</i>,

00:01:43.431 --> 00:01:47.739
a menos que você queira que ela 
seja chamada várias vezes.

00:01:48.839 --> 00:01:51.808
<i>draw</i> não é a única 
função mágica que existe

00:01:51.808 --> 00:01:58.433
Existem outras funções para manipular
interações com mouse e teclado

00:01:59.043 --> 00:02:02.629
Vamos ver um exemplo de 
outro programa de animação.

00:02:02.629 --> 00:02:13.234
Digamos que queremos desenhar a bola onde
o usuário está movendo o mouse

00:02:13.234 --> 00:02:19.870
Nós temos <i>draw</i>, <i>fill</i> e então <i>ellipse</i>
em <i>(mouseX, mouseY, 10, 10)</i>

00:02:19.870 --> 00:02:21.437
Vamos tentar isso. Legal!

00:02:21.437 --> 00:02:24.524
Temos algo legal colorindo a bola
enquanto movemos.

00:02:24.524 --> 00:02:30.357
Este código dentro da função <i>draw</i>,
será chamado várias vezes

00:02:30.357 --> 00:02:33.520
Por que nós o colocamos dentro da função
com nome <i>draw</i>

00:02:33.520 --> 00:02:39.629
Ele será chamado mesmo que o usuário não
mova o mouse. Está sendo chamado agora.

00:02:41.439 --> 00:02:47.108
Como pode ser visto, existe um jeito
de fazer isso mais eficiente

00:02:47.108 --> 00:02:52.685
o que precisamos mudar é o nome da função
<i>draw</i> para <i>mouseMoved</i>

00:02:54.005 --> 00:02:59.187
Nosso ambiente sempre verifica se existe a
função <i>mouseMoved</i> definida

00:02:59.187 --> 00:03:06.189
assim, ele irá chamá-la toda vez que o
usuário mover o mouse, veja, funciona.

00:03:06.189 --> 00:03:13.860
Mas ele não irá chamá-la se o mouse não
estiver se movendo.

00:03:15.220 --> 00:03:21.517
Antes quando usamos <i>draw</i> o código era
chamado mesmo com o mouse parado.

00:03:21.517 --> 00:03:27.020
Agora que usamos <i>mouseMoved</i> só chamamos
o código quando o mouse move.

00:03:27.020 --> 00:03:34.000
Nosso programa é mais eficiente. Então, se
você quer fazer algo quando o mouse move

00:03:34.000 --> 00:03:39.692
é melhor deixar o código dentro dentro da
função <i>mouseMoved</i> em vez da <i>draw</i>.

00:03:39.692 --> 00:03:43.965
Existe muitas outras funções
como <i>mouseMoved</i>.

00:03:43.965 --> 00:03:49.324
Existem <i>mousePressed</i>, <i>mouseReleased</i> e
<i>keyPressed</i>. Basta ler a documentação.

00:03:49.324 --> 00:03:55.194
Lembre-se que ao usar funções mágicas,
deve chamá-las com o nome correto.

00:03:55.194 --> 00:04:00.245
Se não, tenha certeza que criou um 
novo nome para sua função.

00:04:00.245 --> 00:04:01.730
Legendado por [Paulo Trentin] e revisado por [Alef Almeida].