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.
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
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? 
Forte abraço!