Visualize serial data 1

Visualizing the Data Stream
Now that the data is coming through, we’ll visualize it in a more interesting format. The values coming in directly from a sensor are often erratic, and it’s useful to smooth them out by averaging them.

import processing.serial.*;
Serial port; // Create object from Serial class
float val; // Data received from the serial port
int x;
float easing = 0.05;
float easedVal;
void setup() {
size(440, 440);
frameRate(30);
smooth();
String arduinoPort = Serial.list()[0];
port = new Serial(this, arduinoPort, 9600);
background(0);
}
void draw() {
if ( port.available() > 0) { // If data is available,
val = port.read(); // read it and store it in val
val = map(val, 0, 255, 0, height); // Convert the values
}

targetVal = val;
easedVal += (targetVal – easedVal) * easing;
stroke(0);
line(x, 0, x, height); // Black line
stroke(255);
line(x+1, 0, x+1, height); // White line
line(x, 220, x, val); // Raw value
line(x, 440, x, easedVal + 220); // Averaged value
x++;
if (x > width) {
x = 0;
}
}
This sketch uses the easing technique. Each new byte from the Arduino board is set as the target value, the difference between the current value and the target value is calculated, and the current value is moved closer to the target. Adjust the easing variable to affect the amount of smoothing applied to the incoming values.

Leave a comment

Your email address will not be published. Required fields are marked *