Introduction: ARDUINO + PROCESSING.

Arduino e Processing são ferramentas que te permitem fazer diversas coisas interessantes, quando são combinadas… as possibilidades são praticamente infinitas.

Mas como combinar o Arduino com o Processing e fazer com que eles “conversem” entre si? É isto que vou (tentar) explicar aqui. Ao final deste tutorial, devemos ter um botão que, ao ser pressionado, desenha uma elipse.

Supplies

Primeiro, você vai precisar de algumas coisas:

  1. Arduino Uno / Arduino IDE;
  2. Processing;
  3. Cabos jumper;
  4. Resistor;
  5. Protoboard;
  6. Cabo USB tipo B (para conectar o arduino ao pc);
  7. Botão

Step 1: DOWNLOADS.

Vai parecer óbvio, mas o primeiro passo é conferir se você tem instalado corretamente o software do Arduino e o Processing. A instalação de ambos é bem simples e para ter acesso é só aceder aos links.

Arduino - https://www.arduino.cc/en/software

Processing - https://processing.org/download/

Com tudo instalado, vamos começar primeiro com o Arduino e depois finalizamos com o Processing.

Step 2: ARDUINO.

No Arduino, vamos apenas configurar um botão e obter a informação se o botão foi pressionado ou não e enviar esta informação para o Processing para que algo aconteça lá, como criar uma elipse, no caso deste exemplo.

O código completo deve ser este aqui:

int pinoBotao = 2;
int estadoBotao;
void setup()
{
  pinMode(pinoBotao, INPUT);
  Serial.begin(9600);
}
void loop()
{
  estadoBotao = digitalRead(pinoBotao);
  
  Serial.println(estadoBotao);
  delay(50);
}

Step 3: CONEXÕES.

Para que tudo funcione corretamente, as suas conexões devem estar desta maneira.

Step 4: EXPLICANDO O CÓDIGO (ARDUINO).

Primeiro, começamos por declarar algumas variáveis do tipo “int”. 

int pinoBotao = 2;<br>int estadoBotao;

A variável “pinoBotao” indica o número do pino em que o botão será conectado no Arduino. Neste caso, o pino 2. A variável “estadoBotao” é a variável que irá guardar (mais para a frente) a informação sobre o “estado” deste botão, ou seja, se foi pressionado ou não.

void setup()

Tudo dentro desta função será executado apenas uma vez. É aqui que inicializamos variáveis e definimos os modos dos pinos.

void setup()<br>{
  pinMode(pinoBotao, INPUT);
  Serial.begin(9600);
}

Neste caso, utilizamos “pinMode()” que utiliza dois parâmetros: o pino utilizado e o modo, que pode ser INPUT, OUTPUT.

Declaramos no início do código que a variável “pinoBotao” guarda o valor 2 (que é o número do pino utilizado). E, o modo a ser utilizado será INPUT, que corresponde à "entrada".

Já o Serial.begin() é responsável por iniciar a porta serial. E é através dela e da comunicação serial que o Arduino e o Processing se “conectam”.

void loop()

Como o próprio nome diz, tudo que está escrito aqui é executado em loop.

void loop()<br>{
  estadoBotao = digitalRead(pinoBotao);
  
  Serial.println(estadoBotao);
  delay(50);
}

O “digitalRead()” é responsável por ler o valor de um determinado pino e espera como parâmetro este pino. A função retorna HIGH ou LOW, equivalente a “1” ou “0”.

Depois, definimos que a nossa variável “estadoBotao” vai guardar o valor lido (1 ou 0).

Serial.println(estadoBotao) vai plotar os valores lidos anteriormente na porta serial como texto, ou seja, como “String”. E é sempre acompanhado por uma “nova linha”, indicado por “\n”. Vamos utilizar essas informações depois dentro do Processing.

Depois é só enviar o código para a placa do Arduino.

Step 5: PROCESSING.

O primeiro passo ao abrir o Processing é indicar que você pretende realizar uma comunicação serial. O Processing não assume isso automaticamente, então é você quem precisa ajustar essa parte.

  • É bem simples: só clicar em Sketch > Importar Biblioteca… > Serial.

Isso vai gerar essa linha de código:

import processing.serial.*;

O código completo deve ficar assim:

import processing.serial.*;
Serial myPort;
String val;
int estadoBotao;
boolean botaoPres;
void setup(){
  myPort = new Serial (this, "COM3", 9600);
  myPort.bufferUntil('\n');
  size(500,500);
  background(0);
}
void serialEvent (Serial myPort){
    val = myPort.readString();
    println(val);
    estadoBotao = int(trim(val));
    
    if (estadoBotao == 1){
      botaoPres = true;
    }
    
    else {
      botaoPres = false;
    }
}
void draw (){
  
    if (botaoPres == true){
    ellipse(250,250, 55,55);
    fill(0,255,0);
  }
    if (botaoPres == false){
    background(0);
    }
  }

Step 6: EXPLICANDO O CÓDIGO (PROCESSING).

import processing.serial.*;<br>Serial myPort;
String val;
int estadoBotao;
boolean botaoPres;

Primeiro temos a classe “Serial” que é responsável por receber e enviar dados através de comunicação serial. Definimos o nome “myPort” e a inicializaremos mais pra frente.

Depois, criamos uma variável do tipo "String" que guardará a informação gerada pelo Arduino (lembra que o println plota valores como “String”?).

int estadoBotao é uma variável criada para guardarmos o “estado” do botão, se foi pressionado ou não (1 ou 0).

boolean botaoPres é uma variável do tipo boolean, ou seja, que retorna TRUE ou FALSE e será responsável por verificar se o botão está a ser pressionado ou não e, a partir disso, podemos realizar outras ações. Como, por exemplo, desenhar uma elipse.

void setup()

void setup(){<br>  myPort = new Serial (this, "COM3", 9600);
  myPort.bufferUntil('\n');
  size(500,500);
  background(0);
}

myPort = new Serial (this, "COM3", 9600) serve para “abrir” a porta serial. É aqui que indicamos o nome da porta, taxa de transmissão e etc. É importante saber o nome correto da porta a ser utilizada (que é a mesma utilizada pelo Arduino). No meu caso, é “COM3”.

  • Para checar qual porta está a ser utilizada, basta ir à IDE do Arduino > Ferramentas > Porta.

myPort.bufferUntil('\n') espera que um caractere específico seja lido para só então “chamar” a função serialEvent(), que está logo abaixo no código. No caso, esse caractere é o ‘\n’. (Ele aparece no Serial.println lá do Arduino!)

Depois disso, definimos o tamanho do Canvas com o size(500,500) e a cor de fundo background(0).

void serialEvent()

A função serialEvent() será chamada pelo bufferUntil() e é dentro dela que vamos atribuir algumas coisas.

void serialEvent (Serial myPort){<br>    val = myPort.readString();
    println(val);
    estadoBotao = int(trim(val));
    
    if (estadoBotao == 1){
      botaoPres = true;
    }
    
    else {
      botaoPres = false;
    }
}

val = myPort.readString() diz que variável “val” vai guardar a informação lida pela porta serial, que será do tipo “String”.

println(val) plota no console a informação lida. Se “0” ou “1”.
estadoBotao = int(trim(val)) converte a informação lida que é do tipo “string”, para o tipo “int” e guarda dentro da variável estadoBotao.

Depois, dentro dos “ifs”, determinamos que se o estadoBotao for igual a 1, botaoPres retorna TRUE. Do contrário, FALSE.

void draw()

No void draw() apenas utilizamos essa informação do botaoPres, que retorna TRUE ou FALSE para desenhar a nossa elipse.

void draw (){<br>  
    if (botaoPres == true){
    ellipse(250,250, 55,55);
    fill(0,255,0);
  }
    if (botaoPres == false){
    background(0);
    }
  }

Se retornar TRUE, uma elipse verde é desenhada no centro do canva. Se retornar FALSE, o background volta a ser preto.

Depois é só executar e VOILÀ.

A partir daí dá para ser extremamente criativo e adicionar mais botões (ou outros componentes do Arduino) e fazer coisas mais interessantes!