Há muitas formas de fazer com que 
algo pareça animado

mas o princípio básico é sempre o mesmo.

Se pegarmos um grupo de 
desenhos ou imagens

onde cada uma é um pouco
diferente da última,

e folhearmos as imagens 
bem rápido,

vai parecer que a imagem está
em movimento.

De volta aos velhos tempos,
quando desenhávamos a mão livre

levaria um tempão para uma 
animação de três segundos.

Felizmente para nós, vivemos no futuro.

Na verdade é muito fácil fazer uma 
animação simples com código.

E eu irei mostrar como!

No lado direito, você pode ver que 
há um carrinho fofo

em um lindo fundo amarelo.

E sim, eu mesma desenhei o carrinho, 
obrigada.

Aqui você pode ver que estamos

configurando esta linda 
cor de fundo.

E o carro não tem contorno, então 
chamaremos isto de função noStroke.

Aqui fazemos uma nova 
variável, X, a posição do carro

e atribuindo o valor 10.

Você verá que se 
alterarmos este valor,

o carro se move pra trás 
e pra frente.

Vamos trazê-lo para 10.

Aqui configuramos a cor de 
preenchimento do carro

e desenhamos 2 retângulos 
para o corpo do carro.

Então, o primeiro retângulo 
é a parte debaixo

e este retângulo 
a parte de cima.

E então aqui faremos o 
mesmo com as rodas.

Configuramos a cor e 
desenhamos duas elipses:

Uma em "x + 25"

e outra "x + 75"

E finalmente teremos algo novo.

Isto aqui é chamado de
função definição

Você aprenderá tudo sobre
isso mais tarde,

Por enquanto, basta observar 
e memorizar.

As coisas importantes para se observar são
esta palavra "desenhar" e estas chaves.

Esta chave aberta aqui
e este chave fechada aqui.

Este todo é o que nós chamamos de
loop de desenho ou loop de animação.

E tudo o que você coloca
dentro destes chaves

É executado várias vezes,
muito, muito rápido.

Por isso se chama loop.

E então tudo fora destas chaves

é executado apenas uma vez
bem no início do programa.

O primeiro passo da animação é mover
todo o seu código nas chaves

então sua imagem será desenhada repetidas
vezes.

Vamos tentar.

Vou puxar todo o código do desenho

e então colar dentro do loop.

Para lembrar que esse bloqueio de códigos 
vai dentro das chaves,

vou indentar tudo selecionando 
e pressionando Tab.

E agora eu sei que este código 
está dentro das chaves.

Então você pode dizer,
tudo parece exatamente o mesmo;

nada mudou.

Porque a primeira vez que 
desenharmos em loop,

O computador vai processar:

"Faça uma nova variável x, configure para 10, 
desenhe 2 retângulos e duas elipses".

E depois ele vai até o 
começo e processar:

"Faça uma nova variável x, 
configure para 10,

desenhe dois retângulos e duas elipses".

E assim consecutivamente.

Nada mudou, e você não verá animação.

só desenhando retângulos e elipses 
no topo das anteriores.

Lembre-se o que: se queremos
fazer algo parecer animado,

você vai precisar mudar seu desenho
um pouco cada vez.

Então se quero meu carro 
indo para frente,

devo mudar o valor da variável x, certo?

É mesmo, então vamos fazer isto...11.

Ah! Não! Mas agora o valor será 
11 em cada uma das vezes.

Que valor de x devo obter para 
manter a mudança

quando o computador só executa o 
mesmo código diversas vezes?

Okay, veja esse truque de mágica.

Lembre-se, esta variável x
faz uma nova variável.

Quando temos isto dentro 
do loop do desenho,

isto gera uma nova variável
chamada "x"cada única vez.

O que precisamos é fazer esta
variável fora do loop do desenho.

Desta forma, isto será feito somente 
uma vez.

Toda vez que o computador executar 
este código e ver a variável x,

irá reutilizar a variável anterior, 
usando o último valor atribuído.

Então farei o seguinte:
vou pegar esta variável

e faremos isso fora 
do loop do desenho.

Então agora ele está fazendo
a variável uma vez.

E toda vez que executa em
uma variável x,

Ele vai reutilizar a mesma variável.

E agora, o último valor atribuído,
foi 11.

e então será sempre 11.

E é aqui onde a mágica começa.

Em algum lugar do loop,

faremos mudanças no valor de x

para ser um pouco maior do 
que costumava ser. Assim:

x obtém o valor antigo de x
mais, digamos, um.

Opa! Funcionou!

Exceto, por estar borrado.

Se você está imaginando
porque ele ficou assim,

é porque nos esquecemos de desenhar 
este fundo dentro do loop

Então o carro é desenhado
constantemente,

mas você pode ver todos os carros 
abaixo do novo.

Se eu só puxar esta linha dentro do 
topo do loop do desenho, como este,

então pressiono "Restart"
e posso ver meu carro de novo...

Uau! Está perfeito!

Se quisermos fazer o carro
ir mais rápido,

deevemos mudar a quantidade
aumentando o valor de x.

Se nós fizermos 10, uau!
Ele sai da tela!

E se colocarmos um valor negativo,
como x-10 e ...

Aqui está!

Faça isso positivo novamente,

Aí está!

Há coisas importantes para 
se lembrar:

Isto aqui é chamado 
de loop de desenho.

Você deve colocar o código do desenho
aqui dentro

para ele desenhar continuamente.

E então, você quer fazer
a variável fora de seu desenho.

É super importante fazer a variável
fora do loop do desenho.

Podemos reutilizar todas as vezes.

Então dentro do loop de desenho, bem aqui,

vamos mudar a variável um pouco,

de preferência configurando 
para um valor antigo,

mais algum número mais ou 
menos algum numero.

Por fim, você quer utilizar sua variável
em algum lugar dentro do código

para que o desenho apareça 
sempre diferente.

E ... é isso!

Legendado por [Marcus Abud]
Revisado por [Cainã Perri]