Criando gráfico de linha com processing

Fala galera, a quanto tempo não posto aqui hehe.

Hoje vo mandar um tutorial bem rápido aqui. Que serve pra mim também caso eu precise futuramente.

É mais um famigerado link entre arduino e a linguagem processing.

Nesse pequeno tutorial vou mostrar como fazer gráficos em tempo real de uma sequencia de valores e ainda atualizar o valor em tempo real na lista.




No arduino é bem simples. Apenas vamos ler um sensor analógico e imprimir o resultado na serial:
----------------
void setup(){
pinMode(A0,INPUT);
Serial.begin(9600);
}
void loop(){
int valor = analogRead(A0);
Serial.println(valor);
delay(200);
------------------------------------------

Pronto, nada mais que isso. Agora vamos ao nosso processing:
--------------
import processing.serial.*;
Serial port;
float xanterior=0;
float x =5;
float yanterior=0;
float y=0;
float valor=0;
void setup(){
  size(600,600);
  background(0);
  port= new Serial(this,"/dev/ttyACM0",9600);
}
void draw(){
  String dados= port.readStringUntil('\n');
  if(dados!=null){
    y=float(dados);
   
    y=map(y,0,1023,0,200);
    stroke(255,0,0);
    line(0,200,width,200);
    stroke(0,255,0);
    line(0,300,width,300);
    stroke(0,0,255);
    line(0,400,width,400);
    stroke(255);
    valor=y/2;
      y=400-y;
   
    line(xanterior,yanterior,x,y);
    xanterior=x;
    x=x+5;
    yanterior=y;
  textSize(24);
  textAlign(CENTER);
  text("sensor:",140,130);
   fill(0);
   rect(190,100,150,40);
   fill(255);
  text(valor,250,130);

    if(x>width){
      xanterior=0;
      x=0;
      yanterior=0;
      y=0;
      clear();
    }

  }
}
-------------------

No código do processing criamos 4 variaveis, o x atual, yatual,xanterior,yanterior, que vao receber as corrdenadas geofraficas x e y respectivamente.

O código começa mesmo com o "string dados" que capta as informações da porta serial. Depois verificamos através de um if se o valor não é nulo(para evitar erros de comunicação);

Validada a verificação, usamos a função map do processing,que é parecida com a do arduino, pra converter os valores de 1023 para 200 e, no meu caso. Usei a função line para criar 3 marcas no eixo x, que seria os limites inferiores e superiores e o meio.

O line funciona assim:
line(posição inicial de x, posição inicial de y, posição final de x, posição final de y);
o comando stroke altera a cor da linha para a cor desejada.

Sabendo disto, apenas implementamos uma função para que o valor de xfinal atualize a cada loop e o x inicial carregue o valor do xfinal do loop anterior. Já y, como a função tem a origem no canto superior esquerdo. precisamos subtrair o valor do y para um ponto que escolhermos na tela.
No meu caso eu decidi que a linha central ficaria a 400 pixels da borda superior, então y=400-y.


Agora um gancho para que os valores fiquem mostrando. Se usarmos a função clear, perderemos todos os dados do gráfico a cada atualização, porém se não mudarmos o leitor do dado atual ficará "bagunçado" por que os pixels tão atualizando a cada loop, o que fazer?

Eu coloquei uma "mascara", um retangulo preto que fica exatamente na mesma posição da atualização do valor do sensor. Assim, em cada loop, o retangulo preto apaga o pixel do valor anterior e o pixel do valor atual é atualizado encima do retangulo.

Pra finalizar, a imagem do arquivo no processing. E até a próxima: