Aprenda Programação 3: Criando uma animação, usando random()

Uma rápida recapitulação. O que acontece se esquecemos um ponto-e-vírgula no fim da linha? Uma descrição mais detalhada da tela como uma tabela de pontos, com centenas de colunas e linhas. Nós vamos testar a função random() para fazer nosso programa gerar imagens diferentes toda vez que for rodado. Finalmente nós usamos a função draw() e background para animar as linhas e mudar a cor de fundo.

Vamos recapitular o que vimos até agora.

Nós agora saber usar dois comandos. Um é chamado 'point', o outro é 'line'.

E nós sabemos que depois de digitar esses comandos temos que por algo entre parênteses.

Uma sequência de valores separados por vírgulas.

Algumas vezes, como neste caso, são somente dois valores...

'line' precisa de quatro valores.

No final da linha é preciso haver um ponto-e-vírgula para indicar ao computador que a linha acabou.

Vamos tentar rodar o programa sem ele e ver o que acontece.

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

Isso mesmo. Esta parte é um pouco difícil de entender.

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

E agora tudo funciona.

Depois nós aprendemos algo sobre a tela, como esta pequena tela que temos aqui.

Ela parece ter 100 pontos de comprimento por 100 pontos de altura.

Eu vou explicar um pouco mais sobre a tela neste desenho.

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

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

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

Dependendo do tamanho da sua tela você pode ter 1280 ou talvez 1024 colunas.

Estando em um telefone celular você terá menos resolução. Talvez seja 400.

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

Então para desenhar um pixel é preciso saber qual é a coluna e a linha que estamos procurando.

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

... desta forma você pode escolher qual pixel da tela você quer iluminar, ou mudar de cor.

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

... porque toda vez que rodamos o programa recebemos o mesmo desenho.

Seria legal se algo estivesse mudando. Talvez você possa adicionar alguma aleatoriedade.

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

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

Apertando ctrl+f, na maioria dos navegadores, você pode procurar por algo na página...

... então nós vamos digitar 'random' aqui. Ok.

Eu vejo algumas coisas sobre 'random'. Parece que temos 5 funções que fazem algo.

Talvez esta última, vamos dar uma olhada em 'random'.

Aqui temos alguns exemplos. Eles provavelmente parecem meio complicados no momento.

Vamos ler a descrição. "Gera números aleatórios. Cada vez que a função random() é chamada..."

"... ela retorna um valor inesperado dentro do intervalo especificado. Se um parâmetro for passado para a função ...

ela irá retornar um número 'float'... " O que é um número 'float'? Nós ainda não sabemos...

Mas vamos observar como é usado aqui. 'random(superior)' ou 'random(inferior, superior)'.

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

Isso parece divertido.

Então ao invés de desenhar a mesma coisa o tempo inteiro.

Nós podemos desenhar linhas aleatórias. Podemos trocar todos esses números...

... por alguns valores aleatórios.

Vamos começar substituindo estes últimos dois '99' por exemplo.

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

... algum lugar aleatório na tela.

Tome cuidado com esses parênteses.

Quando você põe o cursor aqui ele ilumina o outro parêntese correspondente.

Isso é porque todo parêntese aberto deve ser fechado.

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

Você pode botar uns espaços a mais para ficar mais claro.

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

Vamos rodar o programa e ver o que acontece.

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

E se eu rodar de novo? Um resultado diferente.

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

Vamos mudar os primeiros dois números com outros aleatórios.

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.

Oh que conhecidência! Ficou totalmente na vertical!

Toda vez que eu rodo o programa ele vai desenhar uma linha aleatória.

Uma coisa legal de Processing é que é bem fácil de fazer animações.

Eu vou deletar esses pontos aqui e deixar só a linha.

Deixe-me lembrar como faço isso... é 'void draw()'.

Vamos ver se funciona e depois eu explico o que faz.

Uau! Isso é um montão de linhas!

Está tudo se tornando preto.

O que está acontecendo?

Isto é uma coisa legal de Processing. Claro que em outras linguagens você pode fazer gráficos e desenhar...

... mas geralmente vai ser muito mais complicado que isto.

Aqui com apenas duas linhas de código nós estamos fazendo esta animação.

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

O que isto significa?

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

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

Bem, é isto que 'draw' está fazendo aqui.

Você só precisa saber que qualquer coisa posta dentro deste 'void draw() {}'...

... todas linhas de código ali dentro vão ser rodadas muitas vezes por segundo.

É por isto que ele está desenhando linhas aleatórias muitas vezes por segundo. Então quando você roda o programa ...

Porque não apagamos nada, a tela está se tornando lentamente preta.

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

Este será o último comando que eu vou explicar nesse vídeo.

Se chama 'background'.

Vamos até o manual e consultar ele. Usando 'ctrl+f', procurando por 'background'.

Aqui temos alguns exemplos. Parece que 'background(51)' faz um fundo de tela cinza.

Se nós usarmos esses números ele faz um fundo amarelo...

... parece até que podemos usar uma imagem como fundo de tela.

A função 'background' muda a cor usada para o fundo da tela do Processing.

A cor padrão do fundo é cinza claro. Nós já notamos isso.

Se nós rodarmos de novo podemos ver ... oh o que foi que eu quebrei?

Me desculpem, eu tinha aqui esse 'background()' que ainda não acabei.

Ok, vamos rodar. Você pode ver que o fundo é cinza claro.

O que mais diz aqui?

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

Isso é exatamente o que queremos agora.

Eu gostei deste amarelo, então vou copiar este código.

Colar ele aqui ...

Então o que acontece agora?

Esta função será executada muitas vezes por segundo. A primeira coisa que ela fará é pintar a tela toda de amarelo...

Depois vai desenhar uma linha aleatória. Vamos testar.

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

Desenhando várias linhas malucas. Pulando para cima e para baixo.

Eu acho que isto é o suficiente por hoje. Você já pode fazer alguns experimentos.

Você pode tentar trocar esta 'line' por alguns 'point' aleatórios.

Você também pode tentar trocar esses valores de fundo para ver o que acontece. Tente descobrir cores diferentes.

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

As vezes até imagens. Então você pode experimentar.

Uma coisa que eu espero mostrar a vocês é que é bom experimentar.

Procurar no manual, procurar na internet e ficar fazendo mudanças.

Geralmente você não vai conseguir estragar nada muito sério brincando aqui com Processing.

Ou vai funcionar ou ele vai acusar um erro.

E daí você simplesmente acha o erro e o corrige.