0:00:00.000,0:00:03.921
Vamos recapitular o que vimos até agora.

0:00:03.921,0:00:10.043
Nós agora saber usar dois comandos. Um é chamado 'point', o outro é 'line'.

0:00:10.043,0:00:18.201
E nós sabemos que depois de digitar esses comandos temos que por algo entre parênteses.

0:00:18.201,0:00:23.280
Uma sequência de valores separados por vírgulas.

0:00:23.280,0:00:27.408
Algumas vezes, como neste caso, são somente dois valores...

0:00:27.408,0:00:30.487
'line' precisa de quatro valores.

0:00:30.487,0:00:37.664
No final da linha é preciso haver um ponto-e-vírgula para indicar ao computador que a linha acabou.

0:00:37.664,0:00:41.767
Vamos tentar rodar o programa sem ele e ver o que acontece.

0:00:41.767,0:00:45.908
Como você pode ver, erro de sintaxe. Talvez esteja faltando um ponto-e-vírgula.

0:00:45.908,0:00:51.040
Isso mesmo. Esta parte é um pouco difícil de entender.

0:00:51.040,0:01:01.243
É um erro bem longo, mas a falta de um ponte-e-vírgula é simples. Então como sabemos disso, apenas adicionamos ele.

0:01:01.243,0:01:06.304
E agora tudo funciona.

0:01:06.304,0:01:10.367
Depois nós aprendemos algo sobre a tela, como esta pequena tela que temos aqui.

0:01:10.367,0:01:16.442
Ela parece ter 100 pontos de comprimento por 100 pontos de altura.

0:01:16.442,0:01:23.655
Eu vou explicar um pouco mais sobre a tela neste desenho.

0:01:23.655,0:01:34.846
Vamos imaginar que esta seja a nossa tela. Ela é feita de vários pequenos pontos (pixels), como este aqui.

0:01:34.846,0:01:41.978
A razão de usar dois número desta maneira: (50, 50)...

0:01:41.978,0:01:52.180
É porque cada coluna é numerada de (0, 1, 2, 3, 4, ...)

0:01:52.180,0:02:03.386
Dependendo do tamanho da sua tela você pode ter 1280 ou talvez 1024 colunas.

0:02:03.386,0:02:09.482
Estando em um telefone celular você terá menos resolução. Talvez seja 400.

0:02:09.482,0:02:19.734
O mesmo para as linhas. Aqui nós temos (0, 1, 2, 3, ...) até sei lá. Pode ser 768.

0:02:19.734,0:02:32.964
Então para desenhar um pixel é preciso saber qual é a coluna e a linha que estamos procurando.

0:02:32.964,0:02:42.224
Nesse caso seria (3, 3). É por isso que escrevemos esses dois números. Ou talvez (50, 50)...

0:02:42.224,0:02:49.372
... desta forma você pode escolher qual pixel da tela você quer iluminar, ou mudar de cor.

0:02:49.372,0:02:58.545
Ok, então até agora sabemos esses dois comandos: 'point' e 'line'. Isto está meio tedioso por enquanto...

0:02:58.545,0:03:05.682
... porque toda vez que rodamos o programa recebemos o mesmo desenho.

0:03:05.682,0:03:11.800
Seria legal se algo estivesse mudando. Talvez você possa adicionar alguma aleatoriedade.

0:03:11.800,0:03:19.001
Ao invés de vermos sempre a mesma linha, talvez todas vez que rodarmos o programa ela possa ser um pouca diferente.

0:03:19.001,0:03:28.186
Então vamos dar uma olhada na referencia. O que temos sobre aleatório ('random' em inglês) ?

0:03:28.186,0:03:34.297
Apertando ctrl+f, na maioria dos navegadores, você pode procurar por algo na página...

0:03:34.297,0:03:38.396
... então nós vamos digitar 'random' aqui. Ok.

0:03:38.396,0:03:46.587
Eu vejo algumas coisas sobre 'random'. Parece que temos 5 funções que fazem algo.

0:03:46.587,0:03:51.712
Talvez esta última, vamos dar uma olhada em 'random'.

0:03:51.712,0:03:57.858
Aqui temos alguns exemplos. Eles provavelmente parecem meio complicados no momento.

0:03:57.858,0:04:07.009
Vamos ler a descrição. "Gera números aleatórios. Cada vez que a função random() é chamada..."

0:04:07.009,0:04:15.207
"... ela retorna um valor inesperado dentro do intervalo especificado. Se um parâmetro for passado para a função ...

0:04:15.207,0:04:21.301
ela irá retornar um número 'float'... " O que é um número 'float'? Nós ainda não sabemos...

0:04:21.301,0:04:29.514
Mas vamos observar como é usado aqui. 'random(superior)' ou 'random(inferior, superior)'.

0:04:29.514,0:04:36.606
Aqui diz que você pode usar 'random(5)' e isto irá lhe dar um número entre 0 e 5.

0:04:36.606,0:04:39.644
Isso parece divertido.

0:04:39.644,0:04:43.722
Então ao invés de desenhar a mesma coisa o tempo inteiro.

0:04:43.722,0:04:51.930
Nós podemos desenhar linhas aleatórias. Podemos trocar todos esses números...

0:04:51.930,0:04:54.992
... por alguns valores aleatórios.

0:04:54.992,0:05:00.129
Vamos começar substituindo estes últimos dois '99' por exemplo.

0:05:00.129,0:05:10.332
Então nós vamos desenhar uma linha a partir de (0, 0), que é o primeiro ponto na tela, até ...

0:05:10.332,0:05:17.477
... algum lugar aleatório na tela.

0:05:17.477,0:05:21.562
Tome cuidado com esses parênteses.

0:05:21.562,0:05:32.746
Quando você põe o cursor aqui ele ilumina o outro parêntese correspondente.

0:05:32.746,0:05:36.891
Isso é porque todo parêntese aberto deve ser fechado.

0:05:36.891,0:05:50.180
Então isso fica 'random(100)' e este de novo 'random(100)' e depois você fecha o parêntese do início.

0:05:50.180,0:05:57.340
Você pode botar uns espaços a mais para ficar mais claro.

0:05:57.340,0:06:02.431
Isto está desenhando uma linha do (0, 0) para um ponto aleatório em algum lugar da tela.

0:06:02.431,0:06:06.506
Vamos rodar o programa e ver o que acontece.

0:06:06.506,0:06:12.527
Então agora ele começa no (0, 0) e acaba naquele ponto.

0:06:12.527,0:06:19.686
E se eu rodar de novo? Um resultado diferente.

0:06:19.686,0:06:31.898
Toda vez que eu rodar esse programa ele desenha uma linha que começa no canto e acaba em algum lugar da tela.

0:06:31.898,0:06:39.037
Vamos mudar os primeiros dois números com outros aleatórios.

0:06:39.037,0:07:03.618
Agora vamos desenhar uma linha de uma posição aleatória vertical e horizontal da tela até uma posição x e y aleatória.

0:07:03.618,0:07:07.735
Oh que conhecidência! Ficou totalmente na vertical!

0:07:07.735,0:07:17.993
Toda vez que eu rodo o programa ele vai desenhar uma linha aleatória.

0:07:17.993,0:07:25.112
Uma coisa legal de Processing é que é bem fácil de fazer animações.

0:07:25.112,0:07:32.166
Eu vou deletar esses pontos aqui e deixar só a linha.

0:07:32.166,0:07:42.322
Deixe-me lembrar como faço isso... é 'void draw()'.

0:07:42.322,0:07:45.407
Vamos ver se funciona e depois eu explico o que faz.

0:07:45.407,0:07:49.495
Uau! Isso é um montão de linhas!

0:07:49.495,0:07:52.544
Está tudo se tornando preto.

0:07:52.544,0:07:55.559
O que está acontecendo?

0:07:55.559,0:08:02.749
Isto é uma coisa legal de Processing. Claro que em outras linguagens você pode fazer gráficos e desenhar...

0:08:02.749,0:08:06.802
... mas geralmente vai ser muito mais complicado que isto.

0:08:06.802,0:08:13.989
Aqui com apenas duas linhas de código nós estamos fazendo esta animação.

0:08:13.989,0:08:23.119
'draw()' é uma função especial que já vem definida. Ela permite a você rodar alguma coisa continuamente.

0:08:23.119,0:08:24.183
O que isto significa?

0:08:24.183,0:08:31.389
Imagine os filmes, que são feitos de imagens. Eles tem várias imagens por segundo, então ...

0:08:31.389,0:08:37.456
... quando você mostra várias imagens por segundo você consegue uma ilusão de movimento, animação.

0:08:37.456,0:08:41.521
Bem, é isto que 'draw' está fazendo aqui.

0:08:41.521,0:08:50.748
Você só precisa saber que qualquer coisa posta dentro deste 'void draw() {}'...

0:08:50.748,0:08:56.921
... todas linhas de código ali dentro vão ser rodadas muitas vezes por segundo.

0:08:56.921,0:09:03.095
É por isto que ele está desenhando linhas aleatórias muitas vezes por segundo. Então quando você roda o programa ...

0:09:03.095,0:09:12.255
Porque não apagamos nada, a tela está se tornando lentamente preta.

0:09:12.255,0:09:22.036
Seria legal se nós pudéssemos apagar a última linha. Então ia parecer que a linha está se movendo.

0:09:22.036,0:09:27.148
Este será o último comando que eu vou explicar nesse vídeo.

0:09:27.148,0:09:31.247
Se chama 'background'.

0:09:31.247,0:09:41.575
Vamos até o manual e consultar ele. Usando 'ctrl+f', procurando por 'background'.

0:09:41.575,0:09:52.819
Aqui temos alguns exemplos. Parece que 'background(51)' faz um fundo de tela cinza.

0:09:52.819,0:09:56.905
Se nós usarmos esses números ele faz um fundo amarelo...

0:09:56.905,0:10:00.972
... parece até que podemos usar uma imagem como fundo de tela.

0:10:00.972,0:10:08.133
A função 'background' muda a cor usada para o fundo da tela do Processing.

0:10:08.133,0:10:12.201
A cor padrão do fundo é cinza claro. Nós já notamos isso.

0:10:12.201,0:10:20.325
Se nós rodarmos de novo podemos ver ... oh o que foi que eu quebrei?

0:10:20.325,0:10:23.354
Me desculpem, eu tinha aqui esse 'background()' que ainda não acabei.

0:10:23.354,0:10:30.454
Ok, vamos rodar. Você pode ver que o fundo é cinza claro.

0:10:30.454,0:10:32.530
O que mais diz aqui?

0:10:32.530,0:10:39.656
Na função 'draw' a cor de fundo é usada para apagar a tela no início de cada novo desenho.

0:10:39.656,0:10:43.729
Isso é exatamente o que queremos agora.

0:10:43.729,0:10:49.833
Eu gostei deste amarelo, então vou copiar este código.

0:10:49.833,0:10:54.992
Colar ele aqui ...

0:10:54.992,0:10:57.008
Então o que acontece agora?

0:10:57.008,0:11:04.174
Esta função será executada muitas vezes por segundo. A primeira coisa que ela fará é pintar a tela toda de amarelo...

0:11:04.174,0:11:09.297
Depois vai desenhar uma linha aleatória. Vamos testar.

0:11:09.297,0:11:14.396
Eu não sei se vocês estão vendo, mas no meu computador está indo super rápido.

0:11:14.396,0:11:20.450
Desenhando várias linhas malucas. Pulando para cima e para baixo.

0:11:20.450,0:11:28.610
Eu acho que isto é o suficiente por hoje. Você já pode fazer alguns experimentos.

0:11:28.610,0:11:34.795
Você pode tentar trocar esta 'line' por alguns 'point' aleatórios.

0:11:34.795,0:11:41.926
Você também pode tentar trocar esses valores de fundo para ver o que acontece. Tente descobrir cores diferentes.

0:11:41.926,0:11:52.224
Dando uma olhada na referência você vai perceber que às vezes se usa um número, as vezes se usa três.

0:11:52.224,0:11:57.342
As vezes até imagens. Então você pode experimentar.

0:11:57.342,0:12:04.512
Uma coisa que eu espero mostrar a vocês é que é bom experimentar.

0:12:04.512,0:12:09.601
Procurar no manual, procurar na internet e ficar fazendo mudanças.

0:12:09.601,0:12:17.806
Geralmente você não vai conseguir estragar nada muito sério brincando aqui com Processing.

0:12:17.806,0:12:21.815
Ou vai funcionar ou ele vai acusar um erro.

0:12:21.815,0:12:25.000
E daí você simplesmente acha o erro e o corrige.