Paulo Barbeiro

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.

Processing, Tutoriais arte tecnologia, arte-software, aula, curso, português, Processing, processing.org, programação, Tutoriais, tutorial

Esta série de posts é um resumo das aulas que eu ministrei no SESC Santana, sobre Processing, durante o mês de Novembro.

O curso tinha por principio básico abordar o processo de criação e de produção de um ’software art’, e a crescente utilização de conhecimentos de programação no espaço da criação artística.

Estes posts podem ser seguidos como tutoriais, uma vez que irão focar na produção da aplicação criada durante a oficina. Aqui há um link para que você possa ver o resultado final, lembrando que para visualizar o conteúdo do link, é necessário o plugin JRE (Java Runtime Enviroment ).

Antes de seguir, recomendo que vc dê uma olhadinha nestes links( link1, link2), que são tutoriais bem mais básicos que caso vc já tenha conhecimentos em programação, eles lhe darão um panorama da sintaxe básica do Processing, caso vc não tenha conhecimentos em programação ou esteja iniciando, eles servirão como base para compreensão de certas coisas de suma importância, para que vc possa prosseguir aqui e entender bem do que estou falando.

Se você viu a aplicação que iremos desenvolver, reparou que se trata de um ambiente 3D, com objetos clicáveis, exibição de textos e imagens. Antes que você me chame de louco, por fazer um curso de iniciação utilizando tais recursos, vou me defender. Primeiro, como diz aquela “pérola” do cancioneiro popular brasileiro, “Se tá com medo, porquê veio?”, isso é quase que uma filosofia pessoal, então… fui para as cabeças. Segundo, não acho que programação 3D, em nível básico, seja tão complicada assim, e ela proporciona resultados bem atraentes, então… pq não? Terceiro, e último, para se chegar ao resultado final, percorri muitos passos com os alunos, para ir construindo a familiaridade aos pouco e de forma sólida. E é dessa forma que estou pensando em escrever esses capítulos.

Primeiro começando com orientação a objeto; depois introduzindo princípios 3D; criando novas dificuldades no 3D; um tutorial específico para “picking” (ou select mode), que é a forma de se clicar em objetos 3D; e finalmente finalizando o projeto.

Mãos à obra.

Orientação a objetos.

Vamos aqui usar um exemplo bem simples de como criar um objeto, e para que ele serve.

Algo que eu gosto de fazer, é ao inicio de uma aula mostrar qual o objetivo a ser atingido. Acredito que dessa forma, fica melhor de ser entender a lógica que será empregada, afinal é esse também os passos que se seguem antes de qualquer projeto ser finalizado: o criador imagina e planeja a obra. Ou seja, há sempre alguma pré-visualização, nem que seja mental.

Sendo assim observe o “objetivo” deste tutorial.

Observando o nosso objetivo, você pode ver que faremos uma cena, com círculos que se movimentam verticalmente, e ao serem ‘clicados’ mudam de cor.

Para tentar simplificar o que é orientação a objetos, … ah, não vou dar nenhuma definição, não. Dá uma pesquisada no Google e na Wikipedia, para achar definições melhores do que eu posso fornecer.

Então vamos pensar com como criar esse bendito objeto, que vou chamar de ‘Circulo’. Em uma visão geral, este circulo terá que realizar algumas tarefas:

- se movimentar para baixo e para cima

- colidir com as extremidades da tela

- checar se recebeu um click

- mudar de cor

- se desenhar na tela
Temo um total de 5 tarefas, geralmente chamamos essas tarefas de funções, e quando as funções estão em um objeto chamamos de métodos; mas isso é super técnico, embora seja bom saber, e começar a ficar familiarizado com esses termos.

Para começar, abra um projeto no Processing, salve. Agora abra as funções setup(), e draw() (eu disse para ler os outros tutoriais, lembra…). Vamos criar a nossa classe ‘Circulo’, só para lembrar que classe não é o objeto em sí, mas sim ela é a definição do(s) objeto(s). Depois da função draw(), vamos começar:

Nesse simples código já temos uma classe. Essa classe Circulo que acabamos de criar, ainda não está em uso. O que nó fizemos até aqui foi simplesmente criar a classe, que é a definição de algum objeto que será instanciado futuramente, aí quando intanciamos, teremos nosso objeto. Vamos fazer isso agora.

Para instanciar algum objeto temos que colocar a seguinte linha de código:

Circulo circ = new Circulo();
[classe][nome_objeto] = new [classe()];

Outro ponto que se deve ter em mente é, onde esse objeto deve funcionar? Ele será trabalhado em várias funções, como a setup() e na draw()? Ou não? Nessa hora é que caímos no que se chama escopo de variáveis. No Processing, se uma variável é declarada dentro de uma função ela só poderá ser trabalhada dentro da mesma função, se você tentar trabalhar com ela em outra função…. surgirá um erro. Para trabalharmos as variáveis e objetos em várias funções, o que é bem comum de acontecer, devemos declarar tais objetos como objetos globais, ou seja, fora das funções. Observe que neste código, a declaração do objeto circ, foi feita antes da função setup():

Nesse código acima:

- declaramos o objeto circ

- na função setup(), alimentamos os valores x, y, e diametro do objeto circ.

- na função draw(), só imprimimos os valores de circ no console.

Aqui nós já temos um objeto, porém muito “primitivo”, ele ainda é incapaz de se desenhar na tela, e ainda por cima temos que alimentar seus valores de forma muito rudimentar. Vamos melhorá-lo criando um método construtor, e um método para que ele possa de desenhar na tela.

Método Construtor

Neste objeto, temos apenas 3 valores, o ‘x’, o ‘y’, e o ‘diametro’. Mas no andar da carruagem, nós iremos ampliar este número de variáveis, e ter que alimentar os valores de cada uma, da forma como está sendo feito no momento… ninguém merece. Para facilitar a construção do objetos é que existe o método construtor, com ele nós daremos os valores das variáveis em uma única linha.

Na classe Circulo, insira o código como demonstrado abaixo:

A coisa vai funcionar de seguinte maneira. O método construtor, sempre tem o mesmo nome da classe! Ele é uma função, que vai receber valores, valores que serão usados para alimentar as variáveis iniciais. Por exemplo, o valor de x; O método irá receber um valor chamado cons_X(float cons_X), esse valor então será atribuído à variável x(this.x), da classe Circulo. Simples não?

Agora temos que implementar isso lá na função setup(), para que ao invés de digitar três linhas de código digitemos apenas uma, que seria a seguinte:

circ = new Circulo(100, 100, 100);

porém podemos fazer mais uma alteração, na declaração do objeto, observe:

Com o método construtor, economizamos trabalho na declaração do objeto (agora apenas Circulo circ;) e na atribuição de propriedades, na função setup() (agora apenas circ = new Circulo(100,100,100); )

Função para Exibição

Agora vamos criar um método que permita ao objeto se desenhar na tela. Da mesma forma que o método construtor, essa alteração será feita primeiro na nossa classe e posteriormente, no código “principal” (chamo de código principal as funções setup() e draw(), bem como algumas funções de eventos do processing que veremos mais adiante).

Na nossa classe, abaixo do método construtor, criamos uma função chamada exibe(), que vai desenhar uma ellipse com as características que passamos em ‘x’ e ‘y’, e o diametro. E agora que nossa classe possuí essa função, todos os objetos instanciados a partir dessa classe, possuirão esse método para se desenhar na tela, tudo que teremos de fazer é chamar esse método na função draw():

void draw(){

circ.exibe();

}

e pronto, nosso objeto está aparecendo na tela.

Antes de prosseguir brinque com os valores do método construtor na função setup(), isso pode te tirar algumas dúvidas.

Qualquer dúvida, lança um comentário aqui abaixo!

até

Processing, Tutoriais arte-software, Processing, processing.org, programação, tutorial