0:00:00.970,0:00:04.846
Aqui você deve ter percebido que definiu[br]uma função em especial

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

0:00:09.315,0:00:12.140
Lembrando, aqui está nosso [br]programa do carro animado

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

0:00:16.326,0:00:18.310
que é a posição inicial do carro

0:00:18.310,0:00:20.358
e <i>var draw</i> contento[br]todo o código de dezenho

0:00:20.358,0:00:24.163
e então mudamos <i>x</i> adicionando 3[br]em cada execução

0:00:24.163,0:00:27.459
[br]e então podemos reiniciar e rodar!

0:00:27.459,0:00:31.107
Agora que você sabe fazer suas[br]próprias funções,

0:00:31.107,0:00:37.855
deve estar se perguntando "e esta função [br]draw? É customizável? É sempre assim?

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

0:00:39.798,0:00:45.438
Veja que, em nosso ambiente Khan Academy, [br]existem funções globais especiais,

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

0:00:50.070,0:00:55.066
Quando rodamos seu programa, verificamos [br]se você definiu funções com certos nomes,

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

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

0:01:02.908,0:01:07.329
nós iremos procurá-la e olhar [br]o código dentro dela

0:01:07.329,0:01:12.078
e iremos chamar este código várias vezes,[br]tão rápido quanto pudermos.

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

0:01:17.235,0:01:23.464
Ou seja, se nós renomearmos [br]a função para <i>drow</i>

0:01:23.464,0:01:25.959
certo, não irá funcionar.

0:01:25.959,0:01:29.357
Ou para <i>drawCar</i>...[br]ok, não funciona

0:01:29.357,0:01:34.906
Então, se renomearmos a função, [br]o programa não a encontra mais

0:01:34.906,0:01:38.810
Assim o código não é rodado várias vezes[br]e nada acontece.

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

0:01:43.431,0:01:47.739
a menos que você queira que ela [br]seja chamada várias vezes.

0:01:48.839,0:01:51.808
<i>draw</i> não é a única [br]função mágica que existe

0:01:51.808,0:01:58.433
Existem outras funções para manipular[br]interações com mouse e teclado

0:01:59.043,0:02:02.629
Vamos ver um exemplo de [br]outro programa de animação.

0:02:02.629,0:02:13.234
Digamos que queremos desenhar a bola onde[br]o usuário está movendo o mouse

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

0:02:19.870,0:02:21.437
Vamos tentar isso. Legal!

0:02:21.437,0:02:24.524
Temos algo legal colorindo a bola[br]enquanto movemos.

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

0:02:30.357,0:02:33.520
Por que nós o colocamos dentro da função[br]com nome <i>draw</i>

0:02:33.520,0:02:39.629
Ele será chamado mesmo que o usuário não[br]mova o mouse. Está sendo chamado agora.

0:02:41.439,0:02:47.108
Como pode ser visto, existe um jeito[br]de fazer isso mais eficiente

0:02:47.108,0:02:52.685
o que precisamos mudar é o nome da função[br]<i>draw</i> para <i>mouseMoved</i>

0:02:54.005,0:02:59.187
Nosso ambiente sempre verifica se existe a[br]função <i>mouseMoved</i> definida

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

0:03:06.189,0:03:13.860
Mas ele não irá chamá-la se o mouse não[br]estiver se movendo.

0:03:15.220,0:03:21.517
Antes quando usamos <i>draw</i> o código era[br]chamado mesmo com o mouse parado.

0:03:21.517,0:03:27.020
Agora que usamos <i>mouseMoved</i> só chamamos[br]o código quando o mouse move.

0:03:27.020,0:03:34.000
Nosso programa é mais eficiente. Então, se[br]você quer fazer algo quando o mouse move

0:03:34.000,0:03:39.692
é melhor deixar o código dentro dentro da[br]função <i>mouseMoved</i> em vez da <i>draw</i>.

0:03:39.692,0:03:43.965
Existe muitas outras funções[br]como <i>mouseMoved</i>.

0:03:43.965,0:03:49.324
Existem <i>mousePressed</i>, <i>mouseReleased</i> e[br]<i>keyPressed</i>. Basta ler a documentação.

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

0:03:55.194,0:04:00.245
Se não, tenha certeza que criou um [br]novo nome para sua função.

0:04:00.245,0:04:01.730
Legendado por [Paulo Trentin] e revisado por [Alef Almeida].