Oficina Processing, Ex. 1, parte 2
Esta é a continuação, do tutorial de Processing(www.processing.org).
No tutorial anterior, vimos a criação de um objeto, utilizando o método construtor, e uma método de “auto-exibição”, que consistiam em dois requisitos básicos do nosso objeto. Nesta segunda parte, iremos implementar um método de animação e colisão.
Conforme o objetivo desta aula, nós temos que implementar uma animação, para cada um de nossos objetos. O que vamos fazer é uma função dentro da classe Circulo, para mover cada um de nossos objetos.
Bem, a animação em questão, é algo semelhante a uma bola quicando. Então vamos pensar como fazer esta animação. Primeiramente, o nosso circulo deve ir para baixo, e ao tocar na base na tela, ele deve subir, e ao tocar o topo da tela, ele volta a ir para baixo, e assim infinitamente. Traduzindo esse pensamento para uma linha mais técnica, poderíamos dizer isso da seguinte maneira:
- O objeto inicia de deslocando no eixo y (vertical) no sentido “positivo”
- Toca na base da tela
- muda o deslocamento em sentido “negativo”
Espero que isso tenha ficado compreensível, caso contrário, acho que durante o andamento a coisa ficará mais clara. Então vamos lá, na classe Circulo, a primeira coisa que precisamos fazer é inserir duas novas propriedades, uma chamada ‘direcao’ e outra ‘velocidade’, afinal para qualquer movimento precisamos de uma direção e uma velocidade 
Repare que na variável ‘direcao’, já estou atribuindo a ela o valor 1. Mantenha isto em mente, para mais adiante. A variável ‘velocidade’, não possui um valor previamente atribuído, isso porque eu quero atribuir valor a ela via método construtor, assim poderemos alterar valores para cada objeto que instanciaremos futuramente.
Agora no método construtor teremos mais um parâmetro para tratar:
Com essas duas variáveis na mão, vamos fazer a função de movimentação. Vou chamar essa função de mover(). Primeira coisa que faremos, é programar que o objeto se mova para baixo infinitamente.
O que essa função está fazendo é incrementar(”aumentar”), o valor do y, que é usado para o desenho da ellipse(observar função exibe()), com uma formulazinha onde a velocidade vezes a ‘direcao’, é somada ao valor do y, ou seja:
- no primeiro frame, y vale 100.
- quando utilizarmos a função mover(), o y receberá o incremento do valor de velocidade X ‘direcao’, ou seja passará a valer 103 (assumindo que a velocidade receba o valor 3).
Para que essa alteração seja visível, vamos atualizar o código da função setup() e da função draw():
Repare que no método construtor do objeto circ, estou mandando um quarto parâmetro, 3, que será atribuído à velocidade. E na função draw(), repare que temos que chamar a função mover(), do circ. Ou seja, a cada vez que a função draw() é executada, primeiro será exibido o circulo, e então, o seu centro será deslocado(circ.mover()), e no próximo frame, esse deslocamento será percebido como uma animação.
Se você preferir, é possível fazer a chamada da função mover(), de dentro da função exibe() que está na classe Circulo, o resultado será o mesmo.
Finalmente vamos fazer as colisões com a base e o topo da tela.
Vamos adicionar uma estrutura de decisão( uma cláusula if ) na função mover(), para se a base do circulo for igual a base da tela, a direção( 1 ) será multiplicada por -1. Dessa forma, aquela continha que deslocava o centro (Y) do objeto para baixo, começará a deslocá-lo para cima.
Você deve ter reparado que essa animação deixou um rastro, como uma trajetória do nosso circulo, para acabar com isso, coloque a ordem de background() na função draw():
CLIQUE DO MOUSE
Agora vamos fazer o seguinte, criar uma simples efeito de “interação”, fazer o circulo clicável e ao ser clicado, modar de cor, para um tom aleatório.
No Processing, um click de mouse é entendido como um evento( não vou entrar em grandes detalhes do que é um evento, no momento basta compreender que um click de mouse, ou uma tecla do teclado pressionada são eventos do sistema operacional ), e para tratar alguns tipos de evento, o processing possui funções da linguagem, que são as funções de evento.
Para eventos do mouse nós temos as seguintes funções:
mouseClicked() = quando algum botão do mouse é pressionado
mousePressed()= quando algum botão do mouse é pressionado
mouseReleased()= quando algum botão do mouse deixa de ser pressionad
mouseDragged() = quando algum botão do mouse é pressionado, e o mouse movimentado
Essas funções são programadas junto com as funções draw() e setup(). Veja o exemplo abaixo:
Sempre que o mouse é clicado, imprimimos no console de saída a frase “Evento do mouse”. Fassa o teste acima, usando ao invés de mouseClicked(), as outras possibilidades de funções de evento para o mouse.
Agora façamos o seguinte, vamos imprimir na saída de console as coordenadas x e y do mouse, daca vez que o mouse for clicado. Teremos que usar as variáveis mouseX e mouseY, a coisa vai ficar assim:
E a saída de console será semelhante a isto:
Cada uma dessas linhas no console, são as posições do mouse a cada clique. Essa informação vai ser crucial para fazermos com que nosso objeto reaja ao clique.
Agora que temos as coordenadas de cada clique do mouse, podemos criar uma função na nossa classe para verificar, se o clique aconteceu dentro da área do circulo. Isso é super fácil, basta compararmos a posição do clique, com as coordenadas do circulo. O que é necessário se testar, é se o clique aconteceu dentro da área de alcance do raio da ellipse, observe o desenho abaixo:
Esse desenho ilustra um cálculo para medir a distância entre dois pontos. Para fazer esse processo, o Processing nos fornece algumas ferramentas para facilitar a nossa vida, entre elas vamos ver o objeto PVector.
O objeto PVector, é na verdade um vetor. Muitas vezes um vetor e um ponto, são representados da mesma forma, e muitas vezes são utilizados da mesma forma, porém convém lembrar que um vetor deve ser entendido sempre como uma linha, mesmo que sua representação possua apenas duas coordenadas, ele ainda é uma linha com inicio na origem do desenho. Essa propriedade do vetor ser uma linha nos permite uma série de possibilidades, entre elas o cálculo rápido de distâncias.
Vamos então adicionar à classe Circulo, dois objetos do tipo PVector, o v_centro e o v_click, que serão dois vetores, um para o centro do circulo(v_centro) e outro para a coordenada do click(v_click):
Esses objetos só entrarão em funcionamento quando o mouse clicar na tela. Agora é necessário criar uma função para verificar esse processo, a função click(). A função click() irá criar os dois vetores, e comparar a distância entre eles.
O percurso da função é o seguinte:
- atribui x e y do circulo ao vetor v_centro
- atribui as coordenadas do mouse (mouseX e mouseY), ao vetor v_click
- compara a distância entre o v_centro e o v_click( v_centro.dist(v_click) ), e se for menor que o raio(diametro/2), imprime no console “O clique aconteceu dentro do círculo”.
Veja os resultados do console:
Agora que o clique está funcionando, que tal fazermos com que o círculo mude de cor a cada clique? Mas antes disso nós precisamos inserir alguma cor no nosso objeto, porque até agora ele está trabalhando com o padrão do Processing, ou seja, tons de cinza.
Então nós inserimos uma variável do tipo color, na nossa classe, que será então a cor do nosso objeto:
Então lá na função exibe(), iremos colocar uma ordem para que o Processing desenhe nosso círculo com a cor que queremos:
Agora sim, podemos mudar de cor porque temos uma cor inicial. Para fazer tal mudança criaremos a função mudaCor(), abaixo:
tudo que esta função faz é escolher cores de forma aleatória, com valores entre 0 e 255 ( random(0,255) ) para cada um dos tons que compõe o sistema de cores RGB.
Agora tudo que precisamos fazer, é chamar esta função a partir da função click():
Pronto, agora só restam alguns detalhes finais!
FINALIZANDO
Bem, agora que a nossa classe “Círculo” está completa, só faltam alguns toques finais para acabarmos o exercício. Abaixo você pode ver as alterações finais:
A primeira coisa a se notar é que agora estamos trabalhando não mais com um único objeto circ, e sim com array de objetos circ, e neste array temos 8 objetos. Isto nos força a várias alterações no nosso código.
A primeira alteração está na primeira linha. Antes onde declarávamos apenas um objeto, agora declaramos um array:
Circulo[] circ = new Circulo[8];
Quando declaramos um array, declaramos de forma muito parecida a uma variável comum, com a diferença que colocamos um par de colchetes ao fim do tipo do objeto, Circulo[] circ .Nesta linha ainda completei dizendo a quantidade de objetos que este array irá abrigar, new Circulo[8], neste caso 8 objetos.
Com essa alteração agora temos que nos preocupar com a “chamada dos objetos”, ou seja, agora que estamos trabalhando com vários objetos dentro de um array, temos que construí-los um a um, e também chamar a função exibe(), mover() e click(), de cada um deles. Para facilitar nossa vida usamos loops for.
Observe na função setup(), que foi criado um loop, para construir cada um dos objetos do array. O mesmo acontece na função draw(), para chamar a função exibe() e mover() de cada um dos objetos.
Bem, encerro aqui esse exercício, qualquer dúvida é só postar uma mensagem.
Abras.
