Sensing Part 2: Wordstorm

For this assignment, I was interested in visualizing the force applied to a laptop keyboard when typing, as an alternate way for a user to determine their typing speed and intensity. I have a soft plastic keyboard cover, under which I inserted the force sensitive resistor. The resistor was not sensitive enough to capture pressure accross the cover, but when placed under the shift key, I was able to take in sensor input, which was then passed to my code in Processing. The code printed a visual of the key that had been pressed, with varying coordinates and rotation, depending on the force applied to the sensor. The color of the text also shifts from dark (low pressure) to light (high pressure) as the user types. For this assignment, I used iconic signs, with each key image corresponding to the key pressed on the keyboard. In retrospect, it might have been more interesting to see the keyboard input with a symbolic visualization, using waves or ripples.

Code: 

import processing.serial.*;

import java.util.Arrays;

PFont f;

int num = 100; //Array limit

//Letter Information

float theta;

int xCoord;

int yCoord;

int totalLetters;

int value =0; //if key pressed

int serialVal = 0;

int fontSize;

int random;

//Arduino 

String portname = "/dev/tty.usbmodemfa131"; // or "COM5"

String buf="";

Serial port;

int cr = 13;  // ASCII return   == 13

int lf = 10;  // ASCII linefeed == 10

//Arrays

char Letters[] = new char[num];

float coord[][] = new float[num][3]; //X coordinate, Y coordinate, and rotation angle

int fonts[] = new int[num]; //fontsize

//Sources:

// Reference: Basic fonts: http://www.learningprocessing.com/examples/chapter-17/example-17-5-rotating-text/

//Reference: Gravity Words: http://www.openprocessing.org/sketch/6733

//Reference: Storing Input http://processing.org/examples/storinginput.html

//Reference: Keyboard input http://www.openprocessing.org/sketch/18155

void setup(){

  size(700,700);

  f = createFont("Arial",30,true);

  frameRate(30);

  int totalLetters = 0;

  background(255, 204, 0);

  port = new Serial(this, portname, 9600); 

}

// called whenever serial data arrives

// From sample photocell code

void serialEvent(Serial p) {

  int c = port.read();

  if (c != lf && c != cr) {

    buf += char(c);

  }

  if (c == lf) {

    serialVal = int(buf);

    buf = "";

  }

}

void keyReleased() {

  //Changes value if key is released.

  if (value == 0) {

    value = 255;

  } else {

    value = 0;

  }

}

void draw(){

 xCoord = 200 + random;

 yCoord = 200 + random;

 fontSize = 32;

 if (value==255){

    random = int(random(-100,100 ));

    theta = serialVal;

    xCoord += serialVal;

    yCoord += serialVal;

    addNewLetter();

    for (int i=0;i<=totalLetters;i++){

      textFont(f, fonts[i]);

      rotate(coord[i][2]);

      text(Letters[i],coord[i][0],coord[i][1]);

      fill(theta);

    }

    value = 0;

  }

 delay(30);

void addNewLetter(){

  //Creates a new letter, with x and y coordinates, and an angle

 if (totalLetters >= num-1) {

   print("Index full");

   totalLetters = 0; //reset after 60 characters are present

   }  

 Letters[totalLetters] = key;

 coord[totalLetters][0] = xCoord;

 coord[totalLetters][1] = yCoord;

 coord[totalLetters][2]  = theta;

 fonts[totalLetters] = fontSize+int(serialVal);

 totalLetters += 1;  //moved here

 print(serialVal + "\tfont:" +fonts[totalLetters] + "\ttheta:" + theta+"\tx:" + xCoord + "\ty:"+yCoord+ "\t" + key + "\t" + totalLetters + "\n");

}