Como utilizar o Processing com Arduino: Parte 2

Olá tudo bem? Hoje vamos continuar a nossa série de post sobre como utilizar o processing com arduino. Hoje iremos desenvolver uma aplicação muito bacana com o processing e um led RGB conectado ao Arduino. Quer saber o que é? Então me acompanhe!

Mas antes de começarmos, é importante dizer que alguns conceitos que serão trabalhados aqui, já foram apresentados e explicados no primeiro post dessa série sobre processing + arduino. Assim, caso você não consiga acompanhar as explicações neste post, peço que volte no primeiro para poder entender toda a explicação. Beleza?

Para te ajudar estou deixando o link do primeiro post para você:

• Como utilizar o Processing com Arduino: Parte 1

Continuando, no projeto de hoje vamos estar trabalhando com a parte de hardware e programação gráfica. Assim, eu resolvi trazer para você hoje, mais um exemplo de como podemos utilizar a análise de imagens para poder controlar o estado de algum hardware.

Dessa forma, hoje o hardware que estaremos utilizando para poder controlar o seu estado de saída será o led RGB. Este led é um tipo especial, pois com ele conseguimos representar basicamente qualquer modelo de cores.

Funcionamento do Led RGB

Basicamente, este led pode trabalhar de dois tipos diferentes de ligação, “catodo comum” ou “anodo comum”. A diferença entre esses tipos de ligação pode ser observada na imagem abaixo:

Fonte: Arduino.cc

Observe que o segundo pino da esquerda para direita, altera de positivo para negativo de acordo com a configuração do led. Dessa forma, quando o seu led for de configuração catodo comum, basta ligar esse pino diretamente ao GND do arduino. Caso não seja, basta ligar diretamente ao 5V do arduino.

Por fim, antes de começarmos a construção do nosso projeto de hoje, vamos buscar entender o que iremos desenvolver né? Mas, resumidamente, o que iremos fazer é pegar a imagem abaixo e reproduzir no led RGB a cor na qual estamos clicando o mouse naquele momento.

Fonte: AutoCore Robótica

Materiais Utilizados

• 1x Arduino UNO
• 1x Led RGB
• 1x Protoboard 830 furos
• 2x Resistores 100 Ohms
• 1x Resistor de 150 Ohms
• Alguns jumpers

Esquema de Ligação do Projeto Processing com arduino

Antes de iniciar toda a ligação dos componentes, certifique que seu Arduino não está ligado ao cabo de alimentação combinado? O esquema de ligação está logo abaixo:

Fonte: AutoCore Robótica

Código do Arduino Comentado

/* ========================================================================================================
 
  Projeto: Controle de led RGB através do Processing
  Autor: Danilo Nogueira
  Data: 01/11/2018
  Domínio Público

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

// --- Declarando as variáveis para os pinos de cada cor ---
const int blue_pino  = 9;     //LED azul no pino 9
const int green_pino = 10;    //LED verde no pino 10
const int red_pino   = 11;    //LED vermelho no pino 11

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

// --- Variáveis para armazenar o valor enviado de cada uma pelo Processing ---
int bval = 0;
int gval = 0;
int rval = 0;

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

// --- Iniciando o setup() ---
void setup()
{
  //Iniciando a interface serial com velocidade de comunicação = 9600
  Serial.begin(9600);

  // Definindo todos os pinos do led RGB como saída
  pinMode(blue_pino,  OUTPUT);  //Inicializa o pino 9 como saída
  pinMode(green_pino, OUTPUT);  //Inicializa o pino 10 como saída
  pinMode(red_pino,   OUTPUT);  //Inicializa o pino 11 como saída
}

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

// --- Iniciando o loop() ---
void loop()
{
  //Executa enquanto existir algum dado sendo enviado pelo Processing
  while(Serial.available() > 0)
  {

   // Armazenando o valor de cada um enviado pela serial
    bval = Serial.parseInt();  //Primeiro inteiro válido
    gval = Serial.parseInt();  //Segundo inteiro válido
    rval = Serial.parseInt();  //Terceiro inteiro válido
    
    if(Serial.read() == '\n')  //Término de transmissão
    {
      //Atualiza valor dos LEDs
      analogWrite(blue_pino,  bval);
      analogWrite(green_pino, gval);
      analogWrite(blue_pino,  bval);
    }
  }
}

// =================================================== FIM ================================================

Agora basta realizar o upload da pasta com a imagem para o projeto mais o código abaixo e realizar o upload em seu Processing, para que o led RGB comece a mostra as cores:

Código do Processing Comentado

/* ========================================================================================================
 
 Projeto: Controle de led RGB através do Processing
 Autor: Danilo Nogueira
 Data: 01/11/2018
 Domínio Público
 
 // ======================================================================================================== */

// --- Importando a biblioteca da serial do Processing ---
import processing.serial.*;

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

// --- Declarando um objeto da porta serial ---
Serial porta;

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

// --- Declarando um objeto imagem para chamar a imagem colorida ---
PImage img;

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

// --- Iniciando o setup() ---
void setup()
{
  // Criando uma janela com tamanho (x,y)
  size(640, 256); 

  // Aqui é carregado a imagem do plano de fundo com o nome "color"
  img = loadImage("color.jpg");

  // Ativa a comunicação serial com velocidade = 9600
  porta = new Serial(this, "COM4", 9600);
}
// ========================================================================================================

// --- Iniciando o draw() --- 
void draw()
{
  background(0);    //Fundo preto
  image(img, 0, 0);   //Vamos sobrepor a imagem sobre o fundo preto
}
// ========================================================================================================

// --- Iniciando a função que vai captar o clique do mouse ---
void mousePressed()
{
  // Aqui ele vai identificar o endereço na imagem onde o mouse pressionou
  color c = get(mouseX, mouseY);

  //Depois ele vai extrair os valores de 'c' e dizer qual o valor de Red, Green e Blue
  String cores = int(red(c))+","+int(green(c))+","+int(blue(c))+"\n";

  //Vai imprimir os valores na parte de baixo do processing
  print(cores);

  //Envia valores para a placa Arduino e faz acender o led
  porta.write(cores);
}
// ================================================= FIM ==================================================

Analisando o Código mais a Fundo

Processing

Inicialmente, vamos analisar analisar o código do Processing. Pois, neste projeto, ele estará enviando todas as informações necessárias para poder controlar o led RGB. Mas, estarei abordando apenas alguns comandos novos, mas caso você não entenda os outros comandos, eu expliquei sobre eles no primeiro post desta série, basta clicar no link abaixo:

• Como utilizar o Processing com Arduino: Parte 1

Assim, vamos começar pela função mousePressed():

void mousePressed()

Essa função vai ser acionada toda vez que o botão do mouse for pressionado. Dessa forma, quando pressionarmos o ponteiro do mouse sobre qualquer lugar da imagem, essa função será chamada e o que está dentro dela irá acontecer.

Partindo para o próximo comando, temos o seguinte código:

color c = get(mouseX, mouseY);

Nessa linha de código é onde vai ocorrer o armazenamento do valor da cor a qual clicamos. Ou seja, na variável ‘c’ do tipo color, será armazenado o local na tela onde o ponteiro do mouse foi pressionado. Esse local na tela será transformado em uma cor específica, a qual será desmembrada para ser usada ao longo do código.

Seguimos então para a próxima linha de código:

String cores = int(red(c))+","+int(green(c))+","+int(blue(c))+"\n";

Perceba aqui que temos uma variável (cores) do tipo string. Além disso, os valores de red, green e blue estão divididos por vírgulas correto? Por fim, temos um “\n” terminando a linha do comando.

Mas o que isso significa? Basicamente, quando clicarmos com  o ponteiro do mouse na tela, isso será transformado em uma cor, a qual tem um valor de red, green e blue correto? Então é exatamente isso que a variável cores está armazenando, um valor inteiro para red, green e blue. Mas lembre-se que eles estão separados por vírgulas e terminando com um “\n”.

Arduino

Por fim, entrando agora no código do nosso Arduino, vamos ter o seguinte bloco de comandos:

bval = Serial.parseInt();  //Primeiro inteiro válido
gval = Serial.parseInt();  //Segundo inteiro válido
rval = Serial.parseInt();  //Terceiro inteiro válido

Aqui é onde conseguimos compreender o porquê separar os valores de red, green e blue. Pois o comando Serial.parseInt() irá retornar o primeiro valor inteiro que ele encontrar. Assim, como temos três valores inteiros separados por vírgulas, podemos utilizar esse comando três vezes e armazenar os valores na variáveis corretas.

Resultado do Projeto

Por fim, deixo para você um vídeo do canal da AutoCore no Youtube. Nele, estamos mostrando o resultado do código desenvolvido.

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!