Capacitive Sensor Visualization With Processing

To test and demo the e-textile capacitive wheel I worked on with Rachel Freire, we visualized the sensors' responsiveness with Processing. It was much easier to see what was going on using a visualization rather than just looking at the Serial Monitor in the Arduino IDE.

We used fabric to make our sensors along with a Teensy 3.2, but you could adapt this to work with other sensors and boards. See Rachel's instructable on how to make an e-textile capacitive wheel here.

Step 1: Tools and Materials

Tools:

Arduino IDE

Processing IDE

Materials:

Teensy 3.2 (or similar)

Capacitive sensors

Step 2: Arduino Code

CapacitiveSensorToProcessing.ino

// List of pins that are used for the touch
// sensors.
const int touchPin1 = 15;
const int touchPin2 = 17;
const int touchPin3 = 18;
const int touchPin4 = 19;
const int touchPin5 = 16;
const int touchPin6 = 22;

void setup(void) {
  Serial.begin(9600);
}

void loop(void) {
  // JSON is a way to structure data that is easy to work with in
  // Processing.
  String json;

  // I assigned a lowercase letter to each touch sensor. 
  // In our case, we had 6 sensors that I named a-f. We read
  // from each sensor and then assemble the JSON from concatenated 
  // strings. The JSON for this example looks like: 
  // {a:1000,b:1,c:1200,d:3000,e:4000,f:2000}
  json = "{\"a\":";
  json = json + touchRead(touchPin1);
  json = json + ",\"b\":";
  json = json + touchRead(touchPin2);
  json = json + ",\"c\":";
  json = json + touchRead(touchPin3);
  json = json + ",\"d\":";
  json = json + touchRead(touchPin4);
  json = json + ",\"e\":";
  json = json + touchRead(touchPin5);
  json = json + ",\"f\":";
  json = json + touchRead(touchPin6);
  json = json + "}";

  // This gets printed to Serial, which Processing will read.
  Serial.println(json);
  delay(200);
}

After uploading this to your board, you can test that it outputs the correct JSON by opening the Serial Monitor in the Arduino IDE (see screenshot). Make note of the biggest values being read from your sensors for your Processing program.

Step 3: Processing Code

CapacitiveSensorToProcessing.pde

import processing.serial.*;
int numPins_ = 6; // UDPATE THIS TO YOUR NUMBER OF SENSORS
Serial port_;  
JSONObject json_;
float[] pinValues_;
int maxPinInput_ = 9000; // UPDATE THIS TO THE MAX VALUE YOU READ FROM YOUR SENSORS
void setup() {
  size(400, 400);
 
 // The code below will print out all your ports to your console. 
 // MAKE A NOTE of which port is the first listing for /dev/tty.usbmodem#####.
  for (int i = 0; i < Serial.list().length; i++) {
    println(Serial.list()[i]);
  }
  // CHANGE 2 TO BE WHICHEVER PORT WAS /DEV/TTY.USBMODEM#######.
  // You start counting with 0. Ours was the third listing, so we put 2.
  String portName = Serial.list()[2]; 
  port_ = new Serial(this, portName, 9600);
  pinValues_ = new float[numPins_];
  for (int i = 0; i < numPins_; i++) {
    pinValues_[i] = 0;
  }
}
void draw() {
  if (getData()) {
    background(255); // clears background
    // The value read from each sensor gets mapped to the range [0, Screen Width].
    // This value becomes the length of the rectangle associated with that sensor.
    float rh = height / pinValues_.length;
    float maxRw = width;
    fill(255, 0, 0);
    for (int i = 0; i < pinValues_.length; i++) {
      float rw = map(pinValues_[i], 0, maxPinInput_, 0, maxRw); 
      rect(0, i * rh, rw, rh);
    }
  }
}
boolean getData() {
  if (port_.available() > 0) {  // If data is available,
    json_ = parseJSONObject(port_.readString());
   // println(json_); 
    if (json_ != null) {
      pinValues_[0] = json_.getInt("a"); // IF YOU HAVE MORE OR LESS SENSORS, UPDATE THIS
      pinValues_[1] = json_.getInt("b");
      pinValues_[2] = json_.getInt("c");
      pinValues_[3] = json_.getInt("d");
      pinValues_[4] = json_.getInt("e");
      pinValues_[5] = json_.getInt("f");
      // println(pinValues_);
      return true;
    }
  }
  // println("INVALID JSON"); 
  return false;
}