Como utilizar o Processing com Arduino: Parte 1

Olá tudo bem? Hoje vamos iniciar uma série de posts os quais irão abordar sobre: Processing com Arduino.

Vamos aprender a como mostrar graficamente os nossos projetos e como através da tela do nosso computador, controlar as saídas do Arduino. Vamos nessa?

O que é Processing?

Basicamente, Processing é uma linguagem de programação, totalmente gratuita e de código aberto. Ela foi um projeto iniciado em 2001 por Casey Reas e Ben Fry, ambos ex-membros do Grupo de Computação do MIT Media Lab, tendo como objetivo, desenvolver artes eletrônicas e projetos visuais.

Além disso, ela busca ensinar noções básicas de programação de computadores em um contexto totalmente visual.

A sua instalação é igual a IDE do Arduino, basta realizar o seu download de acordo com o sistema operacional da sua máquina e depois é só executar a instalação e pronto, você já pode começar a criar suas primeiras artes eletrônicas!

Mas você sabia também que já temos no blog um projeto de radar utilizando o Processing? Ainda não viu? Então clica no link abaixo e confira uma aplicação com Arduino utilizando a ferramenta Processing.

• Criando um Radar com Sensor Ultrassônico HC-SR04

Sendo assim, para realizar o seu download, basta clicar na imagem abaixo que você será direcionado a página de download do processing:

Testando o Processing

Para testar se o nosso software está funcionando corretamente, vamos realizar um pequeno “Olá Mundo!” para você começar a compreender como essa ferramenta trabalha.

Assim, ao abrir a IDE do Processing, você vai notar uma certa familiaridade com a IDE do nosso Arduino, o que facilita bastante o nosso trabalho. Com a IDE aberta, digite:

println (“Olá Mundo”);

Observe que no espaço onde aparece os erros do código, tem alguma coisa escrita ali, o que é? Exatamente, é a mensagem que escrevemos!

Agora vamos para outro teste, que tal criar um elipse? E ainda aprender a escrever na janela que abre quando executamos o código? Para isso basta executar o seguinte código:

frame.setTitle ("Nome da Janela");  // Código para colocar nome na janela
size (500,500);  // Tamanho da janela que será aberta
ellipse (250, 250, 150, 150);     // Objeto a ser criado (Elipse) (x, y, Larg, Compri)
text("Controle do Led", 200, 50);  // Texto a ser escrito na tela ("Texto", x, y)

Processing com Arduino

Vamos entrar agora no objetivo do post de hoje, que é mostrar como é realizada a comunicação entre Processing e Arduino. Para isso, precisamos saber de alguns detalhes:

• Primeiro, vamos ter que realizar dois upload de código, um no Arduino e outro no Processing.
• Segundo, realize o upload no Arduino para depois realizar no Processing.
• Os código utilizados no Processing são baseados na linguagem Java.

Além disso, a ideia da comunicação entre Processing e Arduino é basicamente assim: o Processing pode ser utilizado de duas formas, fazendo o Arduino executar determinada tarefa ou atuando como uma representação gráfica e visual daquilo que está acontecendo no seu protótipo em protoboard.

Quando o Processing atua como um agente que vai “comandar” o Arduino, então temos que fazer com que o Arduino apenas realize a leitura da porta serial (onde é feita a comunicação entre eles).

Caso o Arduino receba algum valor, enviado pelo processing, ele realiza determinada função, ou seja, ele só fará uma ação X, ligar um led, por exemplo, se, o Processing mandar o valor correto, caso contrário isso não ocorrerá.

Agora quando o processing atua como uma representação visual daquilo que está ocorrendo na protoboard, temos basicamente o contrário. Agora é o Arduino que vai enviar pela serial o que está acontecendo na protoboard e a partir desse dado enviado, uma imagem (ou uma janela de cores) é mostrada no processing.

Caso contrário, outra imagem (ou uma janela de cores) é mostrada. Sabendo disso, vamos partir para o nosso primeiro exemplo, vamos piscar um Led através do Processing. Então para isso, vamos aos materiais do nosso projeto.

Materiais Utilizados

• 1x Arduino UNO
• 1x Led 5mm
• 1x Resistor 330 Ohms
• Jumper’s

Processing com Arduino – Ligação do Circuito 

Fonte: AutoCore Robótica

Código do Arduino Comentado

Como já mencionei, devemos realizar o upload do código no Arduino primeiro, assim, realize o upload do seguinte código em seu Arduino:

/* ========================================================================================================
 
  Projeto: Utilizando Processing com Arduino Parte 1
  Autor: Danilo Nogueira
  Data: 16/10/2018

// ======================================================================================================== */

// -- Definindo as variáveis --
  int LED = 13;
  int entrada = 0;
// ========================================================================================================

// -- Definindo o Setup() --
  void setup()
  {
    Serial.begin(9600);
    pinMode(LED, OUTPUT);
  }
// ========================================================================================================

// -- Definindo o Loop() --
void loop()
  {
    if (Serial.available() > 0)
    {
      entrada = Serial.read();
    
      if (entrada == '0')
        digitalWrite(LED, LOW);
    
      else if (entrada == '1')
        digitalWrite(LED, HIGH);
    }
  }
// ========================================================================================================

Agora basta realizar o upload da pasta com as imagens dos leds mais o código abaixo e realizar o upload em seu Processing, para que o led conectado ao pino 13 comece a piscar:

Código do Processing Comentado

/* ========================================================================================================
 
  Projeto: Utilizando Processing com Arduino Parte 1
  Autor: Danilo Nogueira
  Data: 16/10/2018

// ======================================================================================================== */

// --- Iniciando a Serial ---
import processing.serial.*;

// ========================================================================================================

// --- Definindo as Variáveis ---
Serial porta;
PImage imagem;
int valor = 0;

// ========================================================================================================

// --- Definindo o Setup() ---
void setup()
{
  frame.setTitle ("Controle do Led");     //Criando a janela
  size (1280,765);     //Tamanho da janela
  
  println("Portas seriais disponíveis:");  //Mostra a lista de postas disponíveis
  println(Serial.list());
  
  String nomePorta = Serial.list()[0];
  porta = new Serial(this, nomePorta, 9600);   //Salva a porta que o Arduino está
  
  imagem = loadImage("led-off.png");    //Carrega a imagem inicial do led
}

// ========================================================================================================

// --- Definindo o Draw() ---
void draw()
{
  fill(0);
  textFont(createFont("SansSerif", 36));
  
  text("Controle do Led", 10, 40);     //Título da janela
  textFont(createFont("SansSerif", 18));  //Fonte utilizada e o seu tamanho
  text("Clique sobre a imagem para acender ou apagar o led.", 10, 80);
  
  // Exibir a imagem carregada
  image(imagem, 250, 120);   //Atualização da imagem do led ao clicar nela
}

// ========================================================================================================

// --- Definindo o mouseClicked() ---
void mouseClicked()
{
  if (valor == 0)    //Verifica se o led está apagado
  {
    valor = 1;
    imagem = loadImage("led-on.png");
    porta.write('1');        //Escreve o numero '1' na serial do Arduino
    println("Enviando: 1");
  }
  
  else
  {
    valor = 0;
    imagem = loadImage("led-off.png");
    porta.write('0');
    println("Enviando: 0");
  }
}
// ========================================================================================================

Analisando o Código

Código do Arduino

No código do Arduino, como sempre, iniciamos definindo o pino que estamos trabalhando e colocamos ele como saída.

Mas além disso, também inicializamos a comunicação serial, a qual é o meio de comunicação entre o Arduino e o Processing.

Logo depois entramos no loop do código, onde nele temos o seguinte código:

void loop()
{
  if (Serial.available() > 0)
 {
  entrada = Serial.read();

  if (entrada == '0')
  digitalWrite(LED, LOW);

  else if (entrada == '1')
  digitalWrite(LED, HIGH);

 }
}

Inicialmente temos um comando if, o qual vai ter a tarefa de checar se algo foi enviado para a serial do Arduino, caso chega alguma coisa na serial, ela será lida através do código:

entrada = Serial.read();

Após essa informação ser lida, ela será armazenada na variável ‘entrada’. Esse valor armazenado será comparado para saber se o led será habilitado ou não. Essa comparação é feito no próximo if o qual verifica se o valor é igual a zero, caso seja, o led é desligado.

Mas caso o valor armazenado seja igual a 1, então o led é habilitado e, se nenhuma dessas condições for verdadeira, o Arduino volta a ler a serial e espera um outro valor.

Código Processing

Inicialização do Código

Primeiro, em todo projeto que vamos utilizar o processing devemos sempre iniciar a comunicação serial, pois é com ela que vamos nos comunicar com o Arduino, dessa forma escrevemos o comando:

import processing.serial.*;

Após de iniciar a serial, vamos definir os tipos de variáveis que vamos utilizar em nosso código. Vamos começar com a variável do tipo Serial:

Serial porta;

Esse comando criou uma variável do tipo Serial a qual vai armazenar qual porta o Arduino está conectado (é aquela COMx, lembra?) e além disso, será por ela que vamos enviar os valores para a serial do Arduino.

Logo depois, foi definido a variável do tipo PImage:

PImage imagem;

Este tipo de variável é utilizada para armazenar imagens. Ou seja, é através dessa variável que vamos colocar imagens na janela do programa. Os formatos de imagens que ela suporta são: .gif , .jpg , .tga e.png .

Além disso, a classe PImage contém campos para a largura e altura da imagem. Contudo, para chamar uma imagem ao programa, devemos utilizar o comando:

imagem = loadImage("nome-da-imagem-salva");

Definindo o Setup

Entrando no void setup() temos a construção da nossa janela inicial do programa através da linha de código:

frame.setTitle ("Controle do Led");
size (800,480);

As linhas que seguem irão mostrar no espaço das mensagens de erro, quais portas estão disponíveis (normalmente aparece só aquela que o Arduino está) e vai armazenar essa porta na variável portaCOM do tipo String:

println("Portas seriais disponíveis:");
println(Serial.list());
String nomePorta = Serial.list()[0];

Logo depois, utilizamos a variável porta criada para guardar a porta do Arduino para que futuramente possamos enviar dados através dela, no comando ela armazena qual porta será utilizada e qual será a velocidade de conexão:

porta = new Serial(this, nomePorta, 9600);

Definindo o Draw

Dentro do draw, que é o void loop do Arduino, é onde vai acontecer todo o efeito de apagar e acender o led no momento que você clicar no led que aparece na tela. Todos os comandos que estão dentro dessa função, irão configurar toda a parte gráfica da janela que abre quando executamos o programa:

fill(0);
textFont(createFont("SansSerif", 36));
text("Controle do Led", 10, 40);

textFont(createFont("SansSerif", 18));
text("Clique sobre a imagem para acender ou apagar o led.", 10, 80);

// Exibir a imagem carregada
image(imagem, 250, 120);

Definindo o mouseClicked()

A função mouseClicked() tem como aplicação, identificar se o botão do mouse foi pressionado e solto, ou seja, foi clicado. Assim, toda vez que clicarmos no led que vai aparecer na tela, a função vai entrar dentro do if. Tal if vai verificar se o led está em posição de ligado ou desligado.

Caso o led esteja desligado (valor == 0) então valor passa a valer 1. Assim, escrevemos na serial do Arduino o valor de 1, para poder ligar o led na protoboard, através do comando:

porta.write('1');

Ou seja, vamos escrever 1 (write) na porta serial que está armazenada na variável porta (que é a porta no Arduino COM-valor-da-porta). Mas, se quando eu clicar no led e ele estiver ligado, então será enviado o valor de 0 na serial e o led será apagado.

Resultado do Projeto

Para terminar, segue o vídeo do nosso canal do Youtube onde mostra o código do nosso projeto de hoje em funcionamento!

Mas e ai? Gostou? Caso tenha ficado algo incompleto para você, comenta abaixo 

Dicas?  Dúvidas?  Idéias de post? Críticas?  Só comentar também! 

Forte abraço!