Data Visualization

For my final project, I am combining my newly learned processing skills with Arduino hardware. Last week, I shared a project where I used an Arduino kit with FSR sensor, LEDs and Arduino code to create a “dimmer.” This week, I used my same dimmer and wrote processing code to be able to create visuals based off of the pressure I apply on my FSR sensor. In this case, the data or value returned from the amount of pressure I put on the sensor, is creating a visual effect in processing.


import processing.serial.*;

int sensorValue = 0;
int previousTime = 0;
color rectColor = 0;

void setup() {
 size(500, 500);

Serial arduinoConnection = null;

String[] ports = Serial.list();
 arduinoConnection = new Serial(this, ports[3], 9600);

void draw() {
 int window = 5000;
 float x = 0;
 float y = 0;
 int currentTime = millis() % window;

if (currentTime < previousTime) {
 rectColor = color(random(255), random(255), random(255));
 previousTime = 0;

if (currentTime — previousTime > 10) {
 x = map(currentTime, 0, window, 0, width);
 y = map(sensorValue, 0, 710, 0, height);
 rect(x, y, 5, 5);
 previousTime = currentTime;

void serialEvent(Serial port) {
 String data = port.readStringUntil(‘\n’);
 if (data != null) {

data = trim(data);
 try {
 sensorValue = Integer.parseInt(data);
 catch(Exception ex) {
 println(“Error Parsing Data”);
 sensorValue = -1;

Every time I start to apply pressure to a certain extent, a random color is returned as well.

I’ll be adding onto this project with the other students in my course this week. Stay tuned!

A single golf clap? Or a long standing ovation?

By clapping more or less, you can signal to us which stories really stand out.