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 =; // 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 Reply

The best way to predict the future is to invent it (Alan Kay)