Introdução ao Processing

Processing é uma linguagem de programação destinada a designers e ilustradores. Foi criada no MIT, e é na verdade um subset da linguagem Java, mas com algumas facilidades destinadas a produção de peças gráficas, animações, interações etc.

Essa linguagem é muito fácil de aprender assim como a linguagem do Arduino que é a base da linguagem C++. Sua interface é muito parecida com a IDE do Arduino. Podemos utilizar o Processing para coletar as informações da placa do Auduino e mostrá-las na tela do computador. Caso ainda não tenha o programa, faça o download do Processing de acordo com seu sistema operacional.

Vamos começar o estudo deste programa fazendo algo simples, abrindo um exemplo pronto para vermos o que este programa é capaz. Clique em Arquivo > Exemplos... > Basics > Input > Constrain. Após o código ser carregado na tela, clique no botão Executar. Deve abrir uma nova tela, pequena, cinza com uma bola branca no canto superior esquerdo. Coloque o mouse sobre a tela e fique mexendo o ponteiro do mouse dentro desta nova tela e percebemos que a bola branca se movimenta junto com o mouse.

Faça agora o seguinte teste, mude os valores em pixels de size(640, 360) para size(1920,1080). Clique no Executar e veja que a nova tela será bem maior.

Utilizaremos agora o Processing com um programa bem simples no Arduino. Faremos acender um LED usando a tela do computador. Para fazer isso, primeiro temos que colocar um código no Arduino que entenda que ao receber um comando deve acender um LED verde ou um LED vermelho.

Após a montagem desse pequeno circuito, carregue o seguinte código no Arduino:

 1  import processing.serial.*;

 2  boolean botao = true;

 3  Serial port;

 4  void setup()

 5  {

 6      println(Serial.list());

 7      port = new Serial(this, Serial.list()[0], 9600);

 8      size(400, 400);

 9  }

10  void draw()

11  {

12 

13      ellipse(200, 200, 150, 150); /* O dois primeiros valores são

14      as coordenadas x e y, os dois seguintes são o eixo maior e o

15      eixo menor que quando iguais forma um cículo.*/

16  }

17  void mouseClicked()

18  {

19      // if (value == 0)

20      if(botao == true)

21      {

22          fill(255, 0, 0); // Cor vermelha

23          port.write('V');

24          // port.write('v');

25          botao = false;

26      }

27      else

28      {

29          botao = true;

30          fill(0, 255, 0); // Cor verde

31          // port.write('E');

32          port.write('e');

33      }

34  }

 

Após carregar o código, verifica-se que quando digitamos a letra 'V', acende o LED verde e quando digitamos a letra 'E' acende o LED vermelho. Feito isso, seguiremos agora para a parte do Processing.

Crie um novo arquivo no Processing com o seguinte código:

 1  import processing.serial.*;

 2  boolean botao = true;

 3  Serial port;

 4  void setup()

 5  {

 6      println(Serial.list());

 7      port = new Serial(this, Serial.list()[0], 9600);

 8      size(400, 400);

 9  }

10  void draw()

11  {

12 

13      ellipse(200, 200, 150, 150); /* O dois primeiros valores são

14      as coordenadas x e y, os dois seguintes são o eixo maior e o

15      eixo menor que quando iguais forma um cículo.*/

16  }

17  void mouseClicked()

18  {

19      // if (value == 0)

20      if(botao == true)

21      {

22          fill(255, 0, 0); // Cor vermelha

23          port.write('V');

24          // port.write('v');

25          botao = false;

26      }

27      else

28      {

29          botao = true;

30          fill(0, 255, 0); // Cor verde

31          // port.write('E');

32          port.write('e');

33      }

34  }

Veja que o código é pequeno e simples. Na primeira linha de código falamos para o Processing que iremos utilizar comunicação serial. No setup do programa é feito uma leitura de todas as portas seriais encontradas pelo computador e o programa sozinho consegue encontrar a porta do Arduino e fazer a devida conexão (desde que a porta COM do Arduino seja a primeira na lista de portas COM do computador). Esses comandos nos poupam algum tempo de programação por fazer tudo de maneira automática.  
Seguindo o programa, chegamos ao bloco void draw(). Primeiramente, usamos o comando ellipse(200, 200, 150, 150). Este comando serve para criar uma elipse na tela gerada pelo programa. Os dois primeiros números (200, 200) servem para dizer a localização nas coordenadas x e y de onde a elipse começa a ser desenhada. Já os números seguintes (150, 150) é a largura e a altura que correspondem aos eixos da elipse, mas como nesse caso os dois eixos são iguais, obtém-se uma circunferência de tamanho 150 de diâmetro com centro em (200, 200). O próximo comando é o fill(), que pinta a figura desenhada de determinada cor. O comando fill(255, 0, 0), representa a cor vermelha e fill(0, 255, 0) representa a cor verde. A cor apresentada na circunferência indica a cor desejada, ou seja, quando clicamos na cor, o correspondente LED acende e a circunferência fica na outra cor.

Agora, aperte o comando Executar do Processing e aparecerá logo na tela um quadrado com um círculo no meio que, quando clicamos com o mouse, o mesmo muda de cor. Ou seja, se a cor indicada é a vermelha e então clicarmos nela, o LED vermelho acenderá e em seguida fica verde, se clicarmos novamente no círculo verde, o LED verde acende e o vermelho apaga.

Há outras maneiras que podemos utilizar com o mouse,  posição x e y do ponteiro e qual botão do mouse pressionado. Também, podemos utilizar comandos vindos do teclado. Na  gravação de dados, podemos gerar do Processing arquivos de texto com dados vindos de sensores ligados ao Arduino.

Com isso, concluímos que o Processing é uma espetacular ferramenta para projetos com Arduino deixando-os muito mais bem apresentados.